Added the option to select a diff feature.

osmbe · Feb 8, 2018 · 5064cba · 5064cba
1 parent ed7f2bb
commit 5064cba
Showing 1 changed file with 69 additions and 9 deletions.
diff --git a/index.html b/index.html
@@ -2,13 +2,17 @@
 <html>
 <head>
     <meta charset='utf-8' />
-    <title>Road completion project - overview</title>
+    <title>Road completion project - overview</title>    
     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
     <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.0/mapbox-gl.js'></script>
     <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.0/mapbox-gl.css' rel='stylesheet' />
     <style>
         body { margin:0; padding:0; }
         #map { position:absolute; top:0; bottom:0; width:100%; }
+    </style>
+</head>
+<body>
+    <style>
         #features {
             position: absolute;
             top: 0;
@@ -18,13 +22,13 @@
             overflow: auto;
             background: rgba(255, 255, 255, 0.8);
         }
+        #map canvas {
+            cursor: crosshair;
+        }
     </style>
-</head>
-<body>
 
-<pre id='features'></pre>
 <div id='map'></div>
-
+<pre id='features'></pre>
 <script>
     mapboxgl.accessToken = 'pk.eyJ1Ijoiam9vc3RzY2hvdXBwZSIsImEiOiJjaWh2djF1c2owMmJrdDNtMWV2c2Rld3QwIn0.9zXJJWZ4rOcspyFIdEC3Rw';
     var map = new mapboxgl.Map({
@@ -139,13 +143,69 @@
             },
             "maxzoom": 16
         });
+
+        map.addLayer({
+            "id": "diffs-details-hover",
+            "source": "diffs",
+            "source-layer": "diffs",
+            "type": "line",
+            "paint": {
+                "line-color": "#FFFF00",
+                "line-width": 15,
+                "line-opacity": 0.5
+            },
+            "filter": ["==", "id", ""],
+            "minzoom": 16
+        });
+
+        map.addLayer({
+            "id": "diffs-hover",
+            "type": "line",
+            "source": "diffs",
+            "source-layer": "diffs",
+            "paint": {
+                "line-color": "#FFFF00",
+                "line-width": 6
+            },
+            "filter": ["==", "id", ""],
+            "maxzoom": 16
+        });
     });
 
-    map.on('mousemove', function (e) {
-        var features = map.queryRenderedFeatures(e.point);
-        document.getElementById('features').innerHTML = JSON.stringify(features, null, 2);
+    var selectedFeature = "";
+
+    map.on('click', function (e) {
+        // reset currently selected feature.
+        if (selectedFeature) {
+            map.setFilter("diffs-hover", ["==", "id", ""]);
+            map.setFilter("diffs-details-hover", ["==", "id", ""]);
+            selectedFeature = "";
+        }
+
+        // search in small box around click location.
+        var point = e.point;
+        var width = 10;
+        var height = 20;
+        var features = map.queryRenderedFeatures([
+            [point.x - width / 2, point.y - height / 2],
+            [point.x + width / 2, point.y + height / 2]],
+            { layers: ["diffs", "diffs-details"] });
+
+        if (features && features[0] && features[0].properties && features[0].properties.id) {
+            selectedFeature = features[0].properties.id;
+
+            map.setFilter("diffs-hover", ["==", "id", selectedFeature]);
+            map.setFilter("diffs-details-hover", ["==", "id", selectedFeature]);
+
+            document.getElementById('features').innerHTML = JSON.stringify(features[0], null, 2);
+        }
+
+        if (!selectedFeature) {
+            document.getElementById('features').innerHTML = "";
+        }
     });
+
 </script>
 
 </body>
-</html>
+</html>