view client/src/components/Map.jsx @ 277:807efc83e507

fix: Sidebar is now positioned above Map Having the map layer and the sidebar together in documentflow leads to ugly distortion of map after minimizing sidebar. In order to prevent such distortion, the sidebar is now positioned absolute. See issue 28.
author Thomas Junk <thomas.junk@intevation.de>
date Mon, 30 Jul 2018 13:31:35 +0200
parents 89f1aa33adcf
children 27502291e564
line wrap: on
line source

/*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
      })
    });
  }
};