Skip to content

Commit 1bc2a97

Browse files
brunobbrunob
committed
!feat: convert project to ES module
- Brings compatibility for Leaflet 2 - Restructure project: source in src/, distribution files in dist/ - Add Rollup build system to generate ES module and UMD distributions - Use named imports from Leaflet - Configure dual package exports in package.json (ESM + UMD) - Add Leaflet as peerDependency (^1.7.0 || >=2.0.0-alpha.1) - Add demo pages for both ESM and UMD usage patterns with Import Maps Ref: #656
1 parent bed4216 commit 1bc2a97

File tree

11 files changed

+2949
-157
lines changed

11 files changed

+2949
-157
lines changed

‎demo.esm.html‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>Leaflet Provider Demo</title>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
8+
<!-- Leaflet style. REQUIRED! -->
9+
<link rel="stylesheet" href="https://unpkg.com/leaflet@latest/dist/leaflet.css" />
10+
<script type="importmap">
11+
{
12+
"imports": {
13+
"leaflet": "https://unpkg.com/leaflet@latest/dist/leaflet-src.esm.js"
14+
}
15+
}
16+
</script>
17+
<style>
18+
html { height: 100% }
19+
body { height: 100%; margin: 0; padding: 0;}
20+
.map { height: 100% }
21+
</style>
22+
<!--Fork Me on Github ribbon, we're using the awesome version from simonwhitaker available at https://github.com/simonwhitaker/github-fork-ribbon-css -->
23+
<link rel="stylesheet" href="css/gh-fork-ribbon.css" />
24+
<!--[if IE]>
25+
<link rel="stylesheet" href="css/gh-fork-ribbon.ie.css" />
26+
<![endif]-->
27+
</head>
28+
<body>
29+
<div class="github-fork-ribbon-wrapper left">
30+
<div class="github-fork-ribbon">
31+
<a href="https://github.com/leaflet-extras/leaflet-providers">Fork me on GitHub</a>
32+
</div>
33+
</div>
34+
<div id="map" class="map"></div>
35+
36+
<script type="module">
37+
import { Control, TileLayer, LatLng, Map } from 'leaflet';
38+
import { Provider } from './dist/leaflet-providers.js';
39+
40+
const map = new Map('map', {
41+
center: [48, -3],
42+
zoom: 5,
43+
zoomControl: false
44+
});
45+
46+
const defaultLayer = new Provider('OpenStreetMap.Mapnik').addTo(map);
47+
48+
const baseLayers = {
49+
'OpenStreetMap Default': defaultLayer,
50+
'OpenStreetMap German Style': new Provider('OpenStreetMap.DE'),
51+
'OpenStreetMap H.O.T.': new Provider('OpenStreetMap.HOT'),
52+
'MapTilesAPI OpenStreetMap in English': new Provider('MapTilesAPI.OSMEnglish'),
53+
'MapTilesAPI OpenStreetMap en Français': new Provider('MapTilesAPI.OSMFrancais'),
54+
'MapTilesAPI OpenStreetMap en Español': new Provider('MapTilesAPI.OSMEspagnol'),
55+
'Thunderforest OpenCycleMap': new Provider('Thunderforest.OpenCycleMap'),
56+
'Thunderforest Transport': new Provider('Thunderforest.Transport'),
57+
'Thunderforest Landscape': new Provider('Thunderforest.Landscape'),
58+
'Stamen Toner': new Provider('Stadia.StamenToner'),
59+
'Stamen Toner Lite': new Provider('Stadia.StamenTonerLite'),
60+
'Stamen Toner Dark': new Provider('Stadia.StamenTonerDark'),
61+
'Stamen Toner Blacklite': new Provider('Stadia.StamenTonerBlacklite'),
62+
'Stamen Terrain': new Provider('Stadia.StamenTerrain'),
63+
'Stamen Watercolor': new Provider('Stadia.StamenWatercolor'),
64+
'Stadia Alidade Smooth': new Provider('Stadia.AlidadeSmooth'),
65+
'Stadia Alidade Smooth Dark': new Provider('Stadia.AlidadeSmoothDark'),
66+
'Stadia Alidade Satellite': new Provider('Stadia.AlidadeSatellite'),
67+
'Stadia Outdoors': new Provider('Stadia.Outdoors'),
68+
'Jawg Streets': new Provider('Jawg.Streets'),
69+
'Jawg Terrain': new Provider('Jawg.Terrain'),
70+
'Jawg Lagoon': new Provider('Jawg.Lagoon'),
71+
'Jawg Sunny': new Provider('Jawg.Sunny'),
72+
'Jawg Dark': new Provider('Jawg.Dark'),
73+
'Jawg Light': new Provider('Jawg.Light'),
74+
'Esri WorldStreetMap': new Provider('Esri.WorldStreetMap'),
75+
'Esri WorldTopoMap': new Provider('Esri.WorldTopoMap'),
76+
'Esri WorldImagery': new Provider('Esri.WorldImagery'),
77+
'Esri WorldTerrain': new Provider('Esri.WorldTerrain'),
78+
'Esri WorldShadedRelief': new Provider('Esri.WorldShadedRelief'),
79+
'Esri WorldPhysical': new Provider('Esri.WorldPhysical'),
80+
'Esri OceanBasemap': new Provider('Esri.OceanBasemap'),
81+
'Esri NatGeoWorldMap': new Provider('Esri.NatGeoWorldMap'),
82+
'Esri WorldGrayCanvas': new Provider('Esri.WorldGrayCanvas'),
83+
'Geoportail France Maps': new Provider('GeoportailFrance'),
84+
'Geoportail France Orthos': new Provider('GeoportailFrance.orthos'),
85+
'USGS USTopo': new Provider('USGS.USTopo'),
86+
'USGS USImagery': new Provider('USGS.USImagery'),
87+
'USGS USImageryTopo': new Provider('USGS.USImageryTopo'),
88+
};
89+
90+
const overlayLayers = {
91+
'OpenSeaMap': new Provider('OpenSeaMap'),
92+
'OpenWeatherMap Clouds': new Provider('OpenWeatherMap.Clouds'),
93+
'OpenWeatherMap CloudsClassic': new Provider('OpenWeatherMap.CloudsClassic'),
94+
'OpenWeatherMap Precipitation': new Provider('OpenWeatherMap.Precipitation'),
95+
'OpenWeatherMap PrecipitationClassic': new Provider('OpenWeatherMap.PrecipitationClassic'),
96+
'OpenWeatherMap Rain': new Provider('OpenWeatherMap.Rain'),
97+
'OpenWeatherMap RainClassic': new Provider('OpenWeatherMap.RainClassic'),
98+
'OpenWeatherMap Pressure': new Provider('OpenWeatherMap.Pressure'),
99+
'OpenWeatherMap PressureContour': new Provider('OpenWeatherMap.PressureContour'),
100+
'OpenWeatherMap Wind': new Provider('OpenWeatherMap.Wind'),
101+
'OpenWeatherMap Temperature': new Provider('OpenWeatherMap.Temperature'),
102+
'OpenWeatherMap Snow': new Provider('OpenWeatherMap.Snow'),
103+
'Geoportail France Parcels': new Provider('GeoportailFrance.parcels'),
104+
'Waymarked Trails Hiking': new Provider('WaymarkedTrails.hiking'),
105+
'Waymarked Trails Cycling': new Provider('WaymarkedTrails.cycling'),
106+
'Waymarked Trails MTB': new Provider('WaymarkedTrails.mtb'),
107+
'Waymarked Trails Ski Slopes': new Provider('WaymarkedTrails.slopes'),
108+
'Waymarked Trails Riding': new Provider('WaymarkedTrails.riding'),
109+
'Waymarked Trails Skating': new Provider('WaymarkedTrails.skating')
110+
};
111+
112+
new Control.Layers(baseLayers, overlayLayers, {collapsed: false}).addTo(map);
113+
114+
// resize layers control to fit into view.
115+
function resizeLayerControl () {
116+
var layerControlHeight = document.body.clientHeight - (10 + 50);
117+
var layerControl = document.getElementsByClassName('leaflet-control-layers-expanded')[0];
118+
119+
layerControl.style.overflowY = 'auto';
120+
layerControl.style.maxHeight = layerControlHeight + 'px';
121+
}
122+
map.on('resize', resizeLayerControl);
123+
resizeLayerControl();
124+
</script>
125+
</body>
126+
</html>

‎demo.umd.html‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>Leaflet Provider Demo</title>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
8+
<!-- Leaflet style. REQUIRED! -->
9+
<link rel="stylesheet" href="https://unpkg.com/leaflet@latest/dist/leaflet.css" />
10+
<style>
11+
html { height: 100% }
12+
body { height: 100%; margin: 0; padding: 0;}
13+
.map { height: 100% }
14+
</style>
15+
<!--Fork Me on Github ribbon, we're using the awesome version from simonwhitaker available at https://github.com/simonwhitaker/github-fork-ribbon-css -->
16+
<link rel="stylesheet" href="css/gh-fork-ribbon.css" />
17+
<!--[if IE]>
18+
<link rel="stylesheet" href="css/gh-fork-ribbon.ie.css" />
19+
<![endif]-->
20+
</head>
21+
<body>
22+
<div class="github-fork-ribbon-wrapper left">
23+
<div class="github-fork-ribbon">
24+
<a href="https://github.com/leaflet-extras/leaflet-providers">Fork me on GitHub</a>
25+
</div>
26+
</div>
27+
<div id="map" class="map"></div>
28+
29+
<script src="https://unpkg.com/leaflet@latest/dist/leaflet.js"></script>
30+
<script src="./dist/leaflet-providers.umd.js"></script>
31+
<script>
32+
var map = L.map('map', {
33+
center: [48, -3],
34+
zoom: 5,
35+
zoomControl: false
36+
});
37+
38+
var defaultLayer = new L.TileLayer.Provider('OpenStreetMap.Mapnik').addTo(map);
39+
40+
var baseLayers = {
41+
'OpenStreetMap Default': defaultLayer,
42+
'OpenStreetMap German Style': new L.TileLayer.Provider('OpenStreetMap.DE'),
43+
'OpenStreetMap H.O.T.': new L.TileLayer.Provider('OpenStreetMap.HOT'),
44+
'MapTilesAPI OpenStreetMap in English': new L.TileLayer.Provider('MapTilesAPI.OSMEnglish'),
45+
'MapTilesAPI OpenStreetMap en Français': new L.TileLayer.Provider('MapTilesAPI.OSMFrancais'),
46+
'MapTilesAPI OpenStreetMap en Español': new L.TileLayer.Provider('MapTilesAPI.OSMEspagnol'),
47+
'Thunderforest OpenCycleMap': new L.TileLayer.Provider('Thunderforest.OpenCycleMap'),
48+
'Thunderforest Transport': new L.TileLayer.Provider('Thunderforest.Transport'),
49+
'Thunderforest Landscape': new L.TileLayer.Provider('Thunderforest.Landscape'),
50+
'Stamen Toner': new L.TileLayer.Provider('Stadia.StamenToner'),
51+
'Stamen Toner Lite': new L.TileLayer.Provider('Stadia.StamenTonerLite'),
52+
'Stamen Toner Dark': new L.TileLayer.Provider('Stadia.StamenTonerDark'),
53+
'Stamen Toner Blacklite': new L.TileLayer.Provider('Stadia.StamenTonerBlacklite'),
54+
'Stamen Terrain': new L.TileLayer.Provider('Stadia.StamenTerrain'),
55+
'Stamen Watercolor': new L.TileLayer.Provider('Stadia.StamenWatercolor'),
56+
'Stadia Alidade Smooth': new L.TileLayer.Provider('Stadia.AlidadeSmooth'),
57+
'Stadia Alidade Smooth Dark': new L.TileLayer.Provider('Stadia.AlidadeSmoothDark'),
58+
'Stadia Alidade Satellite': new L.TileLayer.Provider('Stadia.AlidadeSatellite'),
59+
'Stadia Outdoors': new L.TileLayer.Provider('Stadia.Outdoors'),
60+
'Jawg Streets': new L.TileLayer.Provider('Jawg.Streets'),
61+
'Jawg Terrain': new L.TileLayer.Provider('Jawg.Terrain'),
62+
'Jawg Lagoon': new L.TileLayer.Provider('Jawg.Lagoon'),
63+
'Jawg Sunny': new L.TileLayer.Provider('Jawg.Sunny'),
64+
'Jawg Dark': new L.TileLayer.Provider('Jawg.Dark'),
65+
'Jawg Light': new L.TileLayer.Provider('Jawg.Light'),
66+
'Esri WorldStreetMap': new L.TileLayer.Provider('Esri.WorldStreetMap'),
67+
'Esri WorldTopoMap': new L.TileLayer.Provider('Esri.WorldTopoMap'),
68+
'Esri WorldImagery': new L.TileLayer.Provider('Esri.WorldImagery'),
69+
'Esri WorldTerrain': new L.TileLayer.Provider('Esri.WorldTerrain'),
70+
'Esri WorldShadedRelief': new L.TileLayer.Provider('Esri.WorldShadedRelief'),
71+
'Esri WorldPhysical': new L.TileLayer.Provider('Esri.WorldPhysical'),
72+
'Esri OceanBasemap': new L.TileLayer.Provider('Esri.OceanBasemap'),
73+
'Esri NatGeoWorldMap': new L.TileLayer.Provider('Esri.NatGeoWorldMap'),
74+
'Esri WorldGrayCanvas': new L.TileLayer.Provider('Esri.WorldGrayCanvas'),
75+
'Geoportail France Maps': new L.TileLayer.Provider('GeoportailFrance'),
76+
'Geoportail France Orthos': new L.TileLayer.Provider('GeoportailFrance.orthos'),
77+
'USGS USTopo': new L.TileLayer.Provider('USGS.USTopo'),
78+
'USGS USImagery': new L.TileLayer.Provider('USGS.USImagery'),
79+
'USGS USImageryTopo': new L.TileLayer.Provider('USGS.USImageryTopo'),
80+
};
81+
82+
var overlayLayers = {
83+
'OpenSeaMap': new L.TileLayer.Provider('OpenSeaMap'),
84+
'OpenWeatherMap Clouds': new L.TileLayer.Provider('OpenWeatherMap.Clouds'),
85+
'OpenWeatherMap CloudsClassic': new L.TileLayer.Provider('OpenWeatherMap.CloudsClassic'),
86+
'OpenWeatherMap Precipitation': new L.TileLayer.Provider('OpenWeatherMap.Precipitation'),
87+
'OpenWeatherMap PrecipitationClassic': new L.TileLayer.Provider('OpenWeatherMap.PrecipitationClassic'),
88+
'OpenWeatherMap Rain': new L.TileLayer.Provider('OpenWeatherMap.Rain'),
89+
'OpenWeatherMap RainClassic': new L.TileLayer.Provider('OpenWeatherMap.RainClassic'),
90+
'OpenWeatherMap Pressure': new L.TileLayer.Provider('OpenWeatherMap.Pressure'),
91+
'OpenWeatherMap PressureContour': new L.TileLayer.Provider('OpenWeatherMap.PressureContour'),
92+
'OpenWeatherMap Wind': new L.TileLayer.Provider('OpenWeatherMap.Wind'),
93+
'OpenWeatherMap Temperature': new L.TileLayer.Provider('OpenWeatherMap.Temperature'),
94+
'OpenWeatherMap Snow': new L.TileLayer.Provider('OpenWeatherMap.Snow'),
95+
'Geoportail France Parcels': new L.TileLayer.Provider('GeoportailFrance.parcels'),
96+
'Waymarked Trails Hiking': new L.TileLayer.Provider('WaymarkedTrails.hiking'),
97+
'Waymarked Trails Cycling': new L.TileLayer.Provider('WaymarkedTrails.cycling'),
98+
'Waymarked Trails MTB': new L.TileLayer.Provider('WaymarkedTrails.mtb'),
99+
'Waymarked Trails Ski Slopes': new L.TileLayer.Provider('WaymarkedTrails.slopes'),
100+
'Waymarked Trails Riding': new L.TileLayer.Provider('WaymarkedTrails.riding'),
101+
'Waymarked Trails Skating': new L.TileLayer.Provider('WaymarkedTrails.skating')
102+
};
103+
104+
L.control.layers(baseLayers, overlayLayers, {collapsed: false}).addTo(map);
105+
106+
// resize layers control to fit into view.
107+
function resizeLayerControl () {
108+
var layerControlHeight = document.body.clientHeight - (10 + 50);
109+
var layerControl = document.getElementsByClassName('leaflet-control-layers-expanded')[0];
110+
111+
layerControl.style.overflowY = 'auto';
112+
layerControl.style.maxHeight = layerControlHeight + 'px';
113+
}
114+
map.on('resize', resizeLayerControl);
115+
resizeLayerControl();
116+
</script>
117+
</body>
118+
</html>

0 commit comments

Comments
 (0)