Adding MapTiles API as a tile provider (#448)

Adding MapTiles API examples, a provider for global maps in one language (English, French or Spanish).

Added example api key for MapTiles API. This key is not to be used in production by third parties but just for leaflet-providers.
Added three OpenStreetMap Language versions provided by MapTilesAPI.
Added example for MapTiles API, which requires an apikey.

README.md

@@ -80,6 +80,15 @@ L.tileLayer.provider('MapTiler.Streets', {
 }).addTo(map);
 ```
 
+### MapTiles API
+
+In order to use OpenStreetMap in English, French or Spanish provided by MapTiles API, you must [register](https://www.maptilesapi.com/). Once registered, you have to add your key to `L.tileLayer.provider` in the options:
+```JavaScript
+L.tileLayer.provider('MapTilesAPI.OSMEnglish', {
+    apikey: '<insert key here>'
+}).addTo(map);
+```
+
 ### Thunderforest
 
 In order to use Thunderforest maps, you must [register](https://thunderforest.com/pricing/). Once registered, you have an `api_key` which you have to pass to `L.tileLayer.provider` in the options:

index.html

@@ -41,6 +41,9 @@
 			'OpenStreetMap Default': defaultLayer,
 			'OpenStreetMap German Style': L.tileLayer.provider('OpenStreetMap.DE'),
 			'OpenStreetMap H.O.T.': L.tileLayer.provider('OpenStreetMap.HOT'),
+			'MapTilesAPI OpenStreetMap in English': L.tileLayer.provider('MapTilesAPI.OSMEnglish'),
+			'MapTilesAPI OpenStreetMap en Français': L.tileLayer.provider('MapTilesAPI.OSMFrancais'),
+			'MapTilesAPI OpenStreetMap en Español': L.tileLayer.provider('MapTilesAPI.OSMEspagnol'),
 			'Thunderforest OpenCycleMap': L.tileLayer.provider('Thunderforest.OpenCycleMap'),
 			'Thunderforest Transport': L.tileLayer.provider('Thunderforest.Transport'),
 			'Thunderforest Landscape': L.tileLayer.provider('Thunderforest.Landscape'),

leaflet-providers.js

@@ -123,6 +123,35 @@
 				}
 			}
 		},
+		MapTilesAPI: {
+			url: 'https://maptiles.p.rapidapi.com/{variant}/{z}/{x}/{y}.png?rapidapi-key={apikey}',
+			options: {
+				attribution:
+					'&copy; <a href="http://www.maptilesapi.com/">MapTiles API</a>, {attribution.OpenStreetMap}',
+				variant: 'en/map/v1',
+				// Get your own MapTiles API access token here : https://www.maptilesapi.com/
+				// NB : this is a demonstration key that comes with no guarantee and not to be used in production
+				apikey: '<insert your api key here>',
+				maxZoom: 19
+			},
+			variants: {
+				OSMEnglish: {
+					options: {
+						variant: 'en/map/v1'
+					}
+				},
+				OSMFrancais: {
+					options: {
+						variant: 'fr/map/v1'
+					}
+				},
+				OSMEspagnol: {
+					options: {
+						variant: 'es/map/v1'
+					}
+				}
+			}
+		},
 		OpenSeaMap: {
 			url: 'https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png',
 			options: {

preview/shared.js

@@ -9,6 +9,9 @@ var exampleAPIcodes = {
 	'Jawg': {
 		'accessToken': 'PyTJUlEU1OPJwCJlW1k0NC8JIt2CALpyuj7uc066O7XbdZCjWEL3WYJIk6dnXtps'
 	},
+	'MapTilesAPI': {
+		'apikey': '91eb180eb9msh46beac27e6084cep17a106jsn18a17417dbb6'
+	},
 	'Thunderforest': {
 		'apikey': 'db5ae1f5778a448ca662554581f283c5'
 	}