Display legends on active layer.

Author: ciatph

src/components/widgets/LivelihoodZonesMap.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
   // Mapbox GUI
   div(id="map" ref="map")
-    div(class="map-overlay" style="margin-top: 60px; margin-left: 2%;")
+    div(class="map-overlay" style="margin-top: 60px; margin-left: 2%; width: 30%;")
       div(class="map-overlay-inner")
         h4 Region/Province selection
 
@@ -16,6 +16,16 @@
           :disabled="disabled"
           :options="optionsProvince"
         )
+
+        small(v-if="disabled") Please wait while loading...
+        br
+        br
+
+        div(v-if="legends.length > 0")
+          h5 Legend
+          div(class="legend-livelihood")
+            div(v-for="item in legends")
+              <div><span v-bind:style="{ backgroundColor: item.color }"></span>{{ item.text }}</div>
 </template>
 
 <script>
@@ -40,6 +50,8 @@ export default {
         { value: null, text: 'Please select a province' }
       ],
 
+      legends: [],
+
       islands: {
         luzon: {
           'national capital region': ['NCR, city of manila, first district', 'NCR, second district', 'NCR, third district', 'NCR, fourth district'],
@@ -104,12 +116,17 @@ export default {
 
   watch: {
     selectedRegion () {
+      if (!this.selectedRegion) {
+        this.selectedRegion = this.previousRegion
+        return
+      }
+
       this.selectedIsland = this.getIslandFromRegion(this.selectedRegion)
       this.getProvinceOptions()
 
       // Hide the previous selected region
-      if (this.previousRegion) {
-        window.MBL.toggleLayer(`${this.previousRegion}-layer`)
+      if (this.previousIsland) {
+        window.MBL.toggleLayer(`${this.previousIsland}-layer`)
       }
 
       // Build the province list filter. Format the hard-coded values
@@ -135,19 +152,23 @@ export default {
         }
       )
 
-      // this.previousIsland = this.selectedIsland
-      this.previousRegion = this.selectedIsland
+      this.previousRegion = this.selectedRegion
+      this.previousIsland = this.selectedIsland
 
-      // Disable the UI
+      // Disable the UI on page load
       this.disabled = true
       const that = this
+
       const time = setInterval(() => {
         if (!window.MBL.isLoading) {
           console.log('map loaded!')
           that.disabled = false
+          that.disabled = false
           clearInterval(time)
         }
       }, 200)
+
+      this.updateLegend()
     },
 
     selectedProvince () {
@@ -163,6 +184,8 @@ export default {
         key: 'ADM2_EN',
         value: provinceValue
       })
+
+      this.updateLegend(provinceValue)
     }
   },
 
@@ -240,6 +263,48 @@ export default {
           this.optionsProvince.push({ value: item, text: provinceValue })
         })
       }
+    },
+
+    updateLegend (provinceName) {
+      const that = this
+      let loadedOnce = false
+      let colorCodes = []
+
+      const unique = (value, index, self) => {
+        return self.indexOf(value) === index
+      }
+
+      // Reset the legends
+      this.legends = []
+
+      window.MBL.map.on('sourcedata', function(e) {
+        if (e.isSourceLoaded) {
+          if (e.sourceId !== 'composite' && !loadedOnce) {
+            const features = window.MBL.map.queryRenderedFeatures({layers: [`${e.sourceId}-layer`] })
+
+            if (features.length > 0) {
+              window.MBL.isLoading = false
+              loadedOnce = true
+              console.log(`--loaded vector length: ${features.length}`)
+
+              if (provinceName) {
+                colorCodes = Array.from(features.filter(x => x.properties['ADM2_EN'] === provinceName),
+                (x) => x.properties['Legend_v2']).filter(unique)
+              } else {
+                colorCodes = Array.from(features, (x) => x.properties['Legend_v2']).filter(unique)
+              }
+
+              for (let i = 0; i < colorCodes.length; i += 1) {
+                that.legends.push({
+                  text: colorCodes[i],
+                  color: window.MBL.colorCodes[colorCodes[i]]
+                })
+              }
+            }
+          }
+          // window.MBL.isLoading = false
+        }
+      })
     }
   }
 }

src/styles/main.css

@@ -550,6 +550,29 @@ footer .glyphicon{
     text-align: left;
 }
 
+.legend-livelihood {
+    background-color: #fff;
+    border-radius: 3px;
+    bottom: 30px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    padding: 10px;
+    right: 10px;
+    z-index: 1;
+}
+
+.legend-livelihood h4 {
+    margin: 0 0 10px;
+}
+
+.legend-livelihood div span {
+    border-radius: 50%;
+    display: inline-block;
+    height: 10px;
+    margin-right: 5px;
+    width: 10px;
+}
+
 .footer-style h4{
     font-family: 'Lucida Sans Regular', 'Lucida Sans',   sans-serif;
     color: #fff;

static/map.js

@@ -16,6 +16,9 @@ function MapboxMap (publicAccessToken) {
   // Set the mapbox public access token
   this.accessToken = mapboxgl.accessToken = publicAccessToken
 
+  // HTML hex codes mapped to feature attribute values
+  this.colorCodes = null
+
   // Flag if a vector data source is loading
   // TO-DO: Listen for mapbox events
   this.isLoading = true
@@ -61,6 +64,7 @@ MapboxMap.prototype.initMap = function ({ mapContainer = 'map', style, zoom = 5.
   this.mapContainer.style.height = (window.outerHeight + 70) + 'px'
   this.mapCanvas.style.width = '100%'
   this.map.resize()
+  this.colorCodes = this.getLegendColorCodes()
 
   // Listen for basemap loading events
   const that = this
@@ -70,12 +74,18 @@ MapboxMap.prototype.initMap = function ({ mapContainer = 'map', style, zoom = 5.
     that.isLoading = false
   })
 
+  /* Detects if a source data has loaded. Override this method on vue component
   this.map.on('sourcedata', function(e) {
     if (e.isSourceLoaded) {
       console.log('---vector loaded')
+      if (e.sourceId !== 'composite') {
+        that.features = that.map.queryRenderedFeatures({layers: [`${e.sourceId}-layer`] })
+        console.log(`--loaded vector length: ${that.features.length}`)
+      }
       that.isLoading = false
     }
   })
+  */
 } 
 
 /**
@@ -170,14 +180,15 @@ MapboxMap.prototype.getLegendColorCodes = function () {
 MapboxMap.prototype.addLayerSource = function (layerName, tilesetName, tilesetUrl, filter) {
   const that = this
   const layerID = `${layerName}-layer`
+  this.isLoading = true
 
   // Remove popups
   this.removePopups()
 
   // Set the color expression to use on the layer
   const colorExpression = ['match', ['get', 'Legend_v2']]
 
-  const styles = this.getLegendColorCodes()
+  const styles = this.colorCodes
   Object.keys(styles).forEach((item, index) => {
     colorExpression.push(item, styles[item])
   })
@@ -225,6 +236,9 @@ MapboxMap.prototype.addLayerSource = function (layerName, tilesetName, tilesetUr
     const time = setInterval(function() {
       const features = that.map.queryRenderedFeatures({layers: [layerID] })
       if (features) {
+        that.features = features
+
+        // NOTE: this is set to false by the global 'sourcedata' event
         // that.isLoading = false
 
         window.MBL.map.on('click', layerID, function(e) {
@@ -283,4 +297,4 @@ MapboxMap.prototype.removePopups = function () {
   for (let i = 0; i < popups.length; i += 1) {
     popups[i].remove()
   }
-}
+}