Update leaflet to 2.0.0-alpha

https://github.com/Leaflet/Leaflet/releases/tag/v2.0.0-alpha

Author: simon04

package.json

@@ -21,13 +21,13 @@
   },
   "homepage": "https://github.com/simon04/tyrolean-map#readme",
   "dependencies": {
-    "leaflet": "^1.9.4",
-    "leaflet-control-geocoder": "^3.1.0",
-    "leaflet.locatecontrol": "^0.83.0"
+    "leaflet": "2.0.0-alpha",
+    "leaflet-control-geocoder": "^3.2.0",
+    "leaflet.locatecontrol": "jeffreykog/leaflet-locatecontrol#leaflet-v2"
   },
   "devDependencies": {
-    "@types/leaflet": "^1.9.15",
-    "@types/leaflet.locatecontrol": "^0.74.6",
+    "@types/leaflet": "^1.9.18",
+    "@types/leaflet.locatecontrol": "^0.82.0",
     "prettier": "^3.5.3",
     "pretty-quick": "^4.1.1",
     "vite": "^6.3.2"

src/app.ts

@@ -1,4 +1,4 @@
-import * as L from 'leaflet';
+import {Map, Icon, Layer, TileLayer} from 'leaflet';
 import 'leaflet/dist/leaflet.css';
 import {Geocoder as GeocoderControl} from 'leaflet-control-geocoder';
 import 'leaflet-control-geocoder/style.css';
@@ -8,17 +8,17 @@ import LeafletHash from './leaflet-fullHash';
 import {CollapsableLayerControl} from './leaflet-collapsable-layer-control';
 import './style.css';
 
-const map = L.map('map').setView([47.3, 11.3], 9);
+const map = new Map('map').setView([47.3, 11.3], 9);
 
 map.attributionControl.setPrefix(false);
 const collapsed = window.matchMedia && window.matchMedia('all and (max-width: 700px)').matches;
 const layers = new CollapsableLayerControl({}, {}, {collapsed: collapsed}).addTo(map);
 
-delete (L.Icon.Default.prototype as any)._getIconUrl;
+delete (Icon.Default.prototype as any)._getIconUrl;
 import iconRetinaUrl from 'leaflet/dist/images/marker-icon-2x.png';
 import iconUrl from 'leaflet/dist/images/marker-icon.png';
 import shadowUrl from 'leaflet/dist/images/marker-shadow.png';
-L.Icon.Default.mergeOptions({
+Icon.Default.mergeOptions({
   iconRetinaUrl,
   iconUrl,
   shadowUrl,
@@ -50,15 +50,15 @@ const attributionST_CC0 = [
 ];
 const attributionOsm = '<a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> (ODbL)';
 
-const allMapLayers: Record<string, L.Layer> = {};
+const allMapLayers: Record<string, Layer> = {};
 
 [
   {id: 'gdi_base_summer', title: 'Elektronische Karte Tirol: Sommer'},
   {id: 'gdi_base_winter', title: 'Elektronische Karte Tirol: Winter'},
 ].forEach(({id, title}, idx) => {
   const imprint =
     '<a href="https://www.tirol.gv.at/statistik-budget/tiris/tiris-geodatendienste/impressum-elektronische-karte-tirol/">Elektronische Karte Tirol</a>';
-  const layer = L.tileLayer(`https://wmts.kartetirol.at/wmts/${id}/${id}/{z}/{x}/{y}.jpeg80`, {
+  const layer = new TileLayer(`https://wmts.kartetirol.at/wmts/${id}/${id}/{z}/{x}/{y}.jpeg80`, {
     maxZoom: 18,
     attribution: [...attribution, imprint, attributionOsm].join(', '),
   });
@@ -77,7 +77,7 @@ const allMapLayers: Record<string, L.Layer> = {};
     title: 'Gelände Tirol: Oberflächenmodell',
   },
 ].forEach(({id, title}) => {
-  const layer = L.tileLayer.wms(
+  const layer = new TileLayer.WMS(
     'https://gis.tirol.gv.at/arcgis/services/Service_Public/terrain/MapServer/WMSServer',
     {
       layers: id,
@@ -107,7 +107,7 @@ const allMapLayers: Record<string, L.Layer> = {};
     title: 'Orthofoto Tirol: <abbr title="photographisches Infrarot">CIR</abbr> aktuell',
   },
 ].forEach(({id, title}) => {
-  const layer = L.tileLayer.wms(
+  const layer = new TileLayer.WMS(
     'https://gis.tirol.gv.at/arcgis/services/Service_Public/orthofoto/MapServer/WMSServer',
     {
       layers: id,
@@ -127,7 +127,7 @@ const allMapLayers: Record<string, L.Layer> = {};
   {id: 'bmaporthofoto30cm/normal', title: 'basemap.at Orthofoto', format: 'jpg'},
   {id: 'bmapgelaende/grau', title: 'basemap.at Gelände', format: 'jpg'},
 ].forEach(({id, title, format}) => {
-  const layer = L.tileLayer(
+  const layer = new TileLayer(
     `https://mapsneu.wien.gv.at/basemap/${id}/google3857/{z}/{y}/{x}.${format}`,
     {
       subdomains: '1234',
@@ -143,7 +143,7 @@ const allMapLayers: Record<string, L.Layer> = {};
 });
 
 [{id: 'p_bz-BaseMap%3ABasemap-Standard', title: 'South Tyrol Base Map'}].forEach(({id, title}) => {
-  const layer = L.tileLayer(
+  const layer = new TileLayer(
     `https://geoservices.buergernetz.bz.it/geoserver/gwc/service/wmts/?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=${id}&STYLE=default&TILEMATRIXSET=GoogleMapsCompatible&TILEMATRIX=GoogleMapsCompatible%3A{z}&TILEROW={y}&TILECOL={x}&FORMAT=image%2Fjpeg`,
     {
       maxZoom: 20,
@@ -175,7 +175,7 @@ const allMapLayers: Record<string, L.Layer> = {};
     // Slope/Hangneigung/Clivometria
   },
 ].forEach(({id, title}) => {
-  const layer = L.tileLayer.wms('https://geoservices1.civis.bz.it/geoserver/p_bz-Elevation/wms', {
+  const layer = new TileLayer.WMS('https://geoservices1.civis.bz.it/geoserver/p_bz-Elevation/wms', {
     layers: id,
     format: 'image/jpeg',
     attribution: attributionST_CC0.join(', '),
@@ -204,7 +204,7 @@ const allMapLayers: Record<string, L.Layer> = {};
     title: 'Orthofoto South Tyrol: 2023 <abbr title="photographisches Infrarot">CIR</abbr>',
   },
 ].forEach(({id, title}) => {
-  const layer = L.tileLayer.wms(
+  const layer = new TileLayer.WMS(
     'https://geoservices.buergernetz.bz.it/mapproxy/p_bz-Orthoimagery/wms',
     {
       layers: id,
@@ -217,13 +217,13 @@ const allMapLayers: Record<string, L.Layer> = {};
   allMapLayers[id] = layer;
 });
 
-allMapLayers['OSM'] = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+allMapLayers['OSM'] = new TileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
   maxZoom: 19,
   attribution: attributionOsm,
 });
 layers.addBaseLayer(allMapLayers['OSM'], 'OpenStreetMap');
 
-allMapLayers['OpenTopoMap'] = L.tileLayer('https://tile.opentopomap.org/{z}/{x}/{y}.png', {
+allMapLayers['OpenTopoMap'] = new TileLayer('https://tile.opentopomap.org/{z}/{x}/{y}.png', {
   maxZoom: 19,
   attribution: [
     attributionOsm,
@@ -243,7 +243,7 @@ layers.addBaseLayer(allMapLayers['OpenTopoMap'], 'OpenTopoMap');
     title: 'Gelände Tirol: Geländeneigung',
   },
 ].forEach(({id, title}) => {
-  const layer = L.tileLayer.wms(
+  const layer = new TileLayer.WMS(
     'https://gis.tirol.gv.at/arcgis/services/Service_Public/terrain/MapServer/WMSServer',
     {
       layers: id,
@@ -259,7 +259,7 @@ layers.addBaseLayer(allMapLayers['OpenTopoMap'], 'OpenTopoMap');
   allMapLayers[id] = layer;
 });
 
-allMapLayers['OpenSlopeMap'] = L.tileLayer(
+allMapLayers['OpenSlopeMap'] = new TileLayer(
   'https://tileserver{s}.openslopemap.org/OSloOVERLAY_LR_All_16/{z}/{x}/{y}.png',
   {
     opacity: 0.7,

src/leaflet-fullHash.ts

@@ -1,5 +1,5 @@
 // slightly modified version of https://github.com/KoGor/leaflet-fullHash by "KoGor"
-import * as L from 'leaflet';
+import {LatLng, Util} from 'leaflet';
 
 export default class LeafletHash {
   map: L.Map = null;
@@ -10,7 +10,7 @@ export default class LeafletHash {
   changeTimeout = null;
   isListening = false;
   constructor(map: L.Map, options: Record<string, L.Layer>) {
-    this.onHashChange = L.Util.bind(this.onHashChange, this);
+    this.onHashChange = this.onHashChange.bind(this);
     if (map) {
       this.init(map, options);
     }
@@ -30,7 +30,7 @@ export default class LeafletHash {
         return false;
       } else {
         return {
-          center: new L.LatLng(lat, lon),
+          center: new LatLng(lat, lon),
           zoom: zoom,
           layers: layers,
         };
@@ -64,7 +64,7 @@ export default class LeafletHash {
 
   init(map: L.Map, options: Record<string, L.Layer>) {
     this.map = map;
-    L.Util.setOptions(this, options);
+    Util.setOptions(this, options);
 
     // reset the hash
     this.lastHash = null;
@@ -114,8 +114,7 @@ export default class LeafletHash {
       this.map.setView(parsed.center, parsed.zoom);
       const layers = parsed.layers;
       const options = this.options;
-      console.log(layers);
-      //Add/remove layers
+
       if (Array.isArray(layers) && layers.every((l) => options[l])) {
         this.map.eachLayer((layer) => this.map.removeLayer(layer));
         layers.forEach((l) => this.map.addLayer(options[l]));

yarn.lock

@@ -377,16 +377,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/leaflet.locatecontrol@npm:^0.74.6":
-  version: 0.74.6
-  resolution: "@types/leaflet.locatecontrol@npm:0.74.6"
+"@types/leaflet.locatecontrol@npm:^0.82.0":
+  version: 0.82.0
+  resolution: "@types/leaflet.locatecontrol@npm:0.82.0"
   dependencies:
     "@types/leaflet": "npm:*"
-  checksum: 10c0/4969ee6238ed797f4a269d9b603af9fc78d49ecd1ce8f074b996010ae3658030569aeca028d9c210b97095f97bd2acf7b6bc39bdbb507b6b186eb46fc8c7c5b7
+  checksum: 10c0/4bd0337016998d4753397ca0db04b1f9207d5d8caa1092169c80af5389e7ea58b1054a0de5d9d794e6a11e681379d8d9ec9b547625d4cc9239c0fd1a837c7ea3
   languageName: node
   linkType: hard
 
-"@types/leaflet@npm:*, @types/leaflet@npm:^1.9.15":
+"@types/leaflet@npm:*":
   version: 1.9.15
   resolution: "@types/leaflet@npm:1.9.15"
   dependencies:
@@ -395,6 +395,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/leaflet@npm:^1.9.18":
+  version: 1.9.18
+  resolution: "@types/leaflet@npm:1.9.18"
+  dependencies:
+    "@types/geojson": "npm:*"
+  checksum: 10c0/376ef5b5d60664e8cc22908a75149c020ad668330ef61f0e7486a61e85285b3f1b9dafcce9462bd3375be537e4d1227fc0c0524e5c071a4a45ed16bf3fc71608
+  languageName: node
+  linkType: hard
+
 "abbrev@npm:^2.0.0":
   version: 2.0.0
   resolution: "abbrev@npm:2.0.0"
@@ -884,31 +893,33 @@ __metadata:
   languageName: node
   linkType: hard
 
-"leaflet-control-geocoder@npm:^3.1.0":
-  version: 3.1.0
-  resolution: "leaflet-control-geocoder@npm:3.1.0"
+"leaflet-control-geocoder@npm:^3.2.0":
+  version: 3.2.0
+  resolution: "leaflet-control-geocoder@npm:3.2.0"
   dependencies:
     open-location-code: "npm:^1.0.3"
   peerDependencies:
-    leaflet: ^1.6.0
+    leaflet: ^1.6.0 || ^2.0.0
   dependenciesMeta:
     open-location-code:
       optional: true
-  checksum: 10c0/fd9c92daca8695b113f80e56540d753196baa74a952f1c99863ba10eab9899813bf63dec935889a49d11a93ace2dcc78170e351510e742f72bf8277a79ba9103
+  checksum: 10c0/da85af31f8e5bb2760739b1830c847d50cd5c1833b461f0fabe6e39be8a07d351ccdd7b1fb4da1c6550b3f86eabeb5a411f445659cd9260bd1060c8d536f747e
   languageName: node
   linkType: hard
 
-"leaflet.locatecontrol@npm:^0.83.0":
-  version: 0.83.0
-  resolution: "leaflet.locatecontrol@npm:0.83.0"
-  checksum: 10c0/b03aa0a74bc4af25c54f0167501a18f24e6d91abbca2cb60ca240ca5c5b938d88d84e1866ce91e2b563dc7cad5a8382c86fad2609759a5ecd3f5dd71bd9c8035
+"leaflet.locatecontrol@jeffreykog/leaflet-locatecontrol#leaflet-v2":
+  version: 0.84.2
+  resolution: "leaflet.locatecontrol@https://github.com/jeffreykog/leaflet-locatecontrol.git#commit=65a477953a6292bc00b55cc86866abbc49e6dcec"
+  peerDependencies:
+    leaflet: ^1.9.0 || ^2.0.0
+  checksum: 10c0/7722dc720015a2efd6963c041ca1717881ded6d926185cb21d5e91a678643d69a1f790c12913b50e3e883a90453bfba952be64b5089c94e05583930a4cb94efb
   languageName: node
   linkType: hard
 
-"leaflet@npm:^1.9.4":
-  version: 1.9.4
-  resolution: "leaflet@npm:1.9.4"
-  checksum: 10c0/f639441dbb7eb9ae3fcd29ffd7d3508f6c6106892441634b0232fafb9ffb1588b05a8244ec7085de2c98b5ed703894df246898477836cfd0ce5b96d4717b5ca1
+"leaflet@npm:2.0.0-alpha":
+  version: 2.0.0-alpha
+  resolution: "leaflet@npm:2.0.0-alpha"
+  checksum: 10c0/38c1c39a3ee919a3392df067b55bab45b5e66cdac6d49d142ac4c04f8fbc8730228fa0408cc4ffe48128f5a2366c4a69d9713d2b5cfcbcc9ea4d2ac5593fb36c
   languageName: node
   linkType: hard
 
@@ -1507,11 +1518,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "tyrolean-map@workspace:."
   dependencies:
-    "@types/leaflet": "npm:^1.9.15"
-    "@types/leaflet.locatecontrol": "npm:^0.74.6"
-    leaflet: "npm:^1.9.4"
-    leaflet-control-geocoder: "npm:^3.1.0"
-    leaflet.locatecontrol: "npm:^0.83.0"
+    "@types/leaflet": "npm:^1.9.18"
+    "@types/leaflet.locatecontrol": "npm:^0.82.0"
+    leaflet: "npm:2.0.0-alpha"
+    leaflet-control-geocoder: "npm:^3.2.0"
+    leaflet.locatecontrol: "jeffreykog/leaflet-locatecontrol#leaflet-v2"
     prettier: "npm:^3.5.3"
     pretty-quick: "npm:^4.1.1"
     vite: "npm:^6.3.2"