Skip to content

Update plugin to be compliant with Leaflet 1.9.4 #28

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
babastienne wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Update plugin to be compliant with Leaflet 1.9.4 #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f62dbbd
[ADD] Support for {r} format in urls
babastienne Feb 4, 2025
5273f0b
[Improve] Examples file and documentation with working examples
babastienne Feb 4, 2025
d748e8c
[DOC] Add new contributor
babastienne Feb 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion L.Control.Basemaps-min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions L.Control.Basemaps.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ L.Control.Basemaps = L.Control.extend({
d._url,
L.extend(
{
r: this.options.detectRetina && L.Browser.retina && this.options.maxZoom > 0 ? '@2x' : '',
s: d._getSubdomain(coords),
x: coords.x,
y: d.options.tms ? d._globalTileRange.max.y - coords.y : coords.y,
Expand Down
69 changes: 34 additions & 35 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ underlying tile service.

See the [example](//consbio.github.io/Leaflet.Basemaps).

_Tested with Leaflet 1.1.0_
_Tested with Leaflet 1.9.4_

## Install

Expand Down Expand Up @@ -48,30 +48,28 @@ Example usage:

```
var basemaps = [
L.tileLayer('//{s}.tile.stamen.com/toner-lite/{z}/{x}/{y}.png', {
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
subdomains: 'abcd',
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution:
'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>',
subdomains: "abc",
maxZoom: 20,
minZoom: 0,
label: 'Toner Lite' // optional label used for tooltip
label: "OpenStreetMap"
}),
L.tileLayer('//{s}.tile.stamen.com/toner/{z}/{x}/{y}.png', {
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
subdomains: 'abcd',
L.tileLayer("https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}", {
attribution:
'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
maxZoom: 20,
minZoom: 0,
label: 'Toner'
label: "Satellite"
}),
L.tileLayer('//{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.png', {
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
subdomains: 'abcd',
L.tileLayer("https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png", {
attribution:
'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
subdomains: "abcd",
maxZoom: 16,
minZoom: 1,
label: 'Watercolor'
}),
L.tileLayer.wms('https://firms.modaps.eosdis.nasa.gov/wms/viirs', {
layers: 'NASA FIRMS',
label: 'NASA Fire Hotspots'
label: "Voyager"
})
];

Expand Down Expand Up @@ -102,36 +100,37 @@ to an arbitrary image. Just make sure that the target image is not too big.
Example:

```
L.tileLayer('//stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png', {
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
subdomains: 'abcd',
maxZoom: 20,
L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
attribution: 'Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)',
subdomains: "abc",
maxZoom: 17,
minZoom: 0,
label: 'Toner',
iconURL: '//stamen-tiles-a.a.ssl.fastly.net/toner/4/2/5.png'
label: "OpenTopoMap",
iconURL: 'https://tile.opentopomap.org/4/2/5.png',
}),
L.tileLayer('//stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png', {
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
subdomains: 'abcd',
maxZoom: 16,
minZoom: 1,
label: 'Watercolor',
L.tileLayer("https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}", {
attribution:
'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
maxZoom: 20,
minZoom: 0,
label: "Satellite",
iconURL: 'alt_icon.jpg'
})
```

## Development

- `npm install`
- `node_modules/.bin/gulp` (starts file watcher)
- `node_modules/.bin/gulp build` ( builds minified version)
- `npm install`
- `node_modules/.bin/gulp` (starts file watcher)
- `node_modules/.bin/gulp build` ( builds minified version)

## Credits:

Developed and maintained with support from the [Peninsular Florida Landscape Conservation Cooperative](http://peninsularfloridalcc.org) and additional support from the [U.S. Forest Service Northwest Regional Climate Hub](http://www.fs.fed.us/climatechange/nrch/).

## Contributors:

- [Brendan Ward](https://github.com/brendan-ward)
- [Nik Molnar](https://github.com/nikmolnar)
- [Kaveh Karimi](https://github.com/ka7eh)
- [Brendan Ward](https://github.com/brendan-ward)
- [Nik Molnar](https://github.com/nikmolnar)
- [Kaveh Karimi](https://github.com/ka7eh)
- [Babastienne](https://github.com/babastienne)
32 changes: 18 additions & 14 deletions examples/alternative_icons.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,32 +4,36 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1;"/>
<title>Leaflet Basemaps Control</title>
<link rel="stylesheet" href="//unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin="" />
<link rel="stylesheet" href="../L.Control.Basemaps.css" />
</head>
<body>
<script src="//unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""></script>
<script src="../L.Control.Basemaps.js"></script>
<div id="map" style="position: absolute; top: 0; left:0; bottom:0; right: 0;"></div>

<script>
var map = L.map('map').setView([44.07, -118.78], 5);

var basemaps = [
L.tileLayer('//stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png', {
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
subdomains: 'abcd',
maxZoom: 20,
L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
attribution: 'Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)',
subdomains: "abc",
maxZoom: 17,
minZoom: 0,
label: 'Toner',
iconURL: '//stamen-tiles-a.a.ssl.fastly.net/toner/4/2/5.png'
label: "OpenTopoMap",
iconURL: 'https://tile.opentopomap.org/4/2/5.png',
}),
L.tileLayer('//stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png', {
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
subdomains: 'abcd',
maxZoom: 16,
minZoom: 1,
label: 'Watercolor',
L.tileLayer("https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}", {
attribution:
'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
maxZoom: 20,
minZoom: 0,
label: "Satellite",
iconURL: 'alt_icon.jpg' // credit: Photo by Ray Hennessy on Unsplash (https://unsplash.com/photos/xUUZcpQlqpM)
})
];
Expand Down
48 changes: 27 additions & 21 deletions examples/multiple_maps.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,9 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1;"/>
<title>Leaflet Basemaps Control</title>
<link rel="stylesheet" href="//unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin="" />
<link rel="stylesheet" href="../L.Control.Basemaps.css" />
<style>
body {
Expand All @@ -20,7 +22,9 @@
</style>
</head>
<body>
<script src="//unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""></script>
<script src="../L.Control.Basemaps.js"></script>


Expand All @@ -31,19 +35,20 @@
L.map('First').setView([44.07, -118.78], 5)
.addControl(L.control.basemaps({
basemaps: [
L.tileLayer('//stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png', {
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
subdomains: 'abcd',
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution:
'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>',
subdomains: "abc",
maxZoom: 20,
minZoom: 0,
label: 'Toner'
label: "OpenStreetMap"
}),
L.tileLayer('//stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png', {
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
subdomains: 'abcd',
maxZoom: 16,
minZoom: 1,
label: 'Watercolor'
L.tileLayer("https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}", {
attribution:
'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
maxZoom: 20,
minZoom: 0,
label: "Satellite"
})
],
tileX: 0,
Expand All @@ -55,19 +60,20 @@
L.map('Second').setView([44.07, -118.78], 5)
.addControl(L.control.basemaps({
basemaps: [
L.tileLayer('//stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}.png', {
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
subdomains: 'abcd',
maxZoom: 20,
L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
attribution: 'Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)',
subdomains: "abc",
maxZoom: 17,
minZoom: 0,
label: 'Terrain'
label: "OpenTopoMap"
}),
L.tileLayer('//stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.png', {
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
subdomains: 'abcd',
L.tileLayer("https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png", {
attribution:
'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
subdomains: "abcd",
maxZoom: 16,
minZoom: 1,
label: 'Toner-Lite'
label: "Voyager"
})
],
tileX: 0,
Expand Down
Loading