refactor(map): switch back to Mapbox

Switch back to Mapbox and use mapbox-gl-js

Author: mpfeil

app/components/leaflet.directive.html

@@ -1,4 +1,3 @@
 <div class="leaflet-map">
-    <a href="https://www.maptiler.com" style="position:absolute;right:10px;bottom:20px;z-index:999;"><img src="https://api.maptiler.com/resources/logo.svg" alt="MapTiler logo"></a>
     <div ng-transclude></div>
 </div>

app/components/leaflet.directive.js

@@ -96,14 +96,16 @@
       });
 
       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
+      const styleUrl = '@@OPENSENSEMAP_STYLE_URL';
+
+      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'
       }).addTo(map);
-      var maplibreMap = gl.getMaplibreMap();
+      var mapboxMap = gl.getMapboxMap();
 
-      maplibreMap.on('load', layerLoaded);
+      mapboxMap.on('load', layerLoaded);
 
       L.control.scale().addTo(map);
 
@@ -153,7 +155,7 @@
       function layerLoaded () {
         $rootScope.$broadcast('layerloaded', {});
         $rootScope.$apply();
-        maplibreMap.off('load', layerLoaded);
+        mapboxMap.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/maplibre-gl-css/index.css" />
+  <link rel="stylesheet" href="bower_components/mapbox-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/maplibre-gl-js/index.js"></script>
-  <script src="bower_components/maplibre-gl-leaflet/index.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/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",
-    "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",
+    "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",
     "d3": "^4.10.0",
     "Leaflet.FeatureGroup.SubGroup": "^1.0.3",
     "angular-ismobile": "^1.1.0",