vue-leaflet/Vue2Leaflet

Add Geodesic to Vue2leaflet

Flightliner380 opened this issue · 2 comments

Flightliner380 commented

Hello,

I need some help to extend the existing Vue2Leaflet with https://github.com/henrythasler/Leaflet.Geodesic.

How can I add L.geodesic ?
I'm useing npm and made vuejs/nuxt Project and installed the Leaflet.Geodisc, but I have no access in the L object to the function.

I'm a npm / vuejs beginner
Thanks for help

mikeu commented

Hi @Flightliner380 ,

I am not very familiar with the Nuxt side of it, you can check out the code suggestions in the Vue2Leaflet Nuxt Quickstart, or even take a look at the nuxt-leaflet package.

As for using the geodesic plugin, I think the key points will be:

  • import L from "leaflet" to give yourself access to the L object.
  • Import the plugin.
  • Add a ref to your map, e.g. <l-map ref="geodesicMap" ...>.
  • Use the @ready event of your l-map component to create a geodesic and add it to the mapObject of that ref (e.g. geodesic.addTo(this.$refs.geodesicMap.mapObject)).

Here's a quick example that does all of the above to plot a geodesic from the plugin's readme onto a Vue2Leaflet map: https://codesandbox.io/s/v2l-leaflet-geodesic-wgcfd -- the only thing missing is Nuxt, but hopefully this gets you on the right track!

Flightliner380 commented

Hi Mikeu,

this way works very good for me.
Thanks a lot for your help.

Flightliner

  • 👍1