diff --git a/.eslintrc.yml b/.eslintrc.yml
new file mode 100644
index 0000000..c1c6093
--- /dev/null
+++ b/.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
diff --git a/assets/css/style.css b/assets/css/style.css
new file mode 100644
index 0000000..63c702c
--- /dev/null
+++ b/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;
+}
diff --git a/assets/js/index.js b/assets/js/index.js
new file mode 100644
index 0000000..d6520dc
--- /dev/null
+++ b/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]);
+});
diff --git a/assets/js/styles.js b/assets/js/styles.js
new file mode 100644
index 0000000..5bf96ef
--- /dev/null
+++ b/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
+ });
+});
diff --git a/index.html b/index.html
index 84ccbdc..658b94a 100644
--- a/index.html
+++ b/index.html
@@ -1,211 +1,24 @@
-
- Road completion project - overview
-
-
-
-
+
+ Road completion project - overview
+
+
+
+
-
-
-
-
-
-
+
+
+
+
+
+