move VUE_APP_MAPBOX_ACCESSTOKEN to docker-compose env var, move hardcoded styleLayer to VUE_APP_MAPBOX_DEFAULT_STYLES

Author: yvess

docker-compose.yml

@@ -28,6 +28,8 @@ services:
       - TERM=xterm-256color
       - START_SCREENSHOTSERVICE=NO
       - PUBLIC_URL=http://localhost:8080
+      - VUE_APP_MAPBOX_ACCESSTOKEN=pk.eyJ1IjoiZ2VtZWluZGVzY2FuIiwiYSI6ImNrNXdrOXV2ZjEwdXcza28wcXNoYXE1ZGMifQ.P-nCvxNRK4AOs7YdRbHCLg
+      - VUE_APP_MAPBOX_DEFAULT_STYLES=mapbox://styles/gemeindescan/ck6rp249516tg1iqkmt48o4pz
     working_dir: /opt/vue
     volumes:
       - ./vue:/opt/vue

vue/.env

@@ -1,3 +1,2 @@
-VUE_APP_GRAPHQL_URI=http://localhost:8080/graphql/
-VUE_APP_MAPBOX_ACCESSTOKEN=pk.eyJ1IjoiZ2VtZWluZGVzY2FuIiwiYSI6ImNrNXdrOXV2ZjEwdXcza28wcXNoYXE1ZGMifQ.P-nCvxNRK4AOs7YdRbHCLg
-VUE_APP_DJANGOBASEURL=http://localhost:8080
+VUE_APP_GRAPHQL_URI=http://www:8000/graphql/
+VUE_APP_DJANGOBASEURL=http://www:8000

vue/.env.production

@@ -1,3 +1,2 @@
 VUE_APP_GRAPHQL_URI=/graphql/
-VUE_APP_MAPBOX_ACCESSTOKEN=pk.eyJ1IjoiZ2VtZWluZGVzY2FuIiwiYSI6ImNrNXdrOXV2ZjEwdXcza28wcXNoYXE1ZGMifQ.P-nCvxNRK4AOs7YdRbHCLg
 VUE_APP_DJANGOBASEURL=

vue/src/components/SnapshotMap.vue

@@ -201,6 +201,7 @@ export default {
       const bounds = geoViewport.viewport(this.geobounds.flat(), [boxSize, boxSize]);
       this.map = L.mapbox.map('map').setView(bounds.center, bounds.zoom);
       this.layerContainer = new L.LayerGroup();
+      // default test layer // this.layerContainer.addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/light-v10'));
       if (this.hash) { // full snapshot with hash
         this.layers.forEach((layer) => {
           if (layer.mediatype === 'application/vnd.mapbox-vector-tile') {
@@ -219,7 +220,11 @@ export default {
         this.geojson.coordinates.forEach((polygon) => {
           this.layerContainer.addLayer(L.polygon(polygon, { color: '#543076' }));
         });
-        this.layerContainer.addLayer(L.mapbox.styleLayer('mapbox://styles/gemeindescan/ck6rp249516tg1iqkmt48o4pz'));
+        if (process.env.VUE_APP_MAPBOX_DEFAULT_STYLES) {
+          this.layerContainer.addLayer(L.mapbox.styleLayer(
+            process.env.VUE_APP_MAPBOX_DEFAULT_STYLES
+          ));
+        }
       }
       this.layerContainer.addTo(this.map);
       L.control.scale({