1

I have a basic openlayers map in a vue component:

<template>
  <div id="map" style="width: 300px; height: 200px;"></div>
</template>

<script>
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';
import OSM from 'ol/source/OSM.js';
export default {
  mounted() {
     var map = new Map({
        layers: [
          new TileLayer({
            source: new OSM(),
          }),
        ],
        target: 'map',
        view: new View({
          center: [0, 0],
          zoom: 2,
        }),
      });
  },
};
</script>

Now I would like to reuse this component on multiple pages on my SPA, because I would like to avoid the tiles reloading and maintain features on the map. Normally (if not a map, but just general data) I could just remain the data state in a vuex store or alike, but since this openlayers object is bound to this specific 'map' div, I can´t see that it is possible. I´ve tried the vue element, but no luck. So how to get around this?

Farsen
  • 1,387
  • 3
  • 21
  • 48
  • 1
    You can move a map between divs https://openlayers.org/en/latest/examples/teleport.html – Mike Jun 12 '19 at 22:04
  • Ah, teleport, never thought of that! I was thinking of a vue-like solution. Thanks! – Farsen Jun 13 '19 at 04:34
  • What about keeping it as a parent component and showing all other as childs? – Assassin Jun 13 '19 at 09:38
  • Can you please elaborate this @SzymonSasin, or maybe an example? – Farsen Jun 13 '19 at 13:28
  • ... and actually I cannot use the teleport solution as @Mike suggested, since the openlayers I use is wrapped in another component which creates an overlay on the Openlayers map. So while this teleport solution is great, I cannot use it for my purpose. Instead i need to make this component move to different places in the DOM in some way. – Farsen Jun 13 '19 at 13:31

0 Answers0