Closed aliraza944 closed 1 year ago
Please leave a minimum reproduction using the playground
Please leave a minimum reproduction using the playground
I have added my code to the playground. You can clearly see that it does not changes the latLang
I am trying to print. Also the popup dose not shift from the one polygon to another very often.
Please save a copy and provide a link. Any changes you make do not reflect on the original playground
Please save a copy and provide a link. Any changes you make do not reflect on the original playground
Sorry forgot here is the link https://stackblitz.com/edit/github-hunxbd-hw7dfm?file=playground%2Fpages%2Findex.vue
There are a couple different problems here. For one, the html inside the popup cannot be reactive at the moment (similar issue to #38), I am hoping to have a workaround for both of these issues at some point. However, the only way to actually update the html right now is to replace the html string in the popup instance with setHTML
on the popup instance (see #38 for accessing the popup instance).
As for the "slow" updating, that is because mouseover
event is only called when you initially hover over a polygon. If you want handleMouseMove
every time the mouse moves you should use mousemove
instead.
The internal $mapboxPopupInstances
is returning undefined. Can you please share an example with the defineMapboxPopup
cause I don't know where to set its templateRef. I couldn't quite understand it from the DOCS
Make sure you are accessing $mapboxPopupInstances
after the map is loaded, the popup will not be created at setup
templateRef
in defineMapboxPopup
is a ref for HTML you want to put inside the popup. https://vuejs.org/guide/essentials/template-refs.html
So the ref will be assigned to the MapboxDefaultPopup
component?
No the ref will be assigned to whatever HTML you want to add to the popup. If you are using defineMapboxPopup
, you can no longer use the default MapboxDefaultPopup
component, you have to make your own component.
I highly recommend using the default popup instead and accessing the instance with $mapboxPopupInstances
. Make sure you are indexing the correct popup ID, and you access the popup instance after the map load (useMapbox
callback should work for this).
Fixed in #45
My Problem
I have a
MapboxLayer
of some geo JSON data containing properties that I want to show on theMapboxDefaultPopup
. I have added an event listener calledMouseover
on the layer. As the mouse moves from one polygon to another I want to show the properties on the popup of that polygon on which the mouse is hovering.It only shows the default popup with just one polygon and does not display for the other.
My Code
Here is the
MapboxLayer
that I have implementedThe popup component has dynamic lat langs based on the mouse position
My handleMouseMove function just sets the lat langs for the popup
Desired Outcome
I want to show the popup dynamically for the polygon on which the mouse pointer is.