Basemap improvements

using a custom mapbox style that highlights parks and natural features and downplays built features also deactivated street layer See Issue #138 Fixes #124
OutdoorRD · May 5, 2021 · 5337896 · 5337896
1 parent 479a0b1
commit 5337896
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 14 deletions.
diff --git a/trails-viz-app/src/components/HomeLocationsMap.vue b/trails-viz-app/src/components/HomeLocationsMap.vue
@@ -33,7 +33,7 @@
         L.tileLayer(MAPBOX_CONSTS.TILES_API, {
           attribution: MAPBOX_CONSTS.ATTRIBUTION,
           maxZoom: 18,
-          id: 'mapbox.light',
+          id: 'mapbox/light-v10',
           accessToken: MAPBOX_CONSTS.TOKEN
         }).addTo(mapDiv);
 

diff --git a/trails-viz-app/src/components/MapDiv.vue b/trails-viz-app/src/components/MapDiv.vue
@@ -77,18 +77,18 @@
         tileSize:512,
         maxZoom: 18,
         zoomOffset: -1,
-        id: "mapbox/outdoors-v11",
-        accessToken: MAPBOX_CONSTS.TOKEN
+        id: "woodsp/ckoayirck08k618p28tlyok8j",
+        accessToken: MAPBOX_CONSTS.OUTDOOR_STYLE_TOKEN
       });
 
-      const streetsLayer = L.tileLayer(MAPBOX_CONSTS.TILES_API, {
-        attribution: MAPBOX_CONSTS.ATTRIBUTION,
-        tileSize:512,
-        maxZoom: 18,
-        zoomOffset: -1,
-        id: "mapbox/streets-v11",
-        accessToken: MAPBOX_CONSTS.TOKEN
-      });
+      // const streetsLayer = L.tileLayer(MAPBOX_CONSTS.TILES_API, {
+      //   attribution: MAPBOX_CONSTS.ATTRIBUTION,
+      //   tileSize:512,
+      //   maxZoom: 18,
+      //   zoomOffset: -1,
+      //   id: "mapbox/streets-v11",
+      //   accessToken: MAPBOX_CONSTS.TOKEN
+      // });
 
       const satelliteLayer = L.tileLayer(MAPBOX_CONSTS.TILES_API, {
         attribution: MAPBOX_CONSTS.ATTRIBUTION,
@@ -99,7 +99,7 @@
         accessToken: MAPBOX_CONSTS.TOKEN
       });
 
-      L.control.layers({"outdoor": outdoorLayer, "streets": streetsLayer, "satellite": satelliteLayer}).addTo(mapDiv);
+      L.control.layers({"outdoor": outdoorLayer, "satellite": satelliteLayer}).addTo(mapDiv);
       outdoorLayer.addTo(mapDiv);
 
       self.mapDiv = mapDiv;

diff --git a/trails-viz-app/src/store/constants.js b/trails-viz-app/src/store/constants.js
@@ -17,10 +17,10 @@ export const COLORS = {
 
 export const MAPBOX_CONSTS = {
   TOKEN: 'pk.eyJ1Ijoid29vZHNwIiwiYSI6ImNrMjEwY3oycTFlcnEzbXFvbzR4bmNqNjgifQ.pM7-As9W2Ce9xXMv3W-NNg',
+  OUTDOOR_STYLE_TOKEN: 'pk.eyJ1Ijoid29vZHNwIiwiYSI6ImNrMjEwYjFyaDB2MHMzaW1mbWM0azVnbTMifQ.LE_loUCO3HjjZfyEayX5Sg',
   TILES_API: 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}',
   ATTRIBUTION: '© <a href="https://www.mapbox.com/about/maps/">Mapbox</a> © ' +
-    '<a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> ' +
-    '<a href="https://www.mapbox.com/map-feedback/" target="_blank">Improve this map</a>'
+    '<a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
 };
 
 export const VIZ_MODES = {