Mercurial > gemma
changeset 519:6a29ad5a36cf
refac: Map component converted to vue component.
Map is now a vue-component with parametrized lat, long, zoom
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Mon, 27 Aug 2018 16:39:58 +0200 |
parents | 02082327f1e2 |
children | e5dab193207a |
files | client/src/components/Map.jsx client/src/components/Map.vue client/src/views/Main.vue |
diffstat | 3 files changed, 50 insertions(+), 51 deletions(-) [+] |
line wrap: on
line diff
--- 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 - }) - }); - } -};
--- /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>
--- 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>