Add different inspect viewer for data

public/templates/data.tmpl

@@ -6,14 +6,15 @@
   <title>{{name}} - TileServer GL</title>
   {{#is_vector}}
   <link rel="stylesheet" type="text/css" href="/mapbox-gl.css{{&key_query}}" />
+  <link rel="stylesheet" type="text/css" href="/mapbox-gl-inspect.css{{&key_query}}" />
   <script src="/mapbox-gl.js{{&key_query}}"></script>
+  <script src="/mapbox-gl-inspect.min.js{{&key_query}}"></script>
   <style>
-    body {background:#000;color:#ccc;}
+    body {background:#fff;color:#333;}
     #map {position:absolute;top:0;left:0;right:250px;bottom:0;}
     h1 {position:absolute;top:5px;right:0;width:240px;margin:0;line-height:20px;font-size:20px;}
     #layerList {position:absolute;top:35px;right:0;bottom:60%;width:240px;overflow:auto;}
     #layerList div div {width:15px;height:15px;display:inline-block;}
-    #propertyList {position:absolute;top:40%;bottom:0;right:0;width:240px;overflow:auto;color:#fff;}
   </style>
   {{/is_vector}}
   {{^is_vector}}
@@ -35,99 +36,37 @@
   <script>
   var map = new mapboxgl.Map({
     container: 'map',
-    hash: true
+    hash: true,
-  });
+    style: {
-  map.addControl(new mapboxgl.NavigationControl());
-
-  function generateColor(str) {
-    var rgb = [0, 0, 0];
-    for (var i = 0; i < str.length; i++) {
-        var v = str.charCodeAt(i);
-        rgb[v % 3] = (rgb[i % 3] + (13*(v%13))) % 12;
-    }
-    var r = 4 + rgb[0];
-    var g = 4 + rgb[1];
-    var b = 4 + rgb[2];
-    r = (r * 16) + r;
-    g = (g * 16) + g;
-    b = (b * 16) + b;
-    return [r, g, b, 1];
-  };
-
-  function initLayer(data) {
-    var layer;
-    var layerList = document.getElementById('layerList');
-    var layers_ = [];
-    data['vector_layers'].forEach(function(el) {
-      var color = generateColor(el['id']);
-      var colorText = 'rgba(' + color[0] + ',' + color[1] + ',' + color[2] + ',' + color[3] + ')';
-      layers_.push({
-        id: el['id'] + Math.random(),
-        source: 'vector_layer_',
-        'source-layer': el['id'],
-        interactive: true,
-        type: 'line',
-        paint: {'line-color': colorText}
-      });
-      layers_.push({
-        id: el['id'] + Math.random(),
-        source: 'vector_layer_',
-        'source-layer': el['id'],
-        interactive: true,
-        type: 'circle',
-        paint: {'circle-color': colorText,
-                'circle-radius': 3},
-        filter: ["==", "$type", "Point"]
-      });
-      var item = document.createElement('div');
-      item.innerHTML = '<div style="' +
-        'background:rgba(' + color[0] + ',' + color[1] + ',' + color[2] + ',1);' +
-        '"></div> ' + el['id'];
-      layerList.appendChild(item);
-    });
-    map.setStyle({
       version: 8,
       sources: {
         'vector_layer_': {
           type: 'vector',
-          tiles: data['tiles'],
+          url: '/data/{{id}}.json{{&key_query}}'
-          minzoom: data['minzoom'],
-          maxzoom: data['maxzoom']
         }
       },
-      layers: layers_
+      layers: []
-    });
-
-    return layer;
-  }
-
-  var xhttp = new XMLHttpRequest();
-  xhttp.onreadystatechange = function() {
-    if (xhttp.readyState == 4 && xhttp.status == 200) {
-      initLayer(xhttp.response);
     }
-  };
+  });
-  xhttp.responseType = 'json';
+  map.addControl(new mapboxgl.NavigationControl());
-  xhttp.open('GET', '/data/{{id}}.json{{&key_query}}', true);
+  var inspect = new MapboxInspect({
-  xhttp.send();
+    showInspectMap: true,
-
+    showInspectButton: false
-  var propertyList = document.getElementById('propertyList');
+  });
-  map.on('mousemove', function(e) {
+  map.addControl(inspect);
-    propertyList.innerHTML = '';
+  map.on('styledata', function() {
-    var width = 3, height = 3;
+    var layerList = document.getElementById('layerList');
-    var features = map.queryRenderedFeatures([
+    layerList.innerHTML = '';
-                     [e.point.x - width / 2, e.point.y - height / 2],
+    Object.keys(inspect.sources).forEach(function(sourceId) {
-                     [e.point.x + width / 2, e.point.y + height / 2]
+      var layerIds = inspect.sources[sourceId];
-                   ]);
+      layerIds.forEach(function(layerId) {
-    if (features) {
+        var item = document.createElement('div');
-      var html = '';
+        item.innerHTML = '<div style="' +
-      features.forEach(function(feature) {
+          'background:' + inspect.assignLayerColor(layerId) + ';' +
-        html +=
+        '"></div> ' + layerId;
-            '[Layer: ' + feature.layer['source-layer'] + ']\n' +
+        layerList.appendChild(item);
-            JSON.stringify(feature.properties, null, 2) + '\n\n';
       });
-      propertyList.innerHTML = html;
+    })
-    }
   });
   </script>
   {{/is_vector}}