Adds a Mapbox satellite map layer, closes openstreetmap-polska#31

daniel-j-h · Feb 27, 2022 · f8ae73c · f8ae73c
1 parent 0d6f981
commit f8ae73c
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 1 deletion.
diff --git a/strings.yaml b/strings.yaml
@@ -50,6 +50,10 @@ map:
   uk: карта
   pl: Mapa
   en: Map
+satellite:
+  uk: супутник
+  pl: Satelita
+  en: Satellite
 social_facilities:
   uk: Установи соціальної опіки
   pl: Placówki opieki społecznej

diff --git a/templates/map.js b/templates/map.js
@@ -17,6 +17,7 @@ const controlsLocation = 'bottom-right';
 
 const layersDict = {
     background: 'background',
+    satellite: 'satellite',
     helpPoints: 'helpPoints',
     informationPoints: 'informationPoints',
     bloodDonation: 'bloodDonation',
@@ -29,6 +30,7 @@ const layersDict = {
 
 const layersVisibilityOnInit = {
     [layersDict.background]: true,
+    [layersDict.satellite]: false,
     [layersDict.helpPoints]: true,
     [layersDict.informationPoints]: true,
     [layersDict.bloodDonation]: false,
@@ -47,6 +49,7 @@ const sidebarDivId = 'sidebar-div';
 
 const usedLayersIds = [
     layersDict.background,
+    layersDict.satellite,
     layersDict.helpPoints,
     layersDict.informationPoints,
     layersDict.bloodDonation,
@@ -58,6 +61,23 @@ const usedLayersIds = [
 ];
 
 const layersDefinitions = {
+        [layersDict.satellite]: {
+            layers: [
+                {
+                    id: layersDict.satellite,
+                    type: 'raster',
+                    source: 'mapboxSatellite',
+                    minZoom: 0,
+                    maxZoom: 19,
+                    layout: {
+                        visibility: getIsLayerVisibleOnInit(layersDict.satellite)
+                    }
+                },
+            ],
+            name: 'Mapbox {{ strings.satellite[lang] }}',
+            id: layersDict.satellite,
+            before: layersDict.satellite,
+        },
         [layersDict.background]: {
             layers: [
                 {
@@ -73,7 +93,7 @@ const layersDefinitions = {
             ],
             name: 'OSM Carto {{ strings.map[lang] }}',
             id: layersDict.background,
-            before: layersDict.helpPoints
+            before: layersDict.helpPoints,
         },
         [layersDict.helpPoints]: {
             layers: [
@@ -393,6 +413,18 @@ var map = new maplibregl.Map({
                 },
                 attribution: `data © <a target="_top" rel="noopener" href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors.`,
             },
+            mapboxSatellite: {
+                type: 'raster',
+                tiles: [
+                    'https://api.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}.png?access_token=TODO_ADD_TOKEN'
+                ],
+                tileSize: 256,
+                maxzoom: 19,
+                paint: {
+                    'raster-fade-duration': 100
+                },
+                attribution: `data © <a target="_top" rel="noopener" href="https://www.mapbox.com/about/maps/">© Mapbox</a> <a target="_top" rel="noopener" href="http://www.openstreetmap.org/copyright">© OpenStreetMap</a> <a target="_top" rel="noopener" href="https://www.mapbox.com/map-feedback/">Improve this map</a> <a target="_top" rel="noopener" href="https://www.maxar.com/">© Maxar</a>`,
+            },
             mediaWikiTiles: {
                 type: 'raster',
                 tiles: [