Add layer swicth feature

See #1

.eslintrc.yml

@@ -0,0 +1,16 @@
+env:
+  browser: true
+extends: 'eslint:recommended'
+rules:
+  indent:
+    - error
+    - 4
+  linebreak-style:
+    - error
+    - windows
+  quotes:
+    - error
+    - double
+  semi:
+    - error
+    - always

assets/css/style.css

@@ -0,0 +1,33 @@
+html,
+body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+}
+
+.map {
+    height: 100%;
+    position: relative;
+    width: 100%;
+}
+.map canvas {
+    cursor: crosshair;
+}
+.map > .overlay {
+    background: rgba(255, 255, 255, 0.8);
+    bottom: 15px;
+    overflow: auto;
+    padding: 5px;
+    position: absolute;
+    right: 15px;
+    top: 15px;
+    width: 300px;
+    z-index: 999;
+}
+.map > .overlay > .layers {
+    width: 100%;
+}
+.map > .overlay > .features {
+    min-height: 250px;
+}

assets/js/index.js

@@ -0,0 +1,56 @@
+/*global mapboxgl*/
+mapboxgl.accessToken = "pk.eyJ1Ijoiam9vc3RzY2hvdXBwZSIsImEiOiJjaWh2djF1c2owMmJrdDNtMWV2c2Rld3QwIn0.9zXJJWZ4rOcspyFIdEC3Rw";
+
+window.app.map = new mapboxgl.Map({
+    "container": "map", // container id
+    "style": window.app.styles.aiv,
+    // style: 'mapbox://styles/mapbox/satellite-v9',
+    // style: 'mapbox://styles/xivk/cjdd899nbbm7y2spdd9xq6xil', // stylesheet location
+    "center": [4.4629, 51.0671], // starting position [lng, lat]
+    "zoom": 9, // starting zoom
+    "hash": true
+});
+
+// Add zoom and rotation controls to the map.
+window.app.map.addControl(new mapboxgl.NavigationControl({
+    "showCompass": false
+}), "top-left");
+
+var selectedFeature = "";
+
+window.app.map.on("click", function (e) {
+    // reset currently selected feature.
+    if (selectedFeature) {
+        window.app.map.setFilter("diffs-hover", ["==", "id", ""]);
+        window.app.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 = window.app.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;
+
+        window.app.map.setFilter("diffs-hover", ["==", "id", selectedFeature]);
+        window.app.map.setFilter("diffs-details-hover", ["==", "id", selectedFeature]);
+
+        document.getElementById("features").innerHTML = JSON.stringify(features[0], null, 2);
+    }
+
+    if (!selectedFeature) {
+        document.getElementById("features").innerHTML = "";
+    }
+});
+
+document.getElementById("layer-switch").addEventListener("change", function () {
+    window.app.map.setStyle(window.app.styles[this.value]);
+});

assets/js/styles.js

@@ -0,0 +1,150 @@
+window.app = {};
+window.app.styles = {
+    "mapbox": {
+        "version": 8,
+        "sources": {
+            "mapbox-streets": {
+                "type": "raster",
+                "url": "mapbox://mapbox.dark",
+                "tileSize": 256
+            }
+        },
+        "layers": [
+            {
+                "id": "background-color",
+                "type": "background",
+                "paint": {
+                    "background-color": "rgb(4,7,14)"
+                }
+            },
+            {
+                "id": "background",
+                "type": "raster",
+                "source": "mapbox-streets",
+                "minzoom": 0,
+                "maxzoom": 22
+            }
+        ]
+    },
+    "aiv": {
+        "version": 8,
+        "sources": {
+            "aiv": {
+                "type": "raster",
+                "tiles": [
+                    "http://tile.informatievlaanderen.be/ws/raadpleegdiensten/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=omwrgbmrvl&STYLE=&FORMAT=image/png&tileMatrixSet=GoogleMapsVL&tileMatrix={z}&tileRow={y}&tileCol={x}"
+                ],
+                "tileSize": 256
+            }
+        },
+        "layers": [
+            {
+                "id": "background-color",
+                "type": "background",
+                "paint": {
+                    "background-color": "rgb(4,7,14)"
+                }
+            },
+            {
+                "id":"background",
+                "type":"raster",
+                "source":"aiv"
+            }
+        ]
+    }
+};
+
+/* **
+ *
+ */
+Object.keys(window.app.styles).map(function(key) {
+    // Add sources
+    window.app.styles[key].sources.buffers = {
+        "type": "vector",
+        "tiles": [
+            "http://roads-tiles.osm.be/data/buffers/{z}/{x}/{y}.pbf"
+        ],
+        "maxzoom": 14
+    };
+
+    window.app.styles[key].sources.diffs = {
+        "type": "vector",
+        "tiles": [
+            "http://roads-tiles.osm.be/data/diffs/{z}/{x}/{y}.pbf"
+        ],
+        "maxzoom": 14
+    };
+
+    /*window.app.styles[key].sources.refs = {
+        "type": "vector",
+        "tiles": [
+            "http://roads-tiles.osm.be/data/refs/{z}/{x}/{y}.pbf"
+        ],
+        "maxzoom": 14
+    };*/
+
+    // Add layers
+    window.app.styles[key].layers.push({
+        "id": "buffers",
+        "source": "buffers",
+        "source-layer": "buffers",
+        "type": "fill",
+        "paint": {
+            "fill-color": "#FFFFFF",
+            "fill-opacity": 0.2
+        },
+        "minzoom": 14
+    });
+
+    window.app.styles[key].layers.push({
+        "id": "diffs-details",
+        "source": "diffs",
+        "source-layer": "diffs",
+        "type": "line",
+        "paint": {
+            "line-color": "#FFFF00",
+            "line-width": 10,
+            "line-opacity": 0.2
+        },
+        "minzoom": 16
+    });
+
+    window.app.styles[key].layers.push({
+        "id": "diffs",
+        "source": "diffs",
+        "source-layer": "diffs",
+        "type": "line",
+        "paint": {
+            "line-color": "#FFFF00",
+            "line-width": 2
+        },
+        "maxzoom": 16
+    });
+
+    window.app.styles[key].layers.push({
+        "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
+    });
+
+    window.app.styles[key].layers.push({
+        "id": "diffs-hover",
+        "type": "line",
+        "source": "diffs",
+        "source-layer": "diffs",
+        "paint": {
+            "line-color": "#FFFF00",
+            "line-width": 6
+        },
+        "filter": ["==", "id", ""],
+        "maxzoom": 16
+    });
+});