0

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?

6
  • 1
    OpenLayers geolocationn will return cordinates in view projection, but for your test data you will need to transform the Lon/Lat yourself const coordinates = fromLonLat([16.3807232, 48.1918976]); – Mike Feb 15 at 11:50
  • Thank you very much! I could fix the manual coordinates that way! Awesome! – However, when using geolocation.getPosition(), undefined is returned... Why is that? – Robert Wildling Feb 15 at 12:07
  • Using async await does not get rid of the problem either... – Robert Wildling Feb 15 at 12:13
  • 1
    You need tracking: true in the Geolocation options to enable geolocation at startup – Mike Feb 15 at 15:00
  • That indeed solves the problem! Thank you so much, Mike! - Any chance to motivate you to post your comments as real answer? Then I could upvote your input! – Robert Wildling Feb 16 at 10:05
2

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);).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.