diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index 3deee26f..0955e546 100644
--- 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
new file mode 100644
index 00000000..158aac1a
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,5 @@
+*.js
+package.json
+package-lock.json
+CHANGELOG.md
+preview/vendor/*
\ No newline at end of file
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index ae492a9b..869540f9 100644
--- 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
index 11a251a6..3232240a 100644
--- 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[1](#what-is-free) tile providers.
# Installation
@@ -16,8 +16,8 @@ Include `leaflet-providers.js` in your page after including Leaflet, e.g.:
```html
-
-
+
+
```
@@ -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: '',
@@ -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: ''
@@ -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: ''
@@ -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: ''}).addTo(map);
```
@@ -136,7 +140,8 @@ your domain.
This work was inspired from , and originally created by [Stefan Seelmann](https://github.com/seelmann).
-### What do we mean by *free*?
+### What do we mean by _free_?
+
1
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
index 84af6ac2..e0c5ecd2 100644
--- 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);
-}
\ No newline at end of file
+/* 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);
+}
diff --git a/css/gh-fork-ribbon.ie.css b/css/gh-fork-ribbon.ie.css
index 77fcab50..8b143e9c 100644
--- a/css/gh-fork-ribbon.ie.css
+++ b/css/gh-fork-ribbon.ie.css
@@ -1,68 +1,68 @@
-/* IE voodoo courtesy of http://stackoverflow.com/a/4617511/263871 and
- * http://www.useragentman.com/IETransformsTranslator */
-.github-fork-ribbon-wrapper.right .github-fork-ribbon {
- /* IE positioning hack (couldn't find a transform-origin alternative for IE) */
- top: -22px;
- right: -62px;
-
- /* IE8+ */
- -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865474, SizingMethod='auto expand')";
- /* IE6 and 7 */
- filter: progid:DXImageTransform.Microsoft.Matrix(
- M11=0.7071067811865474,
- M12=-0.7071067811865477,
- M21=0.7071067811865477,
- M22=0.7071067811865474,
- SizingMethod='auto expand'
- );
-}
-
-.github-fork-ribbon-wrapper.left .github-fork-ribbon {
- top: -22px;
- left: -22px;
-
- /* IE8+ */
- -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865483, M12=0.7071067811865467, M21=-0.7071067811865467, M22=0.7071067811865483, SizingMethod='auto expand')";
- /* IE6 and 7 */
- filter: progid:DXImageTransform.Microsoft.Matrix(
- M11=0.7071067811865483,
- M12=0.7071067811865467,
- M21=-0.7071067811865467,
- M22=0.7071067811865483,
- SizingMethod='auto expand'
- );
-}
-
-.github-fork-ribbon-wrapper.left-bottom .github-fork-ribbon {
- /* IE positioning hack (couldn't find a transform-origin alternative for IE) */
- top: 12px;
- left: -22px;
-
-
- /* IE8+ */
- -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865474, SizingMethod='auto expand')";
- /* IE6 and 7 */
-/* filter: progid:DXImageTransform.Microsoft.Matrix(
- M11=0.7071067811865474,
- M12=-0.7071067811865477,
- M21=0.7071067811865477,
- M22=0.7071067811865474,
- SizingMethod='auto expand'
- );
-*/}
-
-.github-fork-ribbon-wrapper.right-bottom .github-fork-ribbon {
- top: 12px;
- right: -62px;
-
- /* IE8+ */
- -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865483, M12=0.7071067811865467, M21=-0.7071067811865467, M22=0.7071067811865483, SizingMethod='auto expand')";
- /* IE6 and 7 */
- filter: progid:DXImageTransform.Microsoft.Matrix(
- M11=0.7071067811865483,
- M12=0.7071067811865467,
- M21=-0.7071067811865467,
- M22=0.7071067811865483,
- SizingMethod='auto expand'
- );
-}
\ No newline at end of file
+/* IE voodoo courtesy of http://stackoverflow.com/a/4617511/263871 and
+ * http://www.useragentman.com/IETransformsTranslator */
+.github-fork-ribbon-wrapper.right .github-fork-ribbon {
+ /* IE positioning hack (couldn't find a transform-origin alternative for IE) */
+ top: -22px;
+ right: -62px;
+
+ /* IE8+ */
+ -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865474, SizingMethod='auto expand')";
+ /* IE6 and 7 */
+ filter: progid:DXImageTransform.Microsoft.Matrix(
+ M11=0.7071067811865474,
+ M12=-0.7071067811865477,
+ M21=0.7071067811865477,
+ M22=0.7071067811865474,
+ SizingMethod='auto expand'
+ );
+}
+
+.github-fork-ribbon-wrapper.left .github-fork-ribbon {
+ top: -22px;
+ left: -22px;
+
+ /* IE8+ */
+ -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865483, M12=0.7071067811865467, M21=-0.7071067811865467, M22=0.7071067811865483, SizingMethod='auto expand')";
+ /* IE6 and 7 */
+ filter: progid:DXImageTransform.Microsoft.Matrix(
+ M11=0.7071067811865483,
+ M12=0.7071067811865467,
+ M21=-0.7071067811865467,
+ M22=0.7071067811865483,
+ SizingMethod='auto expand'
+ );
+}
+
+.github-fork-ribbon-wrapper.left-bottom .github-fork-ribbon {
+ /* IE positioning hack (couldn't find a transform-origin alternative for IE) */
+ top: 12px;
+ left: -22px;
+
+ /* IE8+ */
+ -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865474, SizingMethod='auto expand')";
+ /* IE6 and 7 */
+ /* filter: progid:DXImageTransform.Microsoft.Matrix(
+ M11=0.7071067811865474,
+ M12=-0.7071067811865477,
+ M21=0.7071067811865477,
+ M22=0.7071067811865474,
+ SizingMethod='auto expand'
+ );
+*/
+}
+
+.github-fork-ribbon-wrapper.right-bottom .github-fork-ribbon {
+ top: 12px;
+ right: -62px;
+
+ /* IE8+ */
+ -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865483, M12=0.7071067811865467, M21=-0.7071067811865467, M22=0.7071067811865483, SizingMethod='auto expand')";
+ /* IE6 and 7 */
+ filter: progid:DXImageTransform.Microsoft.Matrix(
+ M11=0.7071067811865483,
+ M12=0.7071067811865467,
+ M21=-0.7071067811865467,
+ M22=0.7071067811865483,
+ SizingMethod='auto expand'
+ );
+}
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 0f6ad99f..f3f07035 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -1,11 +1,13 @@
+import { defineConfig } from 'eslint/config';
import globals from 'globals';
-import eslintPluginEslint from '@eslint/js';
-import eslintPluginStylistic from '@stylistic/eslint-plugin-js';
-import eslintPluginHtml from 'eslint-plugin-html';
+import js from '@eslint/js';
+import stylistic from '@stylistic/eslint-plugin';
-const config = [
+export default defineConfig([
{
files: ['**/*.js'],
+ plugins: { js, stylistic },
+ extends: ['js/recommended', 'stylistic/all'],
languageOptions: {
globals: {
...globals.browser,
@@ -14,39 +16,24 @@ const config = [
L: 'writable'
}
},
- plugins: {
- ...eslintPluginStylistic.configs['all-flat'].plugins
- },
rules: {
- ...eslintPluginEslint.configs['recommended'].rules,
- ...eslintPluginStylistic.configs['all-flat'].rules,
- '@stylistic/js/brace-style': ['error', '1tbs'],
- '@stylistic/js/comma-dangle': ['error', 'only-multiline'],
- '@stylistic/js/dot-location': ['error', 'property'],
- '@stylistic/js/function-call-argument-newline': ['error', 'consistent'],
- '@stylistic/js/indent': ['error', 'tab'],
- '@stylistic/js/multiline-comment-style': 'off',
- '@stylistic/js/no-tabs': 'off',
- '@stylistic/js/object-curly-spacing': ['error', 'always'],
- '@stylistic/js/padded-blocks': 'off',
- '@stylistic/js/quotes': ['error', 'single'],
- '@stylistic/js/quote-props': ['error', 'consistent-as-needed'],
- '@stylistic/js/semi': ['error', 'always'],
- '@stylistic/js/space-before-function-paren': ['error', 'never'],
- '@stylistic/js/array-element-newline': ["error", "consistent"],
+ '@stylistic/array-element-newline': ['error', 'consistent'],
+ '@stylistic/brace-style': ['error', '1tbs'],
+ '@stylistic/comma-dangle': ['error', 'only-multiline'],
+ '@stylistic/dot-location': ['error', 'property'],
+ '@stylistic/function-call-argument-newline': ['error', 'consistent'],
+ '@stylistic/indent': ['error', 'tab'],
+ '@stylistic/multiline-comment-style': 'off',
+ '@stylistic/no-tabs': 'off',
+ '@stylistic/object-curly-spacing': ['error', 'always'],
+ '@stylistic/object-property-newline': ['error', { allowAllPropertiesOnSameLine: true }],
+ '@stylistic/padded-blocks': 'off',
+ '@stylistic/quote-props': ['error', 'consistent-as-needed'],
+ '@stylistic/quotes': ['error', 'single'],
+ '@stylistic/semi': ['error', 'always'],
+ '@stylistic/space-before-function-paren': ['error', 'never'],
'no-lonely-if': 'error',
'no-unused-expressions': ['error', { allowTernary: true }]
}
- },
- {
- files: ['**/*.html'],
- plugins: {
- eslintPluginHtml,
- },
- settings: {
- 'html/report-bad-indent': 2,
- },
- }
-];
-
-export default config;
+ }
+]);
diff --git a/index.html b/index.html
index dbc17f2b..da96010f 100644
--- a/index.html
+++ b/index.html
@@ -1,118 +1,126 @@
-
- Leaflet Provider Demo
-
-
-
-
-
-
-
-
-
-
-
-
- This page lists the providers with bounds.
- Click on a provider name to view a map with the layer and a rectangle
- depicting the bounds for this layer.
-
+
This page lists the providers with bounds. Click on a provider name to view a map with the layer and a rectangle depicting the bounds for this layer.
-
- Sometimes you need to zoom in because the layer doesn't provide lower zoom levels.
-
-
-
Provider
-
-
-
-
-
+
Sometimes you need to zoom in because the layer doesn't provide lower zoom levels.