Update leaflet providers to 1.13.0

This commit is contained in:
David Molineus
2022-02-22 08:48:52 +01:00
parent ecc66d2935
commit de22e28c1f
9 changed files with 633 additions and 200 deletions

View File

@@ -8,13 +8,13 @@ Download [leaflet-providers.js](https://raw.githubusercontent.com/leaflet-extras
<head>
...
<script src="http://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
<script src="http://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="js/leaflet-providers.js"></script>
</head>
# Usage
Leaflet-providers [providers](#providers) are refered to with a `provider[.<variant>]`-string. Let's say you want to add the nice [Watercolor](http://maps.stamen.com/#watercolor/) style from Stamen to your map, you pass `Stamen.Watercolor` to the `L.tileLayer.provider`-constructor, which will return a [L.TileLayer](http://leafletjs.com/reference.html#tilelayer) instance for Stamens Watercolor tile layer.
Leaflet-providers [providers](#providers) are referred to with a `provider[.<variant>]`-string. Let's say you want to add the nice [Watercolor](http://maps.stamen.com/#watercolor/) style from Stamen to your map, you pass `Stamen.Watercolor` to the `L.tileLayer.provider`-constructor, which will return a [L.TileLayer](http://leafletjs.com/reference.html#tilelayer) instance for Stamens Watercolor tile layer.
```Javascript
// add Stamen Watercolor to map.
@@ -29,9 +29,17 @@ Leaflet-providers provides tile layers from different providers, including *Open
In addition to the providers you are free<b id="what-is-free">1</b> to use, we support some layers which require registration.
### HERE (formerly Nokia).
### HERE and HEREv3 (formerly Nokia).
In order to use HERE layers, you must [register](http://developer.here.com/). Once registered, you can create an `app_id` and `app_code` which you have to pass to `L.tileLayer.provider` in the options:
In order to use HEREv3 layers, you must [register](http://developer.here.com/). Once registered, you can create an `apiKey` which you have to pass to `L.tileLayer.provider` in the options:
```Javascript
L.tileLayer.provider('HEREv3.terrainDay', {
apiKey: '<insert apiKey here>'
}).addTo(map);
```
You can still pass `app_id` and `app_code` in legacy projects:
```Javascript
L.tileLayer.provider('HERE.terrainDay', {
@@ -40,18 +48,38 @@ L.tileLayer.provider('HERE.terrainDay', {
}).addTo(map);
```
[Available HERE layers](http://leaflet-extras.github.io/leaflet-providers/preview/#filter=HERE)
### Jawg Maps
In order to use Jawg Maps, you must [register](https://www.jawg.io/lab). Once registered, your access token will be located [here](https://www.jawg.io/lab/access-tokens) and you will access to all Jawg default maps (variants) and your own customized maps :
```JavaScript
L.tileLayer.provider('Jawg.Streets', {
variant: '<insert map id here or blank for default variant>',
accessToken: '<insert access token here>'
}).addTo(map);
```
### Mapbox
In order to use Mapbox maps, you must [register](https://tiles.mapbox.com/signup). You can get map_ID (i.e mapbox.satellite) and ACCESS_TOKEN from [Mapbox projects](https://www.mapbox.com/projects):
In order to use Mapbox maps, you must [register](https://tiles.mapbox.com/signup). You can get map_ID (e.g. "mapbox/satellite-v9") and ACCESS_TOKEN from [Mapbox projects](https://www.mapbox.com/projects):
```JavaScript
L.tileLayer.provider('MapBox', {
id: 'ID': '<insert map_ID here>',
id: '<insert map_ID here>',
accessToken: '<insert ACCESS_TOKEN here>'
}).addTo(map);
```
The currently-valid Mapbox map styles, to use for map_IDs, [are listed in the Mapbox documentation](https://docs.mapbox.com/api/maps/#mapbox-styles) - only the final part of each is required, e.g. "mapbox/light-v10".
### MapTiler Cloud
In order to use MapTiler maps, you must [register](https://cloud.maptiler.com/). Once registered, get your API key from Account->Keys, which you have to pass to `L.tileLayer.provider` in the options:
```JavaScript
L.tileLayer.provider('MapTiler.Streets', {
key: '<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:
@@ -65,9 +93,19 @@ In order to use ArcGIS maps, you must [register](https://developers.arcgis.com/e
[Available Esri layers](http://leaflet-extras.github.io/leaflet-providers/preview/#filter=Esri)
### TomTom
In order to use TomTom layers, you must [register](https://developer.tomtom.com/user/register). Once registered, you can create an `apikey` which you have to pass to `L.tileLayer.provider` in the options:
```Javascript
L.tileLayer.provider('TomTom', {
apikey: '<insert your API key here>'
}).addTo(map);
```
### Geoportail France
In order to use Geoportail France resources, you need to obtain an [api key]( http://professionnels.ign.fr/ign/contrats/) that allows you to access the [resources](https://geoservices.ign.fr/documentation/donnees-ressources-wmts.html#ressources-servies-en-wmts-en-projection-web-mercator) you need. Pass this api key and the ID of the resource to display to `L.tileLayer.provider` in the options:
In order to use Geoportail France resources, you need to obtain an [api key]( http://professionnels.ign.fr/ign/contrats/) that allows you to access the [resources](https://geoservices.ign.fr/documentation/donnees-ressources-wmts.html#ressources-servies-en-wmts-en-projection-web-mercator) you need. Pass this api key and the ID of the resource to display to `L.tileLayer.provider` in the options:
```JavaScript
L.tileLayer.provider('GeoportailFrance', {
variant: '<insert resource ID here>',
@@ -75,10 +113,13 @@ L.tileLayer.provider('GeoportailFrance', {
}).addTo(map);
```
Please note that a public api key (`choisirgeoportail`) is used by default and comes with no guarantee.
Please note that a public api key (`choisirgeoportail`) is used by default and comes with no guarantee.
4 aliases are also provided for common Geoportail resources : `GeoportailFrance`, `GeoportailFrance.orthos`, `GeoportailFrance.ignMaps` and `GeoportailFrance.parcels` (See index.html demo).
### Stadia Maps
In order to use Stadia maps, you must [register](https://client.stadiamaps.com/signup/). Once registered, you can whitelist your domain within your account settings.
# Attribution