leaflet-extras · brunob · Dec 2, 2025 · Dec 2, 2025
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
@@ -1,10 +1,10 @@
 version: 2
 updates:
-  - package-ecosystem: "github-actions"
-    directory: "/"
+  - package-ecosystem: 'github-actions'
+    directory: '/'
     schedule:
-      interval: "weekly"
-  - package-ecosystem: "npm"
-    directory: "/"
+      interval: 'weekly'
+  - package-ecosystem: 'npm'
+    directory: '/'
     schedule:
-      interval: "weekly"
+      interval: 'weekly'
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,5 @@
+*.js
+package.json
+package-lock.json
+CHANGELOG.md
+preview/vendor/*
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -1,6 +1,6 @@
 # So you want to add a layer?
 
-Yay! go add it to the leaflet-providers.js as long as it follows the following 
+Yay! go add it to the leaflet-providers.js as long as it follows the following
 rules:
 
 - Don't violate a providers TOS (if it exists, include a link to it)

diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
-Leaflet-providers
-=================
+# Leaflet-providers
+
 An extension to [Leaflet](http://leafletjs.com/) that contains configurations for various free<sup>[1](#what-is-free)</sup> tile providers.
 
 # Installation
@@ -16,8 +16,8 @@ Include `leaflet-providers.js` in your page after including Leaflet, e.g.:
 
 ```html
 <head>
-  <script src="https://unpkg.com/leaflet@latest/dist/leaflet.js"></script>
-  <script src="https://unpkg.com/leaflet-providers@latest/leaflet-providers.js"></script>
+	<script src="https://unpkg.com/leaflet@latest/dist/leaflet.js"></script>
+	<script src="https://unpkg.com/leaflet-providers@latest/leaflet-providers.js"></script>
 </head>
 ```
 
@@ -32,7 +32,7 @@ L.tileLayer.provider('Stadia.StamenWatercolor').addTo(map);
 
 # Providers
 
-Leaflet-providers provides tile layers from different providers, including *OpenStreetMap*, *Esri* and *OpenWeatherMap*. The full listing of free to use layers can be [previewed](http://leaflet-extras.github.io/leaflet-providers/preview/index.html). The page will show you the name to use with `leaflet-providers.js` and the code to use it without dependencies.
+Leaflet-providers provides tile layers from different providers, including _OpenStreetMap_, _Esri_ and _OpenWeatherMap_. The full listing of free to use layers can be [previewed](http://leaflet-extras.github.io/leaflet-providers/preview/index.html). The page will show you the name to use with `leaflet-providers.js` and the code to use it without dependencies.
 
 ## Providers requiring registration
 
@@ -71,6 +71,7 @@ L.tileLayer.provider('Jawg.Streets', {
 ### Mapbox
 
 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: '<insert map_ID here>',
@@ -83,6 +84,7 @@ The currently-valid Mapbox map styles, to use for map_IDs, [are listed in the Ma
 ### 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>'
@@ -92,6 +94,7 @@ L.tileLayer.provider('MapTiler.Streets', {
 ### MapTiles API
 
 In order to use OpenStreetMap in English, French or Spanish provided by MapTiles API, you must [register](https://www.maptilesapi.com/). Once registered, you have to add your key to `L.tileLayer.provider` in the options:
+
 ```JavaScript
 L.tileLayer.provider('MapTilesAPI.OSMEnglish', {
     apikey: '<insert key here>'
@@ -101,6 +104,7 @@ L.tileLayer.provider('MapTilesAPI.OSMEnglish', {
 ### 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:
+
 ```JavaScript
 L.tileLayer.provider('Thunderforest.Landscape', {apikey: '<insert api_key here>'}).addTo(map);
 ```
@@ -136,7 +140,8 @@ your domain.
 
 This work was inspired from <https://gist.github.com/1804938>, and originally created by [Stefan Seelmann](https://github.com/seelmann).
 
-### What do we mean by *free*?
+### What do we mean by _free_?
+
 <b id="what-is-free">1</b>
 We try to maintain leaflet-providers in such a way that you'll be able to use the layers we include without paying money.
 This doesn't mean no limits apply, you should always check before using these layers for anything serious.
diff --git a/css/gh-fork-ribbon.css b/css/gh-fork-ribbon.css
@@ -1,127 +1,126 @@
-/* Left will inherit from right (so we don't need to duplicate code */
-.github-fork-ribbon {
-  /* The right and left lasses determine the side we attach our banner to */
-  position: absolute;
-
-  /* Add a bit of padding to give some substance outside the "stitching" */
-  padding: 2px 0;
-
-  /* Set the base colour */
-  background-color: #a00;
-
-  /* Set a gradient: transparent black at the top to almost-transparent black at the bottom */
-  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.00)), to(rgba(0, 0, 0, 0.15)));
-  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.00), rgba(0, 0, 0, 0.15));
-  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.00), rgba(0, 0, 0, 0.15));
-  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.00), rgba(0, 0, 0, 0.15));
-  background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.00), rgba(0, 0, 0, 0.15));
-  background-image: linear-gradient(top, rgba(0, 0, 0, 0.00), rgba(0, 0, 0, 0.15));
-  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#000000', EndColorStr='#000000');
-
-  /* Add a drop shadow */
-  -webkit-box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.5);
-  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.5);
-
-  z-index: 9999;
-}
-
-.github-fork-ribbon a {
-  /* Set the font */
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: 13px;
-  font-weight: 700;
-  color: white;
-
-  /* Set the text properties */
-  text-decoration: none;
-  text-shadow: 0 -1px rgba(0,0,0,0.5);
-  text-align: center;
-
-  /* Set the geometry. If you fiddle with these you'll also need to tweak the top and right values in #github-fork-ribbon. */
-  width: 200px;
-  line-height: 20px;
-
-  /* Set the layout properties */
-  display: inline-block;
-  padding: 2px 0;
-
-  /* Add "stitching" effect */
-  border-width: 1px 0;
-  border-style: dotted;
-  border-color: rgba(255,255,255,0.7);
-}
-
-.github-fork-ribbon-wrapper {
-  width: 150px;
-  height: 150px;
-  position: absolute;
-  overflow: hidden;
-  top: 0;
-}
-
-.github-fork-ribbon-wrapper.left {
-  left: 0;
-}
-
-.github-fork-ribbon-wrapper.right {
-  right: 0;
-}
-
-.github-fork-ribbon-wrapper.left-bottom {
-  position: fixed;
-  top: inherit;
-  bottom: 0;
-  left: 0;
-}
-
-.github-fork-ribbon-wrapper.right-bottom {
-  position: fixed;
-  top: inherit;
-  bottom: 0;
-  right: 0;
-}
-
-.github-fork-ribbon-wrapper.right .github-fork-ribbon {
-  top: 42px;
-  right: -43px;
-
-  /* Rotate the banner 45 degrees */
-  -webkit-transform: rotate(45deg);
-  -moz-transform: rotate(45deg);
-  -o-transform: rotate(45deg);
-  transform: rotate(45deg);
-}
-
-.github-fork-ribbon-wrapper.left .github-fork-ribbon {
-  top: 42px;
-  left: -43px;
-
-  /* Rotate the banner -45 degrees */
-  -webkit-transform: rotate(-45deg);
-  -moz-transform: rotate(-45deg);
-  -o-transform: rotate(-45deg);
-  transform: rotate(-45deg);
-}
-
-
-.github-fork-ribbon-wrapper.left-bottom .github-fork-ribbon {
-  top: 80px;
-  left: -43px;
-
-  /* Rotate the banner -45 degrees */
-  -webkit-transform: rotate(45deg);
-  -moz-transform: rotate(45deg);
-  -o-transform: rotate(45deg);
-  transform: rotate(45deg);
-}
-
-.github-fork-ribbon-wrapper.right-bottom .github-fork-ribbon {
-  top: 80px;
-  right: -43px;
-
-  /* Rotate the banner -45 degrees */
-  -webkit-transform: rotate(-45deg);
-  -moz-transform: rotate(-45deg);
-  -o-transform: rotate(-45deg);
-  transform: rotate(-45deg);
-}
+/* Left will inherit from right (so we don't need to duplicate code */
+.github-fork-ribbon {
+	/* The right and left lasses determine the side we attach our banner to */
+	position: absolute;
+
+	/* Add a bit of padding to give some substance outside the "stitching" */
+	padding: 2px 0;
+
+	/* Set the base colour */
+	background-color: #a00;
+
+	/* Set a gradient: transparent black at the top to almost-transparent black at the bottom */
+	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.15)));
+	background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
+	background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
+	background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
+	background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
+	background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
+	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#000000', EndColorStr='#000000');
+
+	/* Add a drop shadow */
+	-webkit-box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.5);
+	box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.5);
+
+	z-index: 9999;
+}
+
+.github-fork-ribbon a {
+	/* Set the font */
+	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	font-size: 13px;
+	font-weight: 700;
+	color: white;
+
+	/* Set the text properties */
+	text-decoration: none;
+	text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
+	text-align: center;
+
+	/* Set the geometry. If you fiddle with these you'll also need to tweak the top and right values in #github-fork-ribbon. */
+	width: 200px;
+	line-height: 20px;
+
+	/* Set the layout properties */
+	display: inline-block;
+	padding: 2px 0;
+
+	/* Add "stitching" effect */
+	border-width: 1px 0;
+	border-style: dotted;
+	border-color: rgba(255, 255, 255, 0.7);
+}
+
+.github-fork-ribbon-wrapper {
+	width: 150px;
+	height: 150px;
+	position: absolute;
+	overflow: hidden;
+	top: 0;
+}
+
+.github-fork-ribbon-wrapper.left {
+	left: 0;
+}
+
+.github-fork-ribbon-wrapper.right {
+	right: 0;
+}
+
+.github-fork-ribbon-wrapper.left-bottom {
+	position: fixed;
+	top: inherit;
+	bottom: 0;
+	left: 0;
+}
+
+.github-fork-ribbon-wrapper.right-bottom {
+	position: fixed;
+	top: inherit;
+	bottom: 0;
+	right: 0;
+}
+
+.github-fork-ribbon-wrapper.right .github-fork-ribbon {
+	top: 42px;
+	right: -43px;
+
+	/* Rotate the banner 45 degrees */
+	-webkit-transform: rotate(45deg);
+	-moz-transform: rotate(45deg);
+	-o-transform: rotate(45deg);
+	transform: rotate(45deg);
+}
+
+.github-fork-ribbon-wrapper.left .github-fork-ribbon {
+	top: 42px;
+	left: -43px;
+
+	/* Rotate the banner -45 degrees */
+	-webkit-transform: rotate(-45deg);
+	-moz-transform: rotate(-45deg);
+	-o-transform: rotate(-45deg);
+	transform: rotate(-45deg);
+}
+
+.github-fork-ribbon-wrapper.left-bottom .github-fork-ribbon {
+	top: 80px;
+	left: -43px;
+
+	/* Rotate the banner -45 degrees */
+	-webkit-transform: rotate(45deg);
+	-moz-transform: rotate(45deg);
+	-o-transform: rotate(45deg);
+	transform: rotate(45deg);
+}
+
+.github-fork-ribbon-wrapper.right-bottom .github-fork-ribbon {
+	top: 80px;
+	right: -43px;
+
+	/* Rotate the banner -45 degrees */
+	-webkit-transform: rotate(-45deg);
+	-moz-transform: rotate(-45deg);
+	-o-transform: rotate(-45deg);
+	transform: rotate(-45deg);
+}