# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1535380798 -7200
# Node ID 6a29ad5a36cfc1fd6ac09a2d7b799bf16561a6da
# Parent  02082327f1e28d75a5b8094b902d3ea77e02a028
refac: Map component converted to vue component.

Map is now a vue-component with parametrized lat, long, zoom

diff -r 02082327f1e2 -r 6a29ad5a36cf client/src/components/Map.jsx
--- a/client/src/components/Map.jsx	Mon Aug 27 16:16:08 2018 +0200
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,50 +0,0 @@
-/**
- * Map comonent and integration point with open layers
- * Currently JSX was chosen to have more programmatic control
- * over resulting HTML
- *
- * May change in the future
- *
- */
-
-/*eslint no-unused-vars: ["error", { "args": "none" }]*/
-import "ol/ol.css";
-import { Map, View } from "ol";
-import TileLayer from "ol/layer/Tile";
-import OSM from "ol/source/OSM";
-import TileWMS from "ol/source/TileWMS.js";
-
-export default {
-  render(h) {
-    return <div id="map" />;
-  },
-  data() {
-    return {
-      lat: 6155376,
-      long: 1819178,
-      zoom: 11,
-      projection: "EPSG:3857"
-    };
-  },
-  mounted() {
-    new Map({
-      layers: [
-        new TileLayer({
-          source: new OSM()
-        }),
-        new TileLayer({
-          source: new TileWMS({
-            url: "https://demo.d4d-portal.info/wms",
-            params: { LAYERS: "d4d", VERSION: "1.1.1", TILED: true }
-          })
-        })
-      ],
-      target: "map",
-      view: new View({
-        center: [this.long, this.lat],
-        zoom: this.zoom,
-        projection: this.projection
-      })
-    });
-  }
-};
diff -r 02082327f1e2 -r 6a29ad5a36cf client/src/components/Map.vue
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/Map.vue	Mon Aug 27 16:39:58 2018 +0200
@@ -0,0 +1,46 @@
+<template>
+  <div id="map"></div>  
+</template>
+
+<style lang="sass">
+
+</style>
+
+<script>
+import "ol/ol.css";
+import { Map, View } from "ol";
+import TileLayer from "ol/layer/Tile";
+import OSM from "ol/source/OSM";
+import TileWMS from "ol/source/TileWMS.js";
+
+export default {
+  name: "map",
+  props: ["lat", "long", "zoom"],
+  data() {
+    return {
+      projection: "EPSG:3857"
+    };
+  },
+  mounted() {
+    new Map({
+      layers: [
+        new TileLayer({
+          source: new OSM()
+        }),
+        new TileLayer({
+          source: new TileWMS({
+            url: "https://demo.d4d-portal.info/wms",
+            params: { LAYERS: "d4d", VERSION: "1.1.1", TILED: true }
+          })
+        })
+      ],
+      target: "map",
+      view: new View({
+        center: [this.long, this.lat],
+        zoom: this.zoom,
+        projection: this.projection
+      })
+    });
+  }
+};
+</script>
diff -r 02082327f1e2 -r 6a29ad5a36cf client/src/views/Main.vue
--- a/client/src/views/Main.vue	Mon Aug 27 16:16:08 2018 +0200
+++ b/client/src/views/Main.vue	Mon Aug 27 16:39:58 2018 +0200
@@ -1,7 +1,10 @@
 <template>
   <div class="main d-flex">
     <Sidebar v-bind:isOverlay="true"></Sidebar>
-    <Map></Map>
+    <Map :lat="6155376"
+      :long="1819178"
+      :zoom="11"
+    ></Map>
   </div>
 </template>