Feat vectortiles (#415)

* Update env variables and use .env file * feat(LeafletMap): Use MapboxGL vector tiles Switching to mapbox gl using leaflet mapbox gl bindings BREAKING CHANGE: Environmental variables changed for frontend * chore(env): Add sample env file * ci(Actions): Use new environemnt variables Introducing new env variables for map style and token * ci(Actions): Try fixing YAML error Expression is not evaluated correctly
sensebox · Jul 12, 2021 · 3c889b4 · 3c889b4
1 parent 1c1db3f
commit 3c889b4
Show file tree

Hide file tree

Showing 8 changed files with 529 additions and 488 deletions.
diff --git a/.env.sample b/.env.sample
@@ -0,0 +1,3 @@
+OPENSENSEMAP_API_URL=https://localhost:80000
+OPENSENSEMAP_STYLE_URL=<YOUR_MAPBOX_STYLE_URL>
+OPENSENSEMAP_ACCESS_TOKEN=<YOUR_MAPBOX_ACCESS_TOKEN>
diff --git a/.github/workflows/build.yaml b/.github/workflows/build.yaml
@@ -90,10 +90,12 @@ jobs:
 
           if [ "$branch_name" = "master" || ${{ github.event_name == 'release' }} ]; then
             echo "OPENSENSEMAP_API_URL=https://api.opensensemap.org" >> $GITHUB_ENV
-            echo "OPENSENSEMAP_MAPTILES_URL=${{ secrets.OPENSENSEMAP_MAPTILES_URL_PROD }}" >> $GITHUB_ENV
+            echo "OPENSENSEMAP_STYLE_URL=${{ secrets.OPENSENSEMAP_STYLE_URL }}" >> $GITHUB_ENV
+            echo "OPENSENSEMAP_ACCESS_TOKEN=${{ secrets.OPENSENSEMAP_ACCESS_TOKEN }}" >> $GITHUB_ENV
           else
             echo "OPENSENSEMAP_API_URL=https://api.testing.opensensemap.org" >> $GITHUB_ENV
-            echo "OPENSENSEMAP_MAPTILES_URL=https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" >> $GITHUB_ENV
+            echo "OPENSENSEMAP_STYLE_URL=mapbox://styles/mapbox/streets-v11" >> $GITHUB_ENV
+            echo "OPENSENSEMAP_ACCESS_TOKEN=${{ secrets.OPENSENSEMAP_ACCESS_TOKEN_TESTING }}" >> $GITHUB_ENV
           fi
 
       - name: Build
@@ -112,7 +114,7 @@ jobs:
       - name: Build container image and push to Docker Hub (not for PRs)
         uses: docker/build-push-action@v2
         with:
-          push: ${{ github.event_name == 'push' }} || ${{ github.event_name == 'release' && github.event.action == 'published' }}
+          push: ${{ github.event_name == 'push' || ( github.event_name == 'release' && github.event.action == 'published' ) }}
           tags: ${{ secrets.IMAGE_NAME }}:${{ steps.branch_info.outputs.branch_name }},${{ secrets.IMAGE_NAME }}:${{ steps.branch_info.outputs.branch_name }}-${{ steps.branch_info.outputs.short_sha }}
           context: ./
           cache-to: type=local,dest=/tmp/.buildx-cache,mode=max
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -24,8 +24,7 @@ module.exports = function (grunt) {
 
     env: {
       dev: {
-        OPENSENSEMAP_API_URL: 'https://api.testing.opensensemap.org',
-        OPENSENSEMAP_MAPTILES_URL: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+        src: ".env"
       }
     },
 
@@ -52,8 +51,12 @@ module.exports = function (grunt) {
               replacement: '<%= OPENSENSEMAP_API_URL %>'
             },
             {
-              match: 'OPENSENSEMAP_MAPTILES_URL',
-              replacement: '<%= OPENSENSEMAP_MAPTILES_URL %>'
+              match: 'OPENSENSEMAP_STYLE_URL',
+              replacement: '<%= OPENSENSEMAP_STYLE_URL %>'
+            },
+            {
+              match: 'OPENSENSEMAP_ACCESS_TOKEN',
+              replacement: '<%= OPENSENSEMAP_ACCESS_TOKEN %>'
             },
             {
               match: 'VERSION',
@@ -87,8 +90,12 @@ module.exports = function (grunt) {
         options: {
           patterns: [
             {
-              match: 'OPENSENSEMAP_MAPTILES_URL',
-              replacement: '<%= OPENSENSEMAP_MAPTILES_URL %>'
+              match: 'OPENSENSEMAP_STYLE_URL',
+              replacement: '<%= OPENSENSEMAP_STYLE_URL %>'
+            },
+            {
+              match: 'OPENSENSEMAP_ACCESS_TOKEN',
+              replacement: '<%= OPENSENSEMAP_ACCESS_TOKEN %>'
             }
           ]
         },
@@ -667,9 +674,10 @@ module.exports = function (grunt) {
   });
 
   grunt.registerTask('loadconst', 'Load constants', function (target) {
-    console.log('Load constants: ', process.env.OPENSENSEMAP_API_URL, process.env.OPENSENSEMAP_MAPTILES_URL);
+    console.log('Load constants: ', process.env.OPENSENSEMAP_API_URL, process.env.OPENSENSEMAP_STYLE_URL, process.env.OPENSENSEMAP_ACCESS_TOKEN);
     grunt.config('OPENSENSEMAP_API_URL', process.env.OPENSENSEMAP_API_URL);
-    grunt.config('OPENSENSEMAP_MAPTILES_URL', process.env.OPENSENSEMAP_MAPTILES_URL);
+    grunt.config('OPENSENSEMAP_STYLE_URL', process.env.OPENSENSEMAP_STYLE_URL);
+    grunt.config('OPENSENSEMAP_ACCESS_TOKEN', process.env.OPENSENSEMAP_ACCESS_TOKEN);
   });
 
   grunt.registerTask('test', [

diff --git a/README.md b/README.md
@@ -16,9 +16,10 @@ You can configure the API endpoint and/or map tiles using the following environm
 | ENV | Default value |
 | --------- | ----------------- |
 | OPENSENSEMAP_API_URL     | https://api.testing.opensensemap.org |
-| OPENSENSEMAP_MAPTILES_URL | http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png |
+| OPENSENSEMAP_STYLE_URL |  <YOUR_MAPBOX_STYLE_URL> |
+| OPENSENSEMAP_ACCESS_TOKEN | <YOUR_MAPBOX_ACCESS_TOKEN> |
 
-You can set them in your `terminal` or change the default values in the [Gruntfile](https://github.com/sensebox/openSenseMap/blob/master/Gruntfile.js#L25).
+You can set them in your `terminal` or create a file called `.env` and set the values.
 
 
 ## Development
@@ -67,7 +68,8 @@ Following ```build-args``` are availble:
 | Build Arg | Default value |
 | --------- | ----------------- |
 | OPENSENSEMAP_API_URL     | https://api.opensensemap.org |
-| OPENSENSEMAP_MAPTILES_URL | http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png |
+| OPENSENSEMAP_STYLE_URL |  <YOUR_MAPBOX_STYLE_URL> |
+| OPENSENSEMAP_ACCESS_TOKE | <YOUR_MAPBOX_ACCESS_TOKEN> |
 
 
 ## License

diff --git a/app/components/leaflet.directive.js b/app/components/leaflet.directive.js
@@ -95,18 +95,14 @@
         map.removeLayer(mapLayers['mouseOver']);
       });
 
-      var baselayer = L.tileLayer('@@OPENSENSEMAP_MAPTILES_URL', {
-        subdomains: 'abc',
+      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>',
-        // detectRetina: true,
-        reuseTiles: true,
-        maxZoom: 18,
-        // https://docs.mapbox.com/help/troubleshooting/migrate-legacy-static-tiles-api/
-        tileSize: 512,
-        zoomOffset: -1,
+        accessToken: '@@OPENSENSEMAP_ACCESS_TOKEN',
+        style: '@@OPENSENSEMAP_STYLE_URL'
       }).addTo(map);
+      var mapboxMap = gl.getMapboxMap();
 
-      baselayer.on('load', layerLoaded);
+      mapboxMap.on('load', layerLoaded);
 
       L.control.scale().addTo(map);
 
@@ -156,7 +152,7 @@
       function layerLoaded () {
         $rootScope.$broadcast('layerloaded', {});
         $rootScope.$apply();
-        baselayer.off('load', layerLoaded);
+        mapboxMap.off('load', layerLoaded);
         for (var layerName in mapLayers) {
           mapLayers[layerName].on('add', function () {
             osemMapData.setLayer(layerName, mapLayers[layerName]);