ghettovoice / vuelayers

Web map Vue components with the power of OpenLayers
https://vuelayers.github.io/
MIT License
680 stars 227 forks source link

How to get current view extent ? #337

Closed signmeuptwice closed 3 years ago

signmeuptwice commented 4 years ago

I would like to get the current vl-view extent but not sure how to do it or if it is possible; can't find anything in the docs.

That would be great so I can create boundaries for my SQL request.

ghettovoice commented 4 years ago

Hello @signmeuptwice , bind a ref to the vl-view and then you can get extent with this.$refs.view.$view.getExtent. But take a note that extent will be in view projection (usually EPSG:3857).

If you need view extent to load vector data only inside visible map area, there is more easy way to achieve this.

<template>
  <vl-source-vector : strategy-factory="loadingStrategy" />
</template>

<script>
import { bbox } from 'ol/loadingstrategy'

export default {
  methods: {
    loadingStrategy () {
      return bbox // loads current view extent
    }
  }
}
</script>
signmeuptwice commented 4 years ago

Hi @ghettovoice, thank you for the quick reply

I tried this.$refs.myRef.$view.getExtent but I get undefined I also tried this.$refs.myRef.$view.getExtent() but it returns not a function

then I tried this.$refs.myRef.$view.projection_.extent_ but the values are never updated so Im thinking there is an update issue.. ?

I also tried {.bbox} but had to change it to {bbox} then changed your code to <vl-source-vector :strategy-factory="loadingStrategy" /> for it to compile then console logging bbox does not give me anything

I don't think the bbox thing is the right solution. What I am looking to get is just the coordinates of the four corners of the current view and it to be updated after zoom, move, etc... So I need to get the extent and convert it to coordinates ?

ghettovoice commented 4 years ago

Take look here https://jsfiddle.net/ghettovoice/nLmq5vux/

signmeuptwice commented 4 years ago

Thank you so much !!

No time right now but I’ll take a look at it in the next days and let you know.

Would be great to see this as a native feature in a future update :)

Best regards, Edouard

On 29 Jul 2020, at 11:37, Vladimir Vershinin notifications@github.com wrote:

Take look here https://jsfiddle.net/ghettovoice/nLmq5vux/ https://jsfiddle.net/ghettovoice/nLmq5vux/ — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ghettovoice/vuelayers/issues/337#issuecomment-665556082, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEPDGX3RNMWBFNTQTJ5NPJTR57UVLANCNFSM4ORRYBNQ.

signmeuptwice commented 4 years ago

Hi,

Thanks for the help.

In order to make it work I had to copy locally and import the entire ol.js file which is 650kb ! So pretty big for a single function on the homepage :(( weback is also complaining about size.

Ideally I would need to just import the function and looking at the ol code in node modules it looks like the functions are exported however trying to import the function (import transformExtent from '../../../js/ol/ol.js’) gives VL-VIEW errors:

[Error] [Vue warn]: Error in v-on handler: "TypeError: _js_ol_ol_jsWEBPACK_IMPORTED_MODULE4default() is not a function. (In '_js_ol_ol_jsWEBPACK_IMPORTED_MODULE4default()(olView.calculateExtent(), 'EPSG:3857', 'EPSG:4326')', '_js_ol_ol_jsWEBPACK_IMPORTED_MODULE4default()' is an instance of Object)"

found in

---> at view.vue

at map.vue at src/vue/component/home/latest-events.vue at src/vue/component/home/home.vue warn (vue-d9bd3e30d8903d038bd3.js:12193) logError (vue-d9bd3e30d8903d038bd3.js:13456) globalHandleError (vue-d9bd3e30d8903d038bd3.js:13451) handleError (vue-d9bd3e30d8903d038bd3.js:13411) invokeWithErrorHandling (vue-d9bd3e30d8903d038bd3.js:13434) invokeWithErrorHandling (vue-d9bd3e30d8903d038bd3.js:13426) (anonymous function) (vue-d9bd3e30d8903d038bd3.js:15455) (anonymous function) (18-d9bd3e30d8903d038bd3.js:31455) promiseReactionJob [Error] TypeError: _js_ol_ol_js__WEBPACK_IMPORTED_MODULE_4___default() is not a function. (In '_js_ol_ol_js__WEBPACK_IMPORTED_MODULE_4___default()(olView.calculateExtent(), 'EPSG:3857', 'EPSG:4326')', '_js_ol_ol_js__WEBPACK_IMPORTED_MODULE_4___default()' is an instance of Object) — latest-events.vue:296 logError (vue-d9bd3e30d8903d038bd3.js:13460) globalHandleError (vue-d9bd3e30d8903d038bd3.js:13451) handleError (vue-d9bd3e30d8903d038bd3.js:13411) invokeWithErrorHandling (vue-d9bd3e30d8903d038bd3.js:13434) invokeWithErrorHandling (vue-d9bd3e30d8903d038bd3.js:13426) (anonymous function) (vue-d9bd3e30d8903d038bd3.js:15455) (anonymous function) (18-d9bd3e30d8903d038bd3.js:31455) promiseReactionJob [Error] [Vue warn]: Error in callback for watcher "zoom": "TypeError: _js_ol_ol_js__WEBPACK_IMPORTED_MODULE_4___default() is not a function. (In '_js_ol_ol_js__WEBPACK_IMPORTED_MODULE_4___default()(olView.calculateExtent(), 'EPSG:3857', 'EPSG:4326')', '_js_ol_ol_js__WEBPACK_IMPORTED_MODULE_4___default()' is an instance of Object)" found in ---> at src/vue/component/home/latest-events.vue at src/vue/component/home/home.vue warn (vue-d9bd3e30d8903d038bd3.js:12193) logError (vue-d9bd3e30d8903d038bd3.js:13456) globalHandleError (vue-d9bd3e30d8903d038bd3.js:13451) handleError (vue-d9bd3e30d8903d038bd3.js:13411) run (vue-d9bd3e30d8903d038bd3.js:16137) flushSchedulerQueue (vue-d9bd3e30d8903d038bd3.js:15877) (anonymous function) (vue-d9bd3e30d8903d038bd3.js:13552) flushCallbacks (vue-d9bd3e30d8903d038bd3.js:13478) promiseReactionJob [Error] TypeError: _js_ol_ol_js__WEBPACK_IMPORTED_MODULE_4___default() is not a function. (In '_js_ol_ol_js__WEBPACK_IMPORTED_MODULE_4___default()(olView.calculateExtent(), 'EPSG:3857', 'EPSG:4326')', '_js_ol_ol_js__WEBPACK_IMPORTED_MODULE_4___default()' is an instance of Object) — latest-events.vue:296 logError (vue-d9bd3e30d8903d038bd3.js:13460) globalHandleError (vue-d9bd3e30d8903d038bd3.js:13451) handleError (vue-d9bd3e30d8903d038bd3.js:13411) run (vue-d9bd3e30d8903d038bd3.js:16137) flushSchedulerQueue (vue-d9bd3e30d8903d038bd3.js:15877) (anonymous function) (vue-d9bd3e30d8903d038bd3.js:13552) flushCallbacks (vue-d9bd3e30d8903d038bd3.js:13478) promiseReactionJob [Error] [Vue warn]: Error in callback for watcher "center": "TypeError: _js_ol_ol_js__WEBPACK_IMPORTED_MODULE_4___default() is not a function. (In '_js_ol_ol_js__WEBPACK_IMPORTED_MODULE_4___default()(olView.calculateExtent(), 'EPSG:3857', 'EPSG:4326')', '_js_ol_ol_js__WEBPACK_IMPORTED_MODULE_4___default()' is an instance of Object)" found in ---> at src/vue/component/home/latest-events.vue at src/vue/component/home/home.vue warn (vue-d9bd3e30d8903d038bd3.js:12193) logError (vue-d9bd3e30d8903d038bd3.js:13456) globalHandleError (vue-d9bd3e30d8903d038bd3.js:13451) handleError (vue-d9bd3e30d8903d038bd3.js:13411) run (vue-d9bd3e30d8903d038bd3.js:16137) flushSchedulerQueue (vue-d9bd3e30d8903d038bd3.js:15877) (anonymous function) (vue-d9bd3e30d8903d038bd3.js:13552) flushCallbacks (vue-d9bd3e30d8903d038bd3.js:13478) promiseReactionJob [Error] TypeError: _js_ol_ol_js__WEBPACK_IMPORTED_MODULE_4___default() is not a function. (In '_js_ol_ol_js__WEBPACK_IMPORTED_MODULE_4___default()(olView.calculateExtent(), 'EPSG:3857', 'EPSG:4326')', '_js_ol_ol_js__WEBPACK_IMPORTED_MODULE_4___default()' is an instance of Object) — latest-events.vue:296 logError (vue-d9bd3e30d8903d038bd3.js:13460) globalHandleError (vue-d9bd3e30d8903d038bd3.js:13451) handleError (vue-d9bd3e30d8903d038bd3.js:13411) run (vue-d9bd3e30d8903d038bd3.js:16137) flushSchedulerQueue (vue-d9bd3e30d8903d038bd3.js:15877) (anonymous function) (vue-d9bd3e30d8903d038bd3.js:13552) flushCallbacks (vue-d9bd3e30d8903d038bd3.js:13478) promiseReactionJob [Error] [Vue warn]: Error in callback for watcher "coordinates": "TypeError: _js_ol_ol_js__WEBPACK_IMPORTED_MODULE_4___default() is not a function. (In '_js_ol_ol_js__WEBPACK_IMPORTED_MODULE_4___default()(olView.calculateExtent(), 'EPSG:3857', 'EPSG:4326')', '_js_ol_ol_js__WEBPACK_IMPORTED_MODULE_4___default()' is an instance of Object)" found in ---> at src/vue/component/home/latest-events.vue at src/vue/component/home/home.vue warn (vue-d9bd3e30d8903d038bd3.js:12193) logError (vue-d9bd3e30d8903d038bd3.js:13456) globalHandleError (vue-d9bd3e30d8903d038bd3.js:13451) handleError (vue-d9bd3e30d8903d038bd3.js:13411) run (vue-d9bd3e30d8903d038bd3.js:16137) flushSchedulerQueue (vue-d9bd3e30d8903d038bd3.js:15877) (anonymous function) (vue-d9bd3e30d8903d038bd3.js:13552) flushCallbacks (vue-d9bd3e30d8903d038bd3.js:13478) promiseReactionJob [Error] TypeError: _js_ol_ol_js__WEBPACK_IMPORTED_MODULE_4___default() is not a function. (In '_js_ol_ol_js__WEBPACK_IMPORTED_MODULE_4___default()(olView.calculateExtent(), 'EPSG:3857', 'EPSG:4326')', '_js_ol_ol_js__WEBPACK_IMPORTED_MODULE_4___default()' is an instance of Object) — latest-events.vue:296 logError (vue-d9bd3e30d8903d038bd3.js:13460) globalHandleError (vue-d9bd3e30d8903d038bd3.js:13451) handleError (vue-d9bd3e30d8903d038bd3.js:13411) run (vue-d9bd3e30d8903d038bd3.js:16137) flushSchedulerQueue (vue-d9bd3e30d8903d038bd3.js:15877) (anonymous function) (vue-d9bd3e30d8903d038bd3.js:13552) flushCallbacks (vue-d9bd3e30d8903d038bd3.js:13478) promiseReactionJob > On 29 Jul 2020, at 11:41, Edouard Camou wrote: > > Thank you so much !! > > No time right now but I’ll take a look at it in the next days and let you know. > > Would be great to see this as a native feature in a future update :) > > Best regards, > Edouard > >> On 29 Jul 2020, at 11:37, Vladimir Vershinin wrote: >> >> >> Take look here https://jsfiddle.net/ghettovoice/nLmq5vux/ >> >> — >> You are receiving this because you were mentioned. >> Reply to this email directly, view it on GitHub, or unsubscribe. >> >
ghettovoice commented 4 years ago

You should be able to import it like this:

import { transformExtent } from 'ol/proj'
signmeuptwice commented 4 years ago

Yes that works; damn I was so close… just the {} missing. Thanks for that.

Sorry to be a pain, hopefully you could help me on this too,

On the same map I am using this view extend; I am using this extent to display events in the area.

However the location of the event moves as I zoom; It is never on the right position unless zoomed maximum. Can you have a look ?

Here is my code:

https://gist.github.com/signmeuptwice/5480c8a6d298c33a502cd531b09bfb23

On 2 Sep 2020, at 16:41, Vladimir Vershinin notifications@github.com wrote:

import { transformExtent } from 'ol/proj'

ghettovoice commented 4 years ago

Hmm, I don't see any errors in your code. I see that you use vl-overlay, if d.longitude, d.latitude are correct coordinates, then it's top left corner(default positioning) should point exactly to this coordinate, regardless of view zoom, center, any other things.

Can you catch screen video with this issue?

signmeuptwice commented 4 years ago

Can’t take videos but here are some screenshots:

On 2 Sep 2020, at 17:25, Vladimir Vershinin notifications@github.com wrote:

Hmm, I don't see any errors in your code. I see that you use vl-overlay, if d.longitude, d.latitude are correct coordinates, then it's top left corner(default positioning) should point exactly to this coordinate, regardless of view zoom, center, any other things.

Can you catch screen video with this issue?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ghettovoice/vuelayers/issues/337#issuecomment-685810331, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEPDGX7ORAJZTOLGQ5EP4T3SDZPVJANCNFSM4ORRYBNQ.

signmeuptwice commented 4 years ago

If I move the map the points are fixed

They move when I zoom more closer to their real location

On 2 Sep 2020, at 17:25, Vladimir Vershinin notifications@github.com wrote:

Hmm, I don't see any errors in your code. I see that you use vl-overlay, if d.longitude, d.latitude are correct coordinates, then it's top left corner(default positioning) should point exactly to this coordinate, regardless of view zoom, center, any other things.

Can you catch screen video with this issue?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ghettovoice/vuelayers/issues/337#issuecomment-685810331, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEPDGX7ORAJZTOLGQ5EP4T3SDZPVJANCNFSM4ORRYBNQ.

ghettovoice commented 4 years ago

Can’t take videos but here are some screenshots:

Don't see any screenshots...

signmeuptwice commented 4 years ago

Really ??

And now ?

On 2 Sep 2020, at 17:38, Vladimir Vershinin notifications@github.com wrote:

Can’t take videos but here are some screenshots:

Don't see any screenshots...

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ghettovoice/vuelayers/issues/337#issuecomment-685819532, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEPDGX7QVMKNJJPT3SR7SFDSDZRIRANCNFSM4ORRYBNQ.

ghettovoice commented 4 years ago
Снимок экрана 2020-09-02 в 18 43 20
ghettovoice commented 4 years ago

You can send them to the ghettovoice@gmail.com

signmeuptwice commented 4 years ago

Sent to your email

On 2 Sep 2020, at 17:44, Vladimir Vershinin notifications@github.com wrote:

You can send them to the ghettovoice@gmail.com mailto:ghettovoice@gmail.com — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ghettovoice/vuelayers/issues/337#issuecomment-685823145, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEPDGXZCTKXBZCIXGDCOBPTSDZR55ANCNFSM4ORRYBNQ.

ghettovoice commented 4 years ago

If I'm correctly understand, you reload data on each zoom. Do you confirm that this 2 features from screenshots have same coordinates on each reload?

signmeuptwice commented 4 years ago

Yes, as the gist shows every time something changes, I have a timeout that triggers a data reload.

I double checked and yes same coordinates

On 2 Sep 2020, at 17:51, Vladimir Vershinin notifications@github.com wrote:

If I'm correctly understand, you reload data on each zoom. Do you confirm that this 2 features from screenshots have same coordinates on each reload?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ghettovoice/vuelayers/issues/337#issuecomment-685827516, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEPDGX7JBH2YHGLLPPL2NM3SDZSZPANCNFSM4ORRYBNQ.

ghettovoice commented 4 years ago

Frankly speaking I'm not fully understand from screenshots where is vl-overlay on them. Also screenshots showing two points, but I see in the gist that vl-geom-line-string used with vl-feature. So what is actually green circles on the map?

signmeuptwice commented 4 years ago

Green circles are events locations on the map

The overlay has this position where d is an event :position="[d.longitude, d.latitude]"

On 2 Sep 2020, at 17:44, Vladimir Vershinin notifications@github.com wrote:

You can send them to the ghettovoice@gmail.com mailto:ghettovoice@gmail.com — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ghettovoice/vuelayers/issues/337#issuecomment-685823145, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEPDGXZCTKXBZCIXGDCOBPTSDZR55ANCNFSM4ORRYBNQ.

ghettovoice commented 4 years ago

If I'm correctly understand your use case: you need to show some additional data by clicking on the event feature. So I propose more easier way to achieve this https://jsfiddle.net/ghettovoice/mu59o2yj/

signmeuptwice commented 4 years ago

No

my problem is that the dots are not displayed at the correct coordinates.

You see they move to different location when I zoom

On 2 Sep 2020, at 18:16, Vladimir Vershinin notifications@github.com wrote:

If I'm correctly understand your use case: you need to show some additional data by clicking on the event feature. So propose more easier way to achieve this https://jsfiddle.net/ghettovoice/mu59o2yj/ https://jsfiddle.net/ghettovoice/mu59o2yj/ — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ghettovoice/vuelayers/issues/337#issuecomment-685842915, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEPDGX4KYXMALCJXRSDLKQTSDZVXHANCNFSM4ORRYBNQ.

ghettovoice commented 4 years ago

I guess that green dots are spans inside vl-overlay. I'm not see any vector feature styles in your example. And how this span positioned inside vl-overlay out of the scope of the VueLayers.

Anyway using vl-overlay in this way looks for me a bit unusual use of vl-overlay. So I show you in the demo how to achieve same functionality. To show event dots you only need vector layer and source, to which you pass an array of loaded event features (encoded in GeoJSON format). To catch the event select and react on this you can use vl-interaction-select that can sync selected features to some data property. Then just use Vue wather, prepare data, show vl-overlay as event popup, or show additional layer with event lines (vl-feature vl-geom-line-string in your gist). Take a look at this demo https://jsfiddle.net/ghettovoice/mu59o2yj/ (updated with additional event lines layer)

ghettovoice commented 4 years ago

my problem is that the dots are not displayed at the correct coordinates.

Because they are not features (see above). As you can see in the demo two points are alway at the same location at any zoom. And even their coordinates will be removed with the same coordinates, they still will be at the same position.

signmeuptwice commented 4 years ago

Thanks, ill have a look,

It is not possible to send you video, your server refuses files too big

My video is 5.9M; that is not big...

On 2 Sep 2020, at 18:33, Vladimir Vershinin notifications@github.com wrote:

my problem is that the dots are not displayed at the correct coordinates.

Because they are not features (see above). As you can see in the demo two points are alway at the same location at any zoom. And even their coordinates will be removed with the same coordinates, they still will be at the same position.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ghettovoice/vuelayers/issues/337#issuecomment-685853500, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEPDGXYMBK4IX6KCXYUJPU3SDZXUBANCNFSM4ORRYBNQ.

ghettovoice commented 4 years ago

It is not possible to send you video, your server refuses files too big

This is gmail. Maybe it have some restrictions on this. Do you have google drive? Can you share though it?

signmeuptwice commented 4 years ago

That’s ok it went through now

On 2 Sep 2020, at 18:38, Vladimir Vershinin notifications@github.com wrote:

It is not possible to send you video, your server refuses files too big

This is gmail. Maybe it have some restrictions on this. Do you have google drive? Can you share though it?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ghettovoice/vuelayers/issues/337#issuecomment-685856893, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEPDGXYBPYHDRMO4N4PL67DSDZYJ3ANCNFSM4ORRYBNQ.

ghettovoice commented 4 years ago

Try to temporary replace <vl-overlay>...</vl-overlay> in your code with this.

<vl-feature
  v-if="uid"
  v-for="(d, index) in data"
  :id="'data-'+uid+index"
  :key="'data-'+uid+index"
>
  <vl-geom-point :coordinates="[d.longitude, d.latitude]" />
</vl-feature>

You should see this two points in the correct place on any zoom

signmeuptwice commented 4 years ago

Sorry but replace … ?

On 2 Sep 2020, at 18:58, Vladimir Vershinin notifications@github.com wrote:

Try to temporary replace ... in your code with this.

<vl-feature v-if="uid" v-for="(d, index) in data" :id="'data-'+uid+index" :key="'data-'+uid+index"

You should see this two points in the correct place on any zoom

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ghettovoice/vuelayers/issues/337#issuecomment-685867773, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEPDGX6PIWPDKDUQZU36DILSDZ2T5ANCNFSM4ORRYBNQ.

signmeuptwice commented 4 years ago

Sorry I got it

Thanks a million; it seems to work !!! :))))

On 2 Sep 2020, at 18:58, Vladimir Vershinin notifications@github.com wrote:

Try to temporary replace ... in your code with this.

<vl-feature v-if="uid" v-for="(d, index) in data" :id="'data-'+uid+index" :key="'data-'+uid+index"

You should see this two points in the correct place on any zoom

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ghettovoice/vuelayers/issues/337#issuecomment-685867773, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEPDGX6PIWPDKDUQZU36DILSDZ2T5ANCNFSM4ORRYBNQ.

ghettovoice commented 4 years ago

Anyway I strongly recommend to not use vl-feature for multiple features, because due to how Vue works with components (they always have some element in the real DOM) they have a performance issues. Also vl-feature not inside vl-source-vector are appended to the internal default map overlay (that is always shown on top of any other normal layers), so they can't be selectable with vl-interaction-select for example. The basic use case for vl-feature not in the vl-source-vector is show some single marker, for example user location, search result pin and so on. To show some set of features, it is recommended to use separate vl-layer-vector/vl-source-vector like in the demo.

signmeuptwice commented 4 years ago

Thank you

I will look at implementing your example.

On 2 Sep 2020, at 19:06, Vladimir Vershinin notifications@github.com wrote:

 Anyway I strongly recommend to not use vl-feature for multiple features, because due to how Vue works with components (they always have some element in the real DOM) they have a performance issues. Also vl-feature not inside vl-source-vector are appended to the internal default map overlay (that is always shown on top of any other normal layers), so they can't be selectable with vl-interaction-select for example. The basic use case for vl-feature not in the vl-source-vector is show some single marker, for example user location, search result pin and so on. To show some set of features, it is recommended to use separate vl-layer-vector/vl-source-vector like in the demo.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

signmeuptwice commented 4 years ago

I implemented vectors as you said. It works great.

Thanks for all your help :)

When the site is up I let you know

On 2 Sep 2020, at 18:31, Vladimir Vershinin notifications@github.com wrote:

I guess that green dots are spans inside vl-overlay. I'm not see any vector feature styles in your example. And how this span positioned inside vl-overlay out of the scope of the VueLayers.

Anyway using vl-overlay in this way looks for me a bit unusual use of vl-overlay. So I show you in the demo how to achieve same functionality. To show event dots you only need vector layer and source, to which you pass an array of loaded event features (encoded in GeoJSON format). To catch the event select and react on this you can use vl-interaction-select that can sync selected features to some data property. Then just use Vue wather, prepare data, show vl-overlay as event popup, or show additional layer with event lines (vl-feature vl-geom-line-string in your gist). Take a look at this demo https://jsfiddle.net/ghettovoice/mu59o2yj/ https://jsfiddle.net/ghettovoice/mu59o2yj/ (updated with additional event lines layer)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ghettovoice/vuelayers/issues/337#issuecomment-685852179, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEPDGX4AI23DVXM36JGOGRTSDZXMRANCNFSM4ORRYBNQ.