Application Wide Problem

[1Map]

Currently I am doing:

import OpenLayersMap from 'vue3-openlayers'
app.use(OpenLayersMap)

This make sure Openlayers is available across my App. But, the problem is that I have routes and openlayers is only used in certain routes. So, for example: If a user visits route A (Which does not use openlayers) then vue3-openlayers loads unnecessary and unneeded js on that page. I just want openlayers to be used for Route B and only loaded there and then.

I tried the import outside main.ts and only in the route vue for Route B, but then the map does not get drawn.

How can this be achieved?

[209]

You can join to my PR and add this functionality.

#149

[1Map]

I have fixed this by doing the following on my single page (where I want Openlayers to be used):

<script>
.....
import OpenLayersMap from 'vue3-openlayers'
import 'vue3-openlayers/dist/vue3-openlayers.css'
.....
export default {
    .....
    created() {
        if (!this.$.appContext.app.config.globalProperties.$openlayersLoaded) {
            OpenLayersMap(this.$.appContext.app)
            this.$.appContext.app.config.globalProperties.$openlayersLoaded = true
        }
        .....
    },
    .....
}
</script>
<template>
    .....
    <ol-map
        :loadTilesWhileAnimating="true"
        :loadTilesWhileInteracting="true"
        style="height: 400px"
    >
        <ol-view
            ref="view"
            :center="olcenter"
            :rotation="rotation"
            :zoom="zoom"
            :projection="projection"
        />
        <ol-fullscreen-control
            v-if="fullscreencontrol"
        />
        <ol-mouseposition-control
            v-if="mousepositioncontrol"
        />
        <ol-attribution-control
            v-if="attributioncontrol"
            collapsible="true"
        />
        <ol-rotate-control
            v-if="rotatecontrol"
            autoHide="true"
        />
        <ol-zoom-control v-if="zoomcontrol" />
        <ol-zoomslider-control
            v-if="zoomslidercontrol"
        />
        <ol-tile-layer>
            <ol-source-osm />
        </ol-tile-layer>
    </ol-map>
    .....
</template>

[MelihAltintas]

You can import like that:

https://codesandbox.io/s/nameless-haze-n9ozfm?file=/src/App.vue:0-609

<template>
  <ol-map
    :loadTilesWhileAnimating="true"
    :loadTilesWhileInteracting="true"
    style="height: 400px"
  >
    <ol-view ref="view" :center="[40, 40]" :rotation="0" :zoom="8" />

    <ol-tile-layer>
      <ol-source-osm />
    </ol-tile-layer>
  </ol-map>
</template>

<script>
import { Map, MapControls, Layers, Sources } from "vue3-openlayers";

import "vue3-openlayers/dist/vue3-openlayers.css";

export default {
  name: "App",
  components: {
    "ol-map": Map.Map,
    "ol-view": Map.View,
    "ol-tile-layer": Layers.TileLayer,
    "ol-source-osm": Sources.SourceOSM,
  },
};
</script>

[1Map]

@MelihAltintas Thanks. This also works 100%. Except for the ol-rotate-control.
The autoHide="true" does not work on that. If I rotate the map, the reset to north button does not show.

I see that they forgot to export the RotateControl in:

https://github.com/MelihAltintas/vue3-openlayers/blob/main/src/components/mapControls/index.js

at the bottom:

export {
    install,
    FullScreenControl,
    MousePositionControl,
    AttributionControl,
    OverviewMapControl,
    ScaleLineControl,
    ZoomControl,
    ZoomSliderControl,
    ZoomToExtentControl,
    ContextMenuControl,
    SwipeControl,
    ControlBar,
    ToggleControl,
    ButtonControl,
    PrintDialog,
    VideoRecorderControl,
    LayerSwitcherControl,
    LayerSwitcherImageControl,
    ZoneControl
  }

[1Map]

@MelihAltintas Just a follow up on my comment above:

See: https://codesandbox.io/s/happy-babbage-k1w3xu?file=/src/App.vue

Use Shift+Alt+Drag to rotate the map - No "reset to north" button is displayed - Because of issue as described above

[1Map]

@MelihAltintas Did you receive my 2 replies above?