commit
6ebc1c83c0
@ -49,11 +49,13 @@ By default (as we didn't pass any options when creating the map instance), all m
|
|||||||
|
|
||||||
Note that `setView` call also returns the map object --- most Leaflet methods act like this when they don't return an explicit value, which allows convenient jQuery-like method chaining.
|
Note that `setView` call also returns the map object --- most Leaflet methods act like this when they don't return an explicit value, which allows convenient jQuery-like method chaining.
|
||||||
|
|
||||||
Next we'll add a tile layer to add to our map, in this case it's a Mapbox Streets tile layer. Creating a tile layer usually involves setting the URL template for the tile images (get yours at [Mapbox](http://mapbox.com)), the attribution text and the maximum zoom level of the layer:
|
Next we'll add a tile layer to add to our map, in this case it's a Mapbox Streets tile layer. Creating a tile layer usually involves setting the [URL template](http://leafletjs.com/reference.html#url-template) for the tile images (get yours at [Mapbox](http://mapbox.com)), the attribution text and the maximum zoom level of the layer:
|
||||||
|
|
||||||
<pre><code class="javascript">L.tileLayer('http://{s}.tiles.mapbox.com/v3/<a href="https://mapbox.com">MapID</a>/{z}/{x}/{y}.png', {
|
<pre><code class="javascript">L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
|
||||||
attribution: 'Map data &copy; <span class="text-cut" data-cut="[…]"><a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a></span>',
|
attribution: 'Map data &copy; <span class="text-cut" data-cut="[…]"><a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a></span>',
|
||||||
maxZoom: 18
|
maxZoom: 18,
|
||||||
|
id: '[your.mapbox.project.id](https://www.mapbox.com/projects/)',
|
||||||
|
accessToken: '[your.mapbox.public.access.token](https://www.mapbox.com/account/apps/)'
|
||||||
}).addTo(map);</code></pre>
|
}).addTo(map);</code></pre>
|
||||||
|
|
||||||
Make sure all the code is called after the `div` and `leaflet.js` inclusion. That's it! You have a working Leaflet map now.
|
Make sure all the code is called after the `div` and `leaflet.js` inclusion. That's it! You have a working Leaflet map now.
|
||||||
|
Loading…
Reference in New Issue
Block a user