GeoJSON popups

[timwis]

Hi! Any advice on approach for GeoJSON popups? Leaflet normally expects you to use onEachFeature along with bindPopup. But then if you want to use a template you have to do something like this (which doesn't quite work anyway). I was hoping to use something like <v-popup>. Any suggestions?

[KoRiGaN]

Hi @timwis,

Theres is a working example on issue #67 to work with GeoJSON features, onEachFeature and bindpopup.

bindpopup ask for the content and you should be able to compile the rendering of your component. Please follow issue #75 which sounds like the same.

Let me know if it helps !

Cheers,

Mickaël

[timwis]

Thanks for the reply @KoRiGaN, but I'm already quite familiar with the two issues you referenced (and even referenced one in my question :P). The trouble with that approach is:

• The example in [help] component inside geojson #75 doesn't actually work; you have to use Vue.extend(ComponentName).$mount().$el instead.
• More importantly, it isn't passed any context from the current component tree, such as this.$route so <router-link> doesn't work.
• I fear memory leaks from it not having any destroy hooks like I assume it normally would if it were part of the <template>

Can you imagine any way we could use <v-popup> and such to put the markup for this in the <template> like for other components?

[KoRiGaN]

The first problem is the correct implementation of a customizable Popup so that it can receive any kind of content (Vue component or Raw HTML). For the moment you can only use raw HTML as it uses the content property to bind popup to a layer nothing more.

I think an alternative would be to compile that raw content property value and then bind the compiled popup content. The beforeDestroy method of the Popup would be able to call the destruction of its bound content.

I think another alternative would be to let Vue do it by using the content distribution with slot.

I think the second alternative would be better.

Once custom Popup has been implemented and works correctly there is the question of Geojson component. Geojson can be a Feature or FeatureGroup so you don't know if your Geojson is only one line for example or a set of lines. And don't know if you want to bind a popup to each line or the same popup for all lines.
So something like below will not work, I think, as it is ambiguous.
<v-geojson ...> <v-popup...>...</v-popup> </v-geojson>
Here the solution I can see is to give an extra property popupContent that compile and bind popup and then destroy it when beforeDestroy is called on the GeoJson.

That's the view I have of this problem at the moment but don't have a lot of time to fix all issues.

Cheers,

Mickaël

[KoRiGaN]

Hi @timwis,

I give it a try and managed to generate custom component a popup of GeoJSON.
I have replicated this example using Vue2Leaflet
You can find it in the example folder as GeoJSON2.vue.

Let me know what you think.

Mickaël

[timwis]

Thanks for taking the time to do that! I'm not sure it addresses points 2 or 3 in my list above though? (i.e. what if you want your popup to use a <router-link>?

[KoRiGaN]

Hi,

For the point 2, I'm not sure to understand what the problem is. Do you have an example of what you try to achieve?

For the point 3, Using the destroyed hook in VueJS Lifecycle there should be no issue in managing memory leak. You can keep a reference to the Template that has been instantiated and destroyed it gracefully when Vue tells you to.

Micka

[KoRiGaN]

Closing as no comment for a while.