Vue2leaflet: [help] component inside geojson

[RemiDesgrange]

Hi,

Let's use the example geojson component.

Now, let's say that I want, for each geometry to bind a popup. Easy, in options I put a onEachFeature and place a bindPopup

options: {
  onEachFeature (f. l) {
    l.bindPopup(f.properties.nom)
 }
}

Now is the tricky part : how can I add a component to this popup and even better, a router-link ? It really look like a dynamic component injection... It seems that this is not the right way to do things in vue.js (https://forum-archive.vuejs.org/topic/349/injecting-components-to-the-dom/2) but I can't figure out how to do it.

In advance thanks

[AchilleAsh]

Hi @RemiDesgrange ,

I use dynamic component mounting to dynamically add a Leaflet Control on my map depending on the fixture. It looks like:

  L.Control.TopRight = L.Control.extend({
    onAdd: (map) => {
      const vm = new topRightComponent({propsData: {}}).$mount();
      return vm.$el;
    },
  });

the __bindPopup__ method can receive an html element as argument, so using __bindPopup(vm.$el)__ should do the trick.

Timothé

[RemiDesgrange]

Thanks fro the tips. I think I'll go for it right now, but I think I will reimplement geojson decoding and put the data in marker/poly line (more data driven approach ;-)

[KoRiGaN]

Hi @RemiDesgrange,

@AchilleAsh tips seems to be the good approach for me.
Would be great to have a standard solution but I don't have a lot of time to investigate around it.

35 Seems to be the same kind of issue.

[KoRiGaN]

Hi @RemiDesgrange,

You can find a working example of this in examples/src/components/GeoJSON2.vue.

I'm closing this issue for now. If you still have trouble with this please reopen it.

Mickaël

[xthree]

Hi @RemiDesgrange ,

I use dynamic component mounting to dynamically add a Leaflet Control on my map depending on the fixture. It looks like:

  L.Control.TopRight = L.Control.extend({
    onAdd: (map) => {
      const vm = new topRightComponent({propsData: {}}).$mount();
      return vm.$el;
    },
  });

the bindPopup method can receive an html element as argument, so using bindPopup(vm.$el) should do the trick.

Timothé

I came across this as I am trying to embed a component inside a popup. This method did indeed work, but for some reason I don't have access to the vue instance within that component. I discovered this initially by trying to use mapGetters and recieved this error: Uncaught TypeError: Cannot read property 'getters' of undefined . I also tried a this.$router.push({...}) and received a [Vue warn]: Error in render: "TypeError: Cannot read property 'resolve' of undefined" error.

Here is what my onEachFeature function looks like

onEachFeatureFunction() {
      return (feature, layer) => {
        console.log(feature, layer);
        const building = this.getBuildingById(feature.properties.buildingId);
        const vm = new BuildingPopup({
          propsData: { building: building },
        }).$mount();

        layer.bindPopup(vm.$el);
      };