CODEWITHSUNDEEP
javascriptvue.jsvuejs2leafletvue-component
MongoLato
MongoLato

Reputation: 381

Vue2Leaflet - Can I create markers through JavaScript instead of using components?

From Vue2Leaflet's document, a marker has to be created using <l-marker :lat-lng="latLng" ></l-marker>.

However, there is some need that make me have to create the marker from JavaScript instead of from <template></template>. So, can I use similar syntax like Google Maps? (i.e., 

new google.maps.Marker({
  position: latLng,
  map: map,
});

Thanks!

Upvotes: 1

Views: 337

Answers (1)

MongoLato
MongoLato

Reputation: 381

I got it working. Here's what I did (excerpt):

<template>
  <l-map ... ref="myMap"></l-map>
</template>

import L from 'leaflet'
import * as Vue2Leaflet from 'vue2-leaflet';
...

export default {
  ...,
  mounted() {
    const map = this.$refs.myMap.mapObject;
    L.marker([13.76, 100.5]).addTo(map);
  },
};

That's really it!

Upvotes: 2

Related Questions