# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1529942750 -7200
# Node ID 7ba0a77fd679a4fd18592c39224e288c29179bf5
# Parent  c3e2cd7fa46fd8508eebc847c327cc0d8fda570f
ol component added

diff -r c3e2cd7fa46f -r 7ba0a77fd679 client/package.json
--- a/client/package.json	Mon Jun 25 13:26:48 2018 +0200
+++ b/client/package.json	Mon Jun 25 18:05:50 2018 +0200
@@ -13,6 +13,7 @@
     "axios": "^0.18.0",
     "bootstrap": "^4.1.1",
     "font-awesome": "^4.7.0",
+    "ol": "^4.6.5",
     "vue": "^2.5.16",
     "vue-router": "^3.0.1",
     "vuex": "^3.0.1"
diff -r c3e2cd7fa46f -r 7ba0a77fd679 client/src/App.vue
--- a/client/src/App.vue	Mon Jun 25 13:26:48 2018 +0200
+++ b/client/src/App.vue	Mon Jun 25 18:05:50 2018 +0200
@@ -1,7 +1,5 @@
 <template>
   <div id="app">
-    <div id="nav">
-    </div>
     <router-view/>
   </div>
 </template>
diff -r c3e2cd7fa46f -r 7ba0a77fd679 client/src/assets/application.scss
--- a/client/src/assets/application.scss	Mon Jun 25 13:26:48 2018 +0200
+++ b/client/src/assets/application.scss	Mon Jun 25 18:05:50 2018 +0200
@@ -1,10 +1,14 @@
 $offset: 20px;
 $small-offset: 10px;
+$large-offset: 30px;
 $iconsize: 3em;
 $iconLineHeight: 0.25em;
 $iconwidth: 20px;
 $basic-shadow: 1px 3px 8px 2px rgba(220, 220, 220, 0.75);
 $basic-shadow-light: 1px 1px 12px 1px rgba(235, 235, 235, 0.75);
+$sidebar-full-width: 150px;
+$sidebar-collapsed-width: 80px;
+
 
 %fully-centered {
   position: absolute;
diff -r c3e2cd7fa46f -r 7ba0a77fd679 client/src/main.js
--- a/client/src/main.js	Mon Jun 25 13:26:48 2018 +0200
+++ b/client/src/main.js	Mon Jun 25 18:05:50 2018 +0200
@@ -4,6 +4,7 @@
 import store from "./store";
 import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
 import "../node_modules/font-awesome/css/font-awesome.min.css";
+import "../node_modules/ol/ol.css";
 
 Vue.config.productionTip = false;
 
diff -r c3e2cd7fa46f -r 7ba0a77fd679 client/src/router.js
--- a/client/src/router.js	Mon Jun 25 13:26:48 2018 +0200
+++ b/client/src/router.js	Mon Jun 25 18:05:50 2018 +0200
@@ -15,7 +15,7 @@
     },
     {
       path: "/",
-      name: "main",
+      name: "mainview",
       component: Main,
       meta: {
         requiresAuth: true
diff -r c3e2cd7fa46f -r 7ba0a77fd679 client/src/views/Main.vue
--- a/client/src/views/Main.vue	Mon Jun 25 13:26:48 2018 +0200
+++ b/client/src/views/Main.vue	Mon Jun 25 18:05:50 2018 +0200
@@ -1,5 +1,31 @@
 <template>
-  <div class="main">
-    <h1>Guarded!</h1>
+  <div class="main d-flex">
+    <div class="sidebar">Sidebar!</div>
+    <Map></Map>
   </div>
 </template>
+
+<style lang="scss">
+@import "../assets/application.scss";
+.main {
+  height: 100vh;
+}
+.sidebar {
+  padding-top: $large-offset;
+  width: $sidebar-full-width;
+}
+#map {
+  background-color: #ffffff;
+  width: 100%;
+}
+</style>
+
+<script>
+import Map from "./Map";
+export default {
+  name: "mainview",
+  components: {
+    Map
+  }
+};
+</script>
diff -r c3e2cd7fa46f -r 7ba0a77fd679 client/src/views/Map.jsx
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/views/Map.jsx	Mon Jun 25 18:05:50 2018 +0200
@@ -0,0 +1,35 @@
+/*eslint no-unused-vars: ["error", { "args": "none" }]*/
+import ol_Map from "ol/map";
+import ol_layer_Tile from "ol/layer/tile";
+import ol_source_OSM from "ol/source/osm";
+import ol_View from "ol/view";
+
+export default {
+  render(h) {
+    return <div id="map" />;
+  },
+  data() {
+    return {
+      lat: 52.278889,
+      long: 8.043056,
+      zoom: 12,
+      projection: "EPSG:4326"
+    };
+  },
+  mounted() {
+    console.log(this.centerX);
+    new ol_Map({
+      layers: [
+        new ol_layer_Tile({
+          source: new ol_source_OSM()
+        })
+      ],
+      target: "map",
+      view: new ol_View({
+        center: [this.long, this.lat],
+        zoom: this.zoom,
+        projection: this.projection
+      })
+    });
+  }
+};
diff -r c3e2cd7fa46f -r 7ba0a77fd679 client/yarn.lock
--- a/client/yarn.lock	Mon Jun 25 13:26:48 2018 +0200
+++ b/client/yarn.lock	Mon Jun 25 18:05:50 2018 +0200
@@ -4074,6 +4074,10 @@
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.11.tgz#c16384ffe00f5b7835824e67b6f2bd44a5229455"
 
+ieee754@^1.1.6:
+  version "1.1.12"
+  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.12.tgz#50bf24e5b9c8bb98af4964c941cdb0918da7b60b"
+
 iferr@^0.1.5:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/iferr/-/iferr-0.1.5.tgz#c60eed69e6d8fdb6b3104a1fcbca1c192dc5b501"
@@ -5845,6 +5849,14 @@
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.2.tgz#09bea3343d41859ebd446292d11c9d4db619084e"
 
+ol@^4.6.5:
+  version "4.6.5"
+  resolved "https://registry.yarnpkg.com/ol/-/ol-4.6.5.tgz#3b628ffb65885f277ceb24bb0c6eee0a38727442"
+  dependencies:
+    pbf "3.1.0"
+    pixelworks "1.1.0"
+    rbush "2.0.1"
+
 on-finished@~2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
@@ -6095,6 +6107,13 @@
   dependencies:
     pify "^3.0.0"
 
+pbf@3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/pbf/-/pbf-3.1.0.tgz#f70004badcb281761eabb1e76c92f179f08189e9"
+  dependencies:
+    ieee754 "^1.1.6"
+    resolve-protobuf-schema "^2.0.0"
+
 pbkdf2@^3.0.3:
   version "3.0.16"
   resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.0.16.tgz#7404208ec6b01b62d85bf83853a8064f8d9c2a5c"
@@ -6131,6 +6150,10 @@
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
 
+pixelworks@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/pixelworks/-/pixelworks-1.1.0.tgz#1f095ad48dca8bf8a1c8258e0092031a44f22ca5"
+
 pkg-dir@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-1.0.0.tgz#7a4b508a8d5bb2d629d447056ff4e9c9314cf3d4"
@@ -6520,6 +6543,10 @@
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/proto-list/-/proto-list-1.2.4.tgz#212d5bfe1318306a420f6402b8e26ff39647a849"
 
+protocol-buffers-schema@^2.0.2:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/protocol-buffers-schema/-/protocol-buffers-schema-2.2.0.tgz#d29c6cd73fb655978fb6989691180db844119f61"
+
 proxy-addr@~2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.3.tgz#355f262505a621646b3130a728eb647e22055341"
@@ -6615,6 +6642,10 @@
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.0.0.tgz#fa3ed6e68eb15159457c89b37bc6472833195755"
 
+quickselect@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/quickselect/-/quickselect-1.1.1.tgz#852e412ce418f237ad5b660d70cffac647ae94c2"
+
 randomatic@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-3.0.0.tgz#d35490030eb4f7578de292ce6dfb04a91a128923"
@@ -6649,6 +6680,12 @@
     iconv-lite "0.4.19"
     unpipe "1.0.0"
 
+rbush@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/rbush/-/rbush-2.0.1.tgz#4cfaca28c3064bc0ee75431a1b79990e875eefa9"
+  dependencies:
+    quickselect "^1.0.0"
+
 rc@^1.1.7:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
@@ -6974,6 +7011,12 @@
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"
 
+resolve-protobuf-schema@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-protobuf-schema/-/resolve-protobuf-schema-2.0.0.tgz#e67b062a67f02d11bd6886e70efda788407e0fb4"
+  dependencies:
+    protocol-buffers-schema "^2.0.2"
+
 resolve-url@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"