diff --git a/package-lock.json b/package-lock.json
index ea0a91b..800b1fa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -225,6 +225,57 @@
         "tslib": "^1.7.1"
       }
     },
+    "@mapbox/geojson-area": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@mapbox/geojson-area/-/geojson-area-0.2.2.tgz",
+      "integrity": "sha1-GNeBSqNr8j+7zDefjiaiKSfevxA=",
+      "requires": {
+        "wgs84": "0.0.0"
+      }
+    },
+    "@mapbox/geojson-types": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@mapbox/geojson-types/-/geojson-types-1.0.2.tgz",
+      "integrity": "sha512-e9EBqHHv3EORHrSfbR9DqecPNn+AmuAoQxV6aL8Xu30bJMJR1o8PZLZzpk1Wq7/NfCbuhmakHTPYRhoqLsXRnw=="
+    },
+    "@mapbox/jsonlint-lines-primitives": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
+      "integrity": "sha1-zlblOfg1UrWNENZy6k1vya3HsjQ="
+    },
+    "@mapbox/mapbox-gl-supported": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-1.4.0.tgz",
+      "integrity": "sha512-ZD0Io4XK+/vU/4zpANjOtdWfVszAgnaMPsGR6LKsWh4kLIEv9qoobTVmJPPuwuM+ZI2b3BlZ6DYw1XHVmv6YTA=="
+    },
+    "@mapbox/point-geometry": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
+      "integrity": "sha1-ioP5M1x4YO/6Lu7KJUMyqgru2PI="
+    },
+    "@mapbox/tiny-sdf": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-1.1.0.tgz",
+      "integrity": "sha512-dnhyk8X2BkDRWImgHILYAGgo+kuciNYX30CUKj/Qd5eNjh54OWM/mdOS/PWsPeN+3abtN+QDGYM4G220ynVJKA=="
+    },
+    "@mapbox/unitbezier": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz",
+      "integrity": "sha1-FWUb1VOme4WB+zmIEMmK2Go0Uk4="
+    },
+    "@mapbox/vector-tile": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@mapbox/vector-tile/-/vector-tile-1.3.1.tgz",
+      "integrity": "sha512-MCEddb8u44/xfQ3oD+Srl/tNcQoqTw3goGk2oLsrFxOTc3dUp+kAnby3PvAeeBYSMSjSPD1nd1AJA6W49WnoUw==",
+      "requires": {
+        "@mapbox/point-geometry": "~0.1.0"
+      }
+    },
+    "@mapbox/whoots-js": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/whoots-js/-/whoots-js-3.1.0.tgz",
+      "integrity": "sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q=="
+    },
     "@ngtools/json-schema": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@ngtools/json-schema/-/json-schema-1.2.0.tgz",
@@ -500,6 +551,11 @@
         "color-convert": "^1.9.0"
       }
     },
+    "ansicolors": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/ansicolors/-/ansicolors-0.2.1.tgz",
+      "integrity": "sha1-vgiVmQl7dKXJxKhKDNvNtivYeu8="
+    },
     "anymatch": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-1.3.2.tgz",
@@ -1343,8 +1399,7 @@
     "buffer-from": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
-      "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==",
-      "dev": true
+      "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A=="
     },
     "buffer-indexof": {
       "version": "1.1.1",
@@ -1503,6 +1558,15 @@
       "integrity": "sha512-4Ix9ArKpo3s/dLGVn/el9SAk6Vn2kGhg8XeE4eRTsGEsmm9RnTkwnBsVZs7p4wA8gB+nsgP36vZWYbG8a4nYrg==",
       "dev": true
     },
+    "cardinal": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/cardinal/-/cardinal-0.4.4.tgz",
+      "integrity": "sha1-ylu2iltRG5D+k7ms6km97lwyv+I=",
+      "requires": {
+        "ansicolors": "~0.2.1",
+        "redeyed": "~0.4.0"
+      }
+    },
     "caseless": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
@@ -1820,7 +1884,6 @@
       "version": "1.6.2",
       "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz",
       "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==",
-      "dev": true,
       "requires": {
         "buffer-from": "^1.0.0",
         "inherits": "^2.0.3",
@@ -1993,8 +2056,7 @@
     "core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
-      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
-      "dev": true
+      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac="
     },
     "cosmiconfig": {
       "version": "4.0.0",
@@ -2141,6 +2203,11 @@
         "through": "X.X.X"
       }
     },
+    "csscolorparser": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz",
+      "integrity": "sha1-s085HupNqPPpgjHizNjfnAQfFxs="
+    },
     "cssesc": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-0.1.0.tgz",
@@ -2584,6 +2651,11 @@
         "stream-shift": "^1.0.0"
       }
     },
+    "earcut": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.1.3.tgz",
+      "integrity": "sha512-AxdCdWUk1zzK/NuZ7e1ljj6IGC+VAdC3Qb7QQDsXpfNrc5IM8tL9nNXUmEGE6jRHTfZ10zhzRhtDmWVsR5pd3A=="
+    },
     "ecc-jsbn": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
@@ -2929,6 +3001,11 @@
         "estraverse": "^4.1.1"
       }
     },
+    "esm": {
+      "version": "3.0.84",
+      "resolved": "https://registry.npmjs.org/esm/-/esm-3.0.84.tgz",
+      "integrity": "sha512-SzSGoZc17S7P+12R9cg21Bdb7eybX25RnIeRZ80xZs+VZ3kdQKzqTp2k4hZJjR7p9l0186TTXSgrxzlMDBktlw=="
+    },
     "esprima": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
@@ -3099,6 +3176,11 @@
         "fill-range": "^2.1.0"
       }
     },
+    "expect.js": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/expect.js/-/expect.js-0.2.0.tgz",
+      "integrity": "sha1-EChTPSwcNj90pnlv9X7AUg3tK+E="
+    },
     "express": {
       "version": "4.16.4",
       "resolved": "https://registry.npmjs.org/express/-/express-4.16.4.tgz",
@@ -3536,7 +3618,8 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
@@ -3546,7 +3629,8 @@
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -3663,7 +3747,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -3675,6 +3760,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -3800,7 +3886,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -3933,6 +4020,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -4108,6 +4196,29 @@
         "is-property": "^1.0.0"
       }
     },
+    "geojson-rewind": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/geojson-rewind/-/geojson-rewind-0.3.1.tgz",
+      "integrity": "sha1-IiQHl8hHzC8MHTE+SqDJFa+n8p0=",
+      "requires": {
+        "@mapbox/geojson-area": "0.2.2",
+        "concat-stream": "~1.6.0",
+        "minimist": "1.2.0",
+        "sharkdown": "^0.1.0"
+      },
+      "dependencies": {
+        "minimist": {
+          "version": "1.2.0",
+          "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
+        }
+      }
+    },
+    "geojson-vt": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/geojson-vt/-/geojson-vt-3.2.1.tgz",
+      "integrity": "sha512-EvGQQi/zPrDA6zr6BnJD/YhwAkBP8nnJ9emh3EnHQKVMfg/MRVtPbMYdgVy/IaEmn4UfagD2a6fafPDL5hbtwg=="
+    },
     "get-caller-file": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.3.tgz",
@@ -4164,6 +4275,11 @@
         }
       }
     },
+    "gl-matrix": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-2.8.1.tgz",
+      "integrity": "sha512-0YCjVpE3pS5XWlN3J4X7AiAx65+nqAI54LndtVFnQZB6G/FVLkZH8y8V6R3cIoOQR4pUdfwQGd1iwyoXHJ4Qfw=="
+    },
     "glob": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.3.tgz",
@@ -4235,6 +4351,11 @@
       "integrity": "sha512-6uHUhOPEBgQ24HM+r6b/QwWfZq+yiFcipKFrOFiBEnWdy5sdzYoi+pJeQaPI5qOLRFqWmAXUPQNsielzdLoecA==",
       "dev": true
     },
+    "grid-index": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.0.0.tgz",
+      "integrity": "sha1-rSxdVM5bNUN/r/HXCprrPR0mERA="
+    },
     "handle-thing": {
       "version": "1.2.5",
       "resolved": "http://registry.npmjs.org/handle-thing/-/handle-thing-1.2.5.tgz",
@@ -4759,8 +4880,7 @@
     "ieee754": {
       "version": "1.1.12",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.12.tgz",
-      "integrity": "sha512-GguP+DRY+pJ3soyIiGPTvdiVXjZ+DbXOxGpXn3eMvNW4x4irjqXm4wHKscC+TfxSJ0yw/S1F24tqdMNsMZTiLA==",
-      "dev": true
+      "integrity": "sha512-GguP+DRY+pJ3soyIiGPTvdiVXjZ+DbXOxGpXn3eMvNW4x4irjqXm4wHKscC+TfxSJ0yw/S1F24tqdMNsMZTiLA=="
     },
     "iferr": {
       "version": "0.1.5",
@@ -4857,8 +4977,7 @@
     "inherits": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
-      "dev": true
+      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
     },
     "ini": {
       "version": "1.3.5",
@@ -5187,8 +5306,7 @@
     "isarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-      "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
-      "dev": true
+      "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE="
     },
     "isbinaryfile": {
       "version": "3.0.3",
@@ -5988,6 +6106,11 @@
         }
       }
     },
+    "kdbush": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-2.0.1.tgz",
+      "integrity": "sha512-9KqSdmWCkBIisFIGclT0FRagKhI7IVbMyUjsxCFG0Ly1Dg6whlxJ7b9lrq8ifk3X/fGeJzok1R75LQfZTfA5zQ=="
+    },
     "killable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@@ -6490,6 +6613,37 @@
         "object-visit": "^1.0.0"
       }
     },
+    "mapbox-gl": {
+      "version": "0.51.0",
+      "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-0.51.0.tgz",
+      "integrity": "sha512-ToV6WJIgdLIKSwLO13pRf5EMeVx4gjdO10akFFxGVwYO/G1nCIZOurKFPIEXbAg0zmZXJD+55HbOIg+AbJICpQ==",
+      "requires": {
+        "@mapbox/geojson-types": "^1.0.2",
+        "@mapbox/jsonlint-lines-primitives": "^2.0.2",
+        "@mapbox/mapbox-gl-supported": "^1.4.0",
+        "@mapbox/point-geometry": "^0.1.0",
+        "@mapbox/tiny-sdf": "^1.1.0",
+        "@mapbox/unitbezier": "^0.0.0",
+        "@mapbox/vector-tile": "^1.3.1",
+        "@mapbox/whoots-js": "^3.1.0",
+        "csscolorparser": "~1.0.2",
+        "earcut": "^2.1.3",
+        "esm": "^3.0.84",
+        "geojson-rewind": "^0.3.0",
+        "geojson-vt": "^3.2.1",
+        "gl-matrix": "^2.6.1",
+        "grid-index": "^1.0.0",
+        "minimist": "0.0.8",
+        "murmurhash-js": "^1.0.0",
+        "pbf": "^3.0.5",
+        "potpack": "^1.0.1",
+        "quickselect": "^1.0.0",
+        "rw": "^1.3.3",
+        "supercluster": "^4.1.1",
+        "tinyqueue": "^1.1.0",
+        "vt-pbf": "^3.0.1"
+      }
+    },
     "math-random": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/math-random/-/math-random-1.0.1.tgz",
@@ -6652,8 +6806,7 @@
     "minimist": {
       "version": "0.0.8",
       "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
-      "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
-      "dev": true
+      "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
     },
     "mississippi": {
       "version": "2.0.0",
@@ -6757,6 +6910,11 @@
       "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=",
       "dev": true
     },
+    "murmurhash-js": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/murmurhash-js/-/murmurhash-js-1.0.0.tgz",
+      "integrity": "sha1-sGJ44h/Gw3+lMTcysEEry2rhX1E="
+    },
     "nan": {
       "version": "2.11.1",
       "resolved": "https://registry.npmjs.org/nan/-/nan-2.11.1.tgz",
@@ -7885,6 +8043,15 @@
         "pify": "^3.0.0"
       }
     },
+    "pbf": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.1.0.tgz",
+      "integrity": "sha512-/hYJmIsTmh7fMkHAWWXJ5b8IKLWdjdlAFb3IHkRBn1XUhIYBChVGfVwmHEAV3UfXTxsP/AKfYTXTS/dCPxJd5w==",
+      "requires": {
+        "ieee754": "^1.1.6",
+        "resolve-protobuf-schema": "^2.0.0"
+      }
+    },
     "pbkdf2": {
       "version": "3.0.17",
       "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.0.17.tgz",
@@ -8058,6 +8225,11 @@
       "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
       "dev": true
     },
+    "potpack": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/potpack/-/potpack-1.0.1.tgz",
+      "integrity": "sha512-15vItUAbViaYrmaB/Pbw7z6qX2xENbFSTA7Ii4tgbPtasxm5v6ryKhKtL91tpWovDJzTiZqdwzhcFBCwiMVdVw=="
+    },
     "prelude-ls": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
@@ -8089,8 +8261,7 @@
     "process-nextick-args": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz",
-      "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==",
-      "dev": true
+      "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw=="
     },
     "promise": {
       "version": "7.3.1",
@@ -8118,6 +8289,11 @@
         "with-callback": "^1.0.2"
       }
     },
+    "protocol-buffers-schema": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.3.2.tgz",
+      "integrity": "sha512-Xdayp8sB/mU+sUV4G7ws8xtYMGdQnxbeIfLjyO9TZZRJdztBGhlmbI5x1qcY4TG5hBkIKGnc28i7nXxaugu88w=="
+    },
     "protractor": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/protractor/-/protractor-5.1.2.tgz",
@@ -8489,6 +8665,11 @@
       "integrity": "sha512-sluvZZ1YiTLD5jsqZcDmFyV2EwToyXZBfpoVOmktMmW+VEnhgakFHnasVph65fOjGPTWN0Nw3+XQaSeMayr0kg==",
       "dev": true
     },
+    "quickselect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-1.1.1.tgz",
+      "integrity": "sha512-qN0Gqdw4c4KGPsBOQafj6yj/PA6c/L63f6CaZ/DCF/xF4Esu3jVmKLUDYxghFx8Kb/O7y9tI7x2RjTSXwdK1iQ=="
+    },
     "randomatic": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/randomatic/-/randomatic-3.1.1.tgz",
@@ -8639,7 +8820,6 @@
       "version": "2.3.6",
       "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
       "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
-      "dev": true,
       "requires": {
         "core-util-is": "~1.0.0",
         "inherits": "~2.0.3",
@@ -8947,6 +9127,21 @@
         "strip-indent": "^1.0.1"
       }
     },
+    "redeyed": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/redeyed/-/redeyed-0.4.4.tgz",
+      "integrity": "sha1-N+mQpvKyGyoRwuakj9QTVpjLqX8=",
+      "requires": {
+        "esprima": "~1.0.4"
+      },
+      "dependencies": {
+        "esprima": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/esprima/-/esprima-1.0.4.tgz",
+          "integrity": "sha1-n1V+CPw7TSbs6d00+Pv0drYlha0="
+        }
+      }
+    },
     "redis": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/redis/-/redis-2.8.0.tgz",
@@ -9191,6 +9386,14 @@
       "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=",
       "dev": true
     },
+    "resolve-protobuf-schema": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz",
+      "integrity": "sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==",
+      "requires": {
+        "protocol-buffers-schema": "^3.3.1"
+      }
+    },
     "resolve-url": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -9240,6 +9443,11 @@
         "aproba": "^1.1.1"
       }
     },
+    "rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q="
+    },
     "rxjs": {
       "version": "5.5.12",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-5.5.12.tgz",
@@ -9251,8 +9459,7 @@
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-      "dev": true
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
     },
     "safe-regex": {
       "version": "1.1.0",
@@ -9566,6 +9773,26 @@
         }
       }
     },
+    "sharkdown": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/sharkdown/-/sharkdown-0.1.0.tgz",
+      "integrity": "sha1-YdT+Up510CRCEnzJI0NiJlCZIU8=",
+      "requires": {
+        "cardinal": "~0.4.2",
+        "expect.js": "~0.2.0",
+        "minimist": "0.0.5",
+        "split": "~0.2.10",
+        "stream-spigot": "~2.1.2",
+        "through": "~2.3.4"
+      },
+      "dependencies": {
+        "minimist": {
+          "version": "0.0.5",
+          "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.5.tgz",
+          "integrity": "sha1-16oye87PUY+RBqxrjwA/o7zqhWY="
+        }
+      }
+    },
     "shebang-command": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
@@ -9971,6 +10198,14 @@
         "wbuf": "^1.7.2"
       }
     },
+    "split": {
+      "version": "0.2.10",
+      "resolved": "http://registry.npmjs.org/split/-/split-0.2.10.tgz",
+      "integrity": "sha1-Zwl8YB1pfOE2j0GPBs0gHPBSGlc=",
+      "requires": {
+        "through": "2"
+      }
+    },
     "split-string": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
@@ -10096,6 +10331,37 @@
       "integrity": "sha1-1cdSgl5TZ+eG944Y5EXqIjoVWVI=",
       "dev": true
     },
+    "stream-spigot": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/stream-spigot/-/stream-spigot-2.1.2.tgz",
+      "integrity": "sha1-feFF6Bn43Q20UJDRPc9zqO08wDU=",
+      "requires": {
+        "readable-stream": "~1.1.0"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+        },
+        "readable-stream": {
+          "version": "1.1.14",
+          "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
+          "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=",
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.1",
+            "isarray": "0.0.1",
+            "string_decoder": "~0.10.x"
+          }
+        },
+        "string_decoder": {
+          "version": "0.10.31",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+          "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
+        }
+      }
+    },
     "streamroller": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/streamroller/-/streamroller-0.7.0.tgz",
@@ -10140,7 +10406,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
       "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-      "dev": true,
       "requires": {
         "safe-buffer": "~5.1.0"
       }
@@ -10274,6 +10539,14 @@
         "when": "~3.6.x"
       }
     },
+    "supercluster": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-4.1.1.tgz",
+      "integrity": "sha512-sF0FfUOPFp96DKzwWFLeQOEqqKu2PpcesxAFeFsknA/q7g7igVVn/p3NI2XHEghNSyDAqunKNKqAbqNO8+7NDQ==",
+      "requires": {
+        "kdbush": "^2.0.1"
+      }
+    },
     "supports-color": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.5.0.tgz",
@@ -10309,8 +10582,7 @@
     "through": {
       "version": "2.3.8",
       "resolved": "http://registry.npmjs.org/through/-/through-2.3.8.tgz",
-      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
-      "dev": true
+      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU="
     },
     "through2": {
       "version": "2.0.5",
@@ -10357,6 +10629,11 @@
       "dev": true,
       "optional": true
     },
+    "tinyqueue": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-1.2.3.tgz",
+      "integrity": "sha512-Qz9RgWuO9l8lT+Y9xvbzhPT2efIUIFd69N7eF7tJ9lnQl0iLj1M7peK7IoUGZL9DJHw9XftqLreccfxcQgYLxA=="
+    },
     "tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@@ -10715,8 +10992,7 @@
     "typedarray": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
-      "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
-      "dev": true
+      "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
     },
     "typescript": {
       "version": "2.5.3",
@@ -11037,8 +11313,7 @@
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
-      "dev": true
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
     },
     "utila": {
       "version": "0.4.0",
@@ -11130,6 +11405,16 @@
       "integrity": "sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=",
       "dev": true
     },
+    "vt-pbf": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/vt-pbf/-/vt-pbf-3.1.1.tgz",
+      "integrity": "sha512-pHjWdrIoxurpmTcbfBWXaPwSmtPAHS105253P1qyEfSTV2HJddqjM+kIHquaT/L6lVJIk9ltTGc0IxR/G47hYA==",
+      "requires": {
+        "@mapbox/point-geometry": "0.1.0",
+        "@mapbox/vector-tile": "^1.3.1",
+        "pbf": "^3.0.5"
+      }
+    },
     "watchpack": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",
@@ -12353,6 +12638,11 @@
       "integrity": "sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg==",
       "dev": true
     },
+    "wgs84": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/wgs84/-/wgs84-0.0.0.tgz",
+      "integrity": "sha1-NP3FVZF7blfPKigu0ENxDASc3HY="
+    },
     "when": {
       "version": "3.6.4",
       "resolved": "https://registry.npmjs.org/when/-/when-3.6.4.tgz",
diff --git a/package.json b/package.json
index 9c5b8d7..000c6b4 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "@angular/platform-browser-dynamic": "^5.2.0",
     "@angular/router": "^5.2.0",
     "core-js": "^2.4.1",
+    "mapbox-gl": "^0.51.0",
     "rxjs": "^5.5.6",
     "zone.js": "^0.8.19"
   },
diff --git a/src/app/app.component.css b/src/app/app.component.css
index e69de29..c6f57d3 100644
--- a/src/app/app.component.css
+++ b/src/app/app.component.css
@@ -0,0 +1,8 @@
+@import url('https://fonts.googleapis.com/css?family=Open+Sans:700|Raleway');
+* { font-family:"Raleway",sans-serif;}
+map-box {margin:0;}
+div.title {font-size:1em;text-align:left;padding:10px;position:absolute;bottom:0;left:0;width:30vw;background-color:rgba(0,0,0,0);color:#fff;}
+div.title h1 {font-family:"Open Sans";font-size:4em;}
+div.title h1 span {background:#3f00dd;}
+div.title h2 span {background:#fff;padding:2px;color:#000;}
+div.title p span {line-height:1.4;background:#021011;}
diff --git a/src/app/app.component.html b/src/app/app.component.html
index fa2706a..b91293b 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,20 +1,8 @@
-<!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align:center">
-  <h1>
-    Welcome to {{ title }}!
-  </h1>
-  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
+<div class="title">
+  <h1><span>Chiasso Soundmap</span></h1>
+  <h2><span>Listen</span> | <span>About</span> | <span>Contact</span></h2>
+  <!-- <p><span>Welcome to SOINUMAPA.NET Basque country Sound Map open archive project. Based on phonography or the art of recording environmental sounds, our aim is to show, share and exchange field recordings made in the Basque Country. Right now, you will find more than 1500 sound recordings: city noises, natural ambiences, animals, celebrations and parties, places, happenings, cultural events… including images and texts that behind their apparent silence, keep many sounds (see ABOUT) inside.
+You are free to listen, read, watch, consult and use our archive for any research, creative or educational purposes</span></p> -->
 </div>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>
-
+<map-box></map-box>
+<text-info></text-info>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 7b0f672..b94d505 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -6,5 +6,5 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  title = 'app';
+  title = 'Chiasso Soundmap';
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 926975a..9962364 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -3,16 +3,23 @@ import { NgModule } from '@angular/core';
 
 
 import { AppComponent } from './app.component';
+import { MapBoxComponent } from './map-box/map-box.component';
+import { MapService } from './map.service';
+import { TextInfoComponent } from './text-info/text-info.component';
 
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    MapBoxComponent,
+    TextInfoComponent
   ],
   imports: [
     BrowserModule
   ],
-  providers: [],
+  providers: [
+    MapService
+  ],
   bootstrap: [AppComponent]
 })
 export class AppModule { }
diff --git a/src/app/map-box/map-box.component.css b/src/app/map-box/map-box.component.css
new file mode 100644
index 0000000..8ae8683
--- /dev/null
+++ b/src/app/map-box/map-box.component.css
@@ -0,0 +1 @@
+div.map {z-index:-10;position:absolute;top:0;left:0;width:100%;width:100vw;height:100%;height:100vh; }
diff --git a/src/app/map-box/map-box.component.html b/src/app/map-box/map-box.component.html
new file mode 100644
index 0000000..77ab13a
--- /dev/null
+++ b/src/app/map-box/map-box.component.html
@@ -0,0 +1 @@
+<div class="map" id="map"></div>
diff --git a/src/app/map-box/map-box.component.spec.ts b/src/app/map-box/map-box.component.spec.ts
new file mode 100644
index 0000000..59a97e5
--- /dev/null
+++ b/src/app/map-box/map-box.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MapBoxComponent } from './map-box.component';
+
+describe('MapBoxComponent', () => {
+  let component: MapBoxComponent;
+  let fixture: ComponentFixture<MapBoxComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MapBoxComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MapBoxComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/map-box/map-box.component.ts b/src/app/map-box/map-box.component.ts
new file mode 100644
index 0000000..3be8087
--- /dev/null
+++ b/src/app/map-box/map-box.component.ts
@@ -0,0 +1,50 @@
+import { Component, OnInit } from '@angular/core';
+import * as mapboxgl from 'mapbox-gl';
+import { MapService } from '../map.service';
+import { GeoJson, FeatureCollection } from '../map';
+
+@Component({
+  selector: 'map-box',
+  templateUrl: './map-box.component.html',
+  styleUrls: ['./map-box.component.css']
+})
+export class MapBoxComponent implements OnInit {
+
+  /// default settings
+  map: mapboxgl.Map;
+  style = 'mapbox://styles/mapbox/satellite-streets-v9';
+  //chiasso 45.8289397,8.9803456
+  lat = 45.836700;
+  lng = 9.024611;
+  message = 'Chiasso Soundmap';
+
+  // data
+  source: any;
+  markers: any;
+
+  constructor(private mapService: MapService) { }
+
+  ngOnInit() {
+        this.initializeMap()
+  }
+
+  private initializeMap() {
+    this.buildMap()
+  }
+
+  private buildMap() {
+    this.map = new mapboxgl.Map({
+     container: 'map',
+     style: this.style,
+     zoom: 13,
+     pitch: 40, // pitch in degrees
+     bearing: 0, // bearing in degrees
+     center: [this.lng, this.lat]
+   });
+
+   this.map.addControl(new mapboxgl.NavigationControl());
+  }
+
+
+
+}
diff --git a/src/app/map.service.spec.ts b/src/app/map.service.spec.ts
new file mode 100644
index 0000000..aa406ca
--- /dev/null
+++ b/src/app/map.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { MapService } from './map.service';
+
+describe('MapService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [MapService]
+    });
+  });
+
+  it('should be created', inject([MapService], (service: MapService) => {
+    expect(service).toBeTruthy();
+  }));
+});
diff --git a/src/app/map.service.ts b/src/app/map.service.ts
new file mode 100644
index 0000000..deca741
--- /dev/null
+++ b/src/app/map.service.ts
@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+import { environment } from '../environments/environment';
+
+import { GeoJson } from './map';
+import * as mapboxgl from 'mapbox-gl';
+
+@Injectable()
+export class MapService {
+
+  constructor() {
+    mapboxgl.accessToken = environment.mapbox.accessToken
+  }
+
+
+  // getMarkers(): Observable<any> {
+  //   return this.db.list('/markers')
+  // }
+
+
+}
diff --git a/src/app/map.ts b/src/app/map.ts
new file mode 100644
index 0000000..7fccb44
--- /dev/null
+++ b/src/app/map.ts
@@ -0,0 +1,28 @@
+export interface IGeometry {
+    type: string;
+    coordinates: number[];
+}
+
+export interface IGeoJson {
+    type: string;
+    geometry: IGeometry;
+    properties?: any;
+    $key?: string;
+}
+
+export class GeoJson implements IGeoJson {
+  type = 'Feature';
+  geometry: IGeometry;
+
+  constructor(coordinates, public properties?) {
+    this.geometry = {
+      type: 'Point',
+      coordinates: coordinates
+    }
+  }
+}
+
+export class FeatureCollection {
+  type = 'FeatureCollection'
+  constructor(public features: Array<GeoJson>) {}
+}
diff --git a/src/app/text-info/text-info.component.css b/src/app/text-info/text-info.component.css
new file mode 100644
index 0000000..ac51a8d
--- /dev/null
+++ b/src/app/text-info/text-info.component.css
@@ -0,0 +1,2 @@
+div.modal {display:none;position:absolute;top:0;left:0;width:100vw;height:100vh;width:100%;height:100%; background-color:rgba(255,255,255,0.8);}
+div.content { background:#fff;border:1px solid #eee;padding:10px;border-radius:1px; position:relative; width:50vw;height:50vh;margin:auto;margin-top:20vh;}
diff --git a/src/app/text-info/text-info.component.html b/src/app/text-info/text-info.component.html
new file mode 100644
index 0000000..89d58ab
--- /dev/null
+++ b/src/app/text-info/text-info.component.html
@@ -0,0 +1,6 @@
+<div class="modal">
+  <div class="content">
+    <h1>Info</h1>
+    <p>More info</p>
+  </div>
+</div>
diff --git a/src/app/text-info/text-info.component.spec.ts b/src/app/text-info/text-info.component.spec.ts
new file mode 100644
index 0000000..ef25462
--- /dev/null
+++ b/src/app/text-info/text-info.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TextInfoComponent } from './text-info.component';
+
+describe('TextInfoComponent', () => {
+  let component: TextInfoComponent;
+  let fixture: ComponentFixture<TextInfoComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TextInfoComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TextInfoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/text-info/text-info.component.ts b/src/app/text-info/text-info.component.ts
new file mode 100644
index 0000000..eee1ff8
--- /dev/null
+++ b/src/app/text-info/text-info.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'text-info',
+  templateUrl: './text-info.component.html',
+  styleUrls: ['./text-info.component.css']
+})
+export class TextInfoComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index b7f639a..a7c5cde 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -4,5 +4,8 @@
 // The list of which env maps to which file can be found in `.angular-cli.json`.
 
 export const environment = {
-  production: false
+  production: false,
+  mapbox: {
+    accessToken: 'pk.eyJ1IjoibHJ1bGxvIiwiYSI6ImNpaDUydjdoNTAwd3BzdGx5bGlhOTh6bXYifQ.tE8QgNbVSgwP8V5LnJWA3w'
+  }
 };
diff --git a/src/index.html b/src/index.html
index 71976f3..428d3a4 100644
--- a/src/index.html
+++ b/src/index.html
@@ -7,6 +7,7 @@
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link href='https://api.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.css' rel='stylesheet' />
 </head>
 <body>
   <app-root></app-root>
diff --git a/src/styles.css b/src/styles.css
index 90d4ee0..92dedca 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1 +1,2 @@
 /* You can add global styles to this file, and also import other style files */
+body {padding:0;font-size:12pt;overflow:hidden;}