in a Vue/OL app, show a circle at location after zooming in

Question

In my Vue app there is a button that, when clicked, zooms to the current location. The zoom is animated, and once the animation is finished, a circle should be added to the current location, which is not working at the moment.

Aside from the OL documentation I consulted specifically these sources:

This one helped me to setup "vanilla" OpenLayers in Vue: https://dev.to/camptocamp-geo/integrating-an-openlayers-map-in-vue-js-a-step-by-step-guide-2n1p

This original OL 6.5 example shows code that is used to draw a circle at the current location: https://openlayers.org/en/latest/examples/geolocation.html

I have troubles to "translate" the OL example code to Vue.

This are the main code lines that (I think) should actually do the job:

// MapContainer.vue => export defaults {
data() {
  return {
    positionFeature: new Feature(),
    circle: new Style({
      image: new CircleStyle({
        radius: 12,
        fill: new Fill({
          color: '#FF0000'
        }),
        stroke: new Stroke({
          color: '#fff',
          width: 12
        })
      })
    })
  }
},
mounted() {
    // Assign style to positionFeature
    this.positionFeature.setStyle(this.circle)

    this.vectorLayer = new VectorLayer({
      source: new VectorSource({
        // features: [this.positionFeature] // <== DOES NOT WORK
        features: []
      })
    })

    this.tileLayer = new TileLayer({ source: new OSM() })

    this.olMap = new Map({
      target: this.$refs['map-root'],
      layers: [ this.tileLayer, this.vectorLayer ],
      view: this.view
    })
},
methods: {
  zoomToCurrentLocation () {
    const view = this.olMap.getView()
    view.animate({
      center: fromLonLat([...]),
      zoom: 16,
      duration: 1000
    }, this.cb_viewAnimate)
  },
  cb_viewAnimate () {
    this.createPointAtCurrentLocation()
  },
  createPointAtCurrentLocation () {
    // Get coordinates from geolocation
    /* const coordinates = this.geolocation.getPosition(); */

    // For testing purposes provide coordinates "manually":
    const coordinates = [16.3807232, 48.1918976];
    const point = new Point(coordinates);
    console.log("point =", point);

    this.positionFeature.setGeometry(              //
      coordinates ? point : null                   // 
    );                                             // <== DOES NOT WORK
    const source = this.vectorLayer.getSource()    //
    source.addFeatures(this.positionFeature)       //
  }
} 

The idea is to setup the positionFeature and its assigned style during Vue's "mounted()" live-cycle state. Just for testing purposes I assign the positionFeature to the VectorLayer => VectorSource right away in "mounted()" as well. But that does not work either (probably because no Point was passed along, but I would expect OL to fall bak to [0,0] then - am I wrong?).

The real goal, however, is to assign the point only, once the animation of the View is finished by calling the createPointAtCurrentLocation function in View's animate callback. Various "console.logs" (not shown here) tell me that the functions are indeed called and a positionFeature is assigned. However, there is nothing to see on the map.

I prepared a minimal Codesandbox example here: https://codesandbox.io/s/openlayers-circle-at-current-location-37rw0?file=/src/components/MapContainer.vue:3373-3759

What am I doing wrong?

Answer 1

OpenLayers geolocationn will return coordinates in view projection, but for your test data you will need to transform the Lon/Lat yourself:

const coordinates = fromLonLat([16.3807232, 48.1918976]);

You also need tracking: true in the Geolocation options to enable geolocation at startup (or you could enable it later using this.geolocation.setTracking(true);).