diff --git a/debug/map/svgoverlay.html b/debug/map/svgoverlay.html index f466d58e1..47a74b66e 100644 --- a/debug/map/svgoverlay.html +++ b/debug/map/svgoverlay.html @@ -23,13 +23,9 @@ var map = L.map('map'); - L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', { - maxZoom: 18, - attribution: 'Map data © OpenStreetMap contributors, ' + - 'Imagery © Mapbox', - id: 'mapbox/satellite-v9', - tileSize: 512, - zoomOffset: -1 + var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { + maxZoom: 19, + attribution: '© OpenStreetMap' }).addTo(map); var svgElement = document.querySelector('#image'), diff --git a/debug/map/videooverlay.html b/debug/map/videooverlay.html index 20fc5b654..f7c9014ab 100644 --- a/debug/map/videooverlay.html +++ b/debug/map/videooverlay.html @@ -21,13 +21,9 @@ var map = L.map('map'); - L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', { - maxZoom: 18, - attribution: 'Map data © OpenStreetMap contributors, ' + - 'Imagery © Mapbox', - id: 'mapbox/satellite-v9', - tileSize: 512, - zoomOffset: -1 + var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { + maxZoom: 19, + attribution: '© OpenStreetMap' }).addTo(map); var videoUrls = [ diff --git a/debug/vector/moving-canvas.html b/debug/vector/moving-canvas.html index 3e7ab7424..a3a9e3f29 100644 --- a/debug/vector/moving-canvas.html +++ b/debug/vector/moving-canvas.html @@ -17,9 +17,10 @@ diff --git a/docs/examples/extending/watermark.md b/docs/examples/extending/watermark.md index 29d0e15d2..13283d4c2 100644 --- a/docs/examples/extending/watermark.md +++ b/docs/examples/extending/watermark.md @@ -8,8 +8,9 @@ title: Watermark control zoom: 1 }); - var positron = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', { - attribution: '© OpenStreetMap contributors, © CARTO' + var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { + maxZoom: 19, + attribution: '© OpenStreetMap' }).addTo(map); L.Control.Watermark = L.Control.extend({ diff --git a/docs/examples/geojson/example.md b/docs/examples/geojson/example.md index cc7c68f94..0b18cf11d 100644 --- a/docs/examples/geojson/example.md +++ b/docs/examples/geojson/example.md @@ -7,13 +7,9 @@ title: GeoJSON tutorial diff --git a/docs/examples/quick-start/example-overlays.md b/docs/examples/quick-start/example-overlays.md index 97798cf97..255a5b689 100644 --- a/docs/examples/quick-start/example-overlays.md +++ b/docs/examples/quick-start/example-overlays.md @@ -8,13 +8,9 @@ customMapContainer: "true" var map = L.map('map').setView([51.505, -0.09], 13); - var tiles = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', { - maxZoom: 18, - attribution: 'Map data © OpenStreetMap contributors, ' + - 'Imagery © Mapbox', - id: 'mapbox/streets-v11', - tileSize: 512, - zoomOffset: -1 + var tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { + maxZoom: 19, + attribution: '© OpenStreetMap' }).addTo(map); var marker = L.marker([51.5, -0.09]).addTo(map); diff --git a/docs/examples/quick-start/example.md b/docs/examples/quick-start/example.md index 845bf71a9..8c0482501 100644 --- a/docs/examples/quick-start/example.md +++ b/docs/examples/quick-start/example.md @@ -8,13 +8,9 @@ customMapContainer: "true" var map = L.map('map').setView([51.505, -0.09], 13); - var tiles = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', { - maxZoom: 18, - attribution: 'Map data © OpenStreetMap contributors, ' + - 'Imagery © Mapbox', - id: 'mapbox/streets-v11', - tileSize: 512, - zoomOffset: -1 + var tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { + maxZoom: 19, + attribution: '© OpenStreetMap' }).addTo(map); var marker = L.marker([51.5, -0.09]).addTo(map) diff --git a/docs/examples/quick-start/index.md b/docs/examples/quick-start/index.md index ce676c9e8..9f25d3e63 100644 --- a/docs/examples/quick-start/index.md +++ b/docs/examples/quick-start/index.md @@ -42,7 +42,7 @@ Now you're ready to initialize the map and do some stuff with it. {% include frame.html url="example-basic.html" %} -Let's create a map of the center of London with pretty Mapbox Streets tiles. From here on, we'll be working in JS. First we'll initialize the map and set its view to our chosen geographical coordinates and a zoom level: +Let's create a map of the center of London with pretty OpenStreetMap tiles. From here on, we'll be working in JS. First we'll initialize the map and set its view to our chosen geographical coordinates and a zoom level: var map = L.map('map').setView([51.505, -0.09], 13); @@ -50,20 +50,16 @@ By default (as we didn't pass any options when creating the map instance), all m Note that the `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](/reference.html#tilelayer-url-template) for the tile images, the attribution text, and the maximum zoom level of the layer. In this example, we'll use the `mapbox/streets-v11` tiles from [Mapbox's Static Tiles API](https://docs.mapbox.com/api/maps/#static-tiles) (in order to use tiles from Mapbox, you must also [request an access token](https://www.mapbox.com/studio/account/tokens/)). Because this API returns 512x512 tiles by default (instead of 256x256), we will also have to explicitly specify this and offset our zoom by a value of -1. +Next, we'll add a tile layer to add to our map, in this case it's a OpenStreetMap tile layer. Creating a tile layer usually involves setting the [URL template](/reference.html#tilelayer-url-template) for the tile images, the attribution text, and the maximum zoom level of the layer. OpenStreetMap tiles are fine for programming your Leaflet map, but read the [Tile Usage Policy](https://operations.osmfoundation.org/policies/tiles/) of OpenStreetMap if you're going to use the tiles in production. -
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
-	attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
-	maxZoom: 18,
-	id: 'mapbox/streets-v11',
-	tileSize: 512,
-	zoomOffset: -1,
-	accessToken: 'your.mapbox.access.token'
+
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+	maxZoom: 19,
+	attribution: '© OpenStreetMap'
 }).addTo(map);

 
 Make sure all the code is called after the `div` and `leaflet.js` inclusion. That's it! You have a working Leaflet map now.
 
-It's worth noting that Leaflet is provider-agnostic, meaning that it doesn't enforce a particular choice of providers for tiles. You can try replacing `mapbox/streets-v11` with `mapbox/satellite-v9`, and see what happens. Also, Leaflet doesn't even contain a single provider-specific line of code, so you're free to use other providers if you need to (we'd suggest Mapbox though, it looks beautiful).
+It's worth noting that Leaflet is provider-agnostic, meaning that it doesn't enforce a particular choice of providers for tiles. Also, Leaflet doesn't even contain a single provider-specific line of code, so you're free to use other providers if you need to.
 
 Whenever using anything based on OpenStreetMap, an *attribution* is obligatory as per the [copyright notice](https://www.openstreetmap.org/copyright). Most other tile providers (such as [Mapbox](https://docs.mapbox.com/help/how-mapbox-works/attribution/), [Stamen](http://maps.stamen.com/) or [Thunderforest](https://www.thunderforest.com/terms/)) require an attribution as well. Make sure to give credit where credit is due.
 
diff --git a/src/control/Control.Attribution.js b/src/control/Control.Attribution.js
index 34abeb27b..247fb96ba 100644
--- a/src/control/Control.Attribution.js
+++ b/src/control/Control.Attribution.js
@@ -75,7 +75,7 @@ export var Attribution = Control.extend({
 	},
 
 	// @method addAttribution(text: String): this
-	// Adds an attribution text (e.g. `'Vector data © Mapbox'`).
+	// Adds an attribution text (e.g. `'© OpenStreetMap contributors'`).
 	addAttribution: function (text) {
 		if (!text) { return this; }