mirror of
https://github.com/netzmacht/contao-leaflet-libraries.git
synced 2025-12-01 20:43:51 +01:00
Update leaflet providers to 1.13.0
This commit is contained in:
@@ -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
|
||||
|
||||
|
||||
Reference in New Issue
Block a user