Add inspection map

src/libs/layerwatcher.js

@@ -6,7 +6,6 @@ export default class LayerWatcher {
   constructor() {
     this._sources = {}
     this._vectorLayers = {}
-    this._map= null
 
     // Since we scan over all features we want to avoid this as much as
     // possible and only do it after a batch of data has loaded because
@@ -14,27 +13,21 @@ export default class LayerWatcher {
     this.throttledAnalyzeVectorLayerFields = throttle(this.analyzeVectorLayerFields, 5000)
   }
 
-  /** Set the map as soon as the map is initialized */
-  set map(m) {
-
-    this._map = m
-    //TODO: At some point we need to unsubscribe when new map is set
-    this._map.on('data', (e) => {
-      if(e.dataType !== 'tile') return
-
+  analyzeMap(map) {
+    Object.keys(map.style.sourceCaches).forEach(sourceId => {
       //NOTE: This heavily depends on the internal API of Mapbox GL
       //so this breaks between Mapbox GL JS releases
-      this._sources[e.sourceId] = e.style.sourceCaches[e.sourceId]._source.vectorLayerIds
-      this.throttledAnalyzeVectorLayerFields()
+      this._sources[sourceId] = map.style.sourceCaches[sourceId]._source.vectorLayerIds
     })
+    this.throttledAnalyzeVectorLayerFields(map)
   }
 
-  analyzeVectorLayerFields() {
+  analyzeVectorLayerFields(map) {
     Object.keys(this._sources).forEach(sourceId => {
       this._sources[sourceId].forEach(vectorLayerId => {
         const knownProperties = this._vectorLayers[vectorLayerId] || {}
         const params = { sourceLayer: vectorLayerId }
-        this._map.querySourceFeatures(sourceId, params).forEach(feature => {
+        map.querySourceFeatures(sourceId, params).forEach(feature => {
           Object.keys(feature.properties).forEach(propertyName => {
             const knownPropertyValues = knownProperties[propertyName] || {}
             knownPropertyValues[feature.properties[propertyName]] = {}

src/libs/stylegen.js

@@ -0,0 +1,88 @@
+import randomColor from 'randomcolor'
+import Color from 'color'
+
+function assignVectorLayerColor(layerId) {
+  let hue = null
+  if(/water|ocean|lake|sea|river/.test(layerId)) {
+    hue = 'blue'
+  }
+
+  if(/road|highway|transport/.test(layerId)) {
+    hue = 'orange'
+  }
+
+  if(/building/.test(layerId)) {
+    hue = 'yellow'
+  }
+
+  if(/wood|forest|park|landcover|landuse/.test(layerId)) {
+    hue = 'green'
+  }
+
+  return randomColor({
+    luminosity: 'bright',
+    hue: hue,
+    seed: layerId,
+  })
+}
+
+function circleLayer(source, vectorLayer, color) {
+  return {
+    id: vectorLayer + Math.random(),
+    source: source,
+    'source-layer': vectorLayer,
+    interactive: true,
+    type: 'circle',
+    paint: {
+      'circle-color': color,
+      'circle-radius': 2,
+    },
+    filter: ["==", "$type", "Point"]
+  }
+}
+
+function polygonLayer(source, vectorLayer, color) {
+  return {
+    id: vectorLayer + Math.random(),
+    source: source,
+    'source-layer': vectorLayer,
+    interactive: true,
+    type: 'fill',
+    paint: {
+      'fill-color': Color(color).alpha(0.15).string(),
+      'fill-antialias': true,
+      'fill-outline-color': color,
+    },
+    filter: ["==", "$type", "Polygon"]
+  }
+}
+
+function lineLayer(source, vectorLayer, color) {
+  return {
+    id: vectorLayer + Math.random(),
+    source: source,
+    'source-layer': vectorLayer,
+    interactive: true,
+    layout: {
+      'line-join': 'round',
+      'line-cap': 'round'
+    },
+    type: 'line',
+    paint: {'line-color': color},
+    filter: ["==", "$type", "LineString"]
+  }
+}
+
+export function generateColoredLayers(sources) {
+  const styleLayers = []
+  Object.keys(sources).forEach(sourceId => {
+    const layers = sources[sourceId]
+    layers.forEach(layerId => {
+      const color = assignVectorLayerColor(layerId)
+      styleLayers.push(circleLayer(sourceId, layerId, color))
+      styleLayers.push(lineLayer(sourceId, layerId, color))
+      styleLayers.push(polygonLayer(sourceId, layerId, color))
+    })
+  })
+  return styleLayers
+}