Replace Mapbox with Maplibre (#469)

Author: mpfeil

app/components/leaflet.directive.js

@@ -95,14 +95,15 @@
         map.removeLayer(mapLayers['mouseOver']);
       });
 
-      var gl = L.mapboxGL({
-        attribution: '© <a href="https://www.mapbox.com/about/maps/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> <strong><a href="https://www.mapbox.com/map-feedback/" target="_blank">Improve this map</a></strong>',
-        accessToken: '@@OPENSENSEMAP_ACCESS_TOKEN',
-        style: '@@OPENSENSEMAP_STYLE_URL'
+      const key = '@@OPENSENSEMAP_ACCESS_TOKEN';
+      const styleUrl = '@@OPENSENSEMAP_STYLE_URL'
+      const gl = L.maplibreGL({
+        attribution: "\u003ca href=\"https://www.maptiler.com/copyright/\" target=\"_blank\"\u003e\u0026copy; MapTiler\u003c/a\u003e \u003ca href=\"https://www.openstreetmap.org/copyright\" target=\"_blank\"\u003e\u0026copy; OpenStreetMap contributors\u003c/a\u003e",
+        style: styleUrl + "?key=" + key
       }).addTo(map);
-      var mapboxMap = gl.getMapboxMap();
+      var maplibreMap = gl.getMaplibreMap();
 
-      mapboxMap.on('load', layerLoaded);
+      maplibreMap.on('load', layerLoaded);
 
       L.control.scale().addTo(map);
 
@@ -152,7 +153,7 @@
       function layerLoaded () {
         $rootScope.$broadcast('layerloaded', {});
         $rootScope.$apply();
-        mapboxMap.off('load', layerLoaded);
+        maplibreMap.off('load', layerLoaded);
         for (var layerName in mapLayers) {
           mapLayers[layerName].on('add', function () {
             osemMapData.setLayer(layerName, mapLayers[layerName]);

app/index.html

@@ -37,7 +37,7 @@
   <link rel="stylesheet" href="bower_components/bootstrap-css-only/css/bootstrap.css" />
   <link rel="stylesheet" href="bower_components/Leaflet.awesome-markers/dist/leaflet.awesome-markers.css" />
   <link rel="stylesheet" href="bower_components/leaflet.markercluster/dist/MarkerCluster.css" />
-  <link rel="stylesheet" href="bower_components/mapbox-gl-css/index.css" />
+  <link rel="stylesheet" href="bower_components/maplibre-gl-css/index.css" />
   <link rel="stylesheet" href="bower_components/ngprogress/ngProgress.css" />
   <!-- endbower -->
   <!-- endbuild -->
@@ -368,8 +368,8 @@
   <script src="bower_components/angular-wizard/dist/angular-wizard.min.js"></script>
   <script src="bower_components/Leaflet.awesome-markers/dist/leaflet.awesome-markers.js"></script>
   <script src="bower_components/leaflet.markercluster/dist/leaflet.markercluster-src.js"></script>
-  <script src="bower_components/mapbox-gl-js/index.js"></script>
-  <script src="bower_components/mapbox-gl-leaflet/leaflet-mapbox-gl.js"></script>
+  <script src="bower_components/maplibre-gl-js/index.js"></script>
+  <script src="bower_components/maplibre-gl-leaflet/index.js"></script>
   <script src="bower_components/d3/d3.js"></script>
   <script src="bower_components/Leaflet.FeatureGroup.SubGroup/src/subgroup.js"></script>
   <script src="bower_components/angular-ismobile/dist/angular-ismobile.js"></script>

bower.json

@@ -22,9 +22,9 @@
     "leaflet": "1.7.1",
     "Leaflet.awesome-markers": "leaflet-awesome-markers#^2.0.2",
     "leaflet.markercluster": "1.4.1",
-    "mapbox-gl-js": "https://api.mapbox.com/mapbox-gl-js/v1.13.1/mapbox-gl.js",
-    "mapbox-gl-css": "https://api.mapbox.com/mapbox-gl-js/v1.13.1/mapbox-gl.css",
-    "mapbox-gl-leaflet": "https://github.com/mapbox/mapbox-gl-leaflet.git#f3901fc",
+    "maplibre-gl-js": "https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js",
+    "maplibre-gl-css": "https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css",
+    "maplibre-gl-leaflet": "https://unpkg.com/@maplibre/maplibre-gl-leaflet@0.0.17/leaflet-maplibre-gl.js",
     "d3": "^4.10.0",
     "Leaflet.FeatureGroup.SubGroup": "^1.0.3",
     "angular-ismobile": "^1.1.0",