1

I have created leaflet map with readily available vue component 'l-map' imported from 'vue2-leaflet. Now I want to recenter the map on button click but I do not know how to gain access to 'map' object (as shown in many examples with functions like 'map.flyTo()', etc) which is used to create map through functions. I tried adding 'center' in @watch property and assign it to 'center' attribute of l-map tag but the map didn't show any changes based on changes in it's value. How can I access map functions when I create it using component from 'vue2-leaflet library??

<template>
<l-map :zoom="zoom" :center="center">
      <v-btn small @click="recenterMap()">
           <span class="mdi mdi-target" />
      </v-btn>
</l-map>
</template>
<script lang="ts">
import { LMap, LControl } from "vue2-leaflet";
import { Component, Vue } from 'vue-property-decorator';

@Component({
 components: {
  LMap,
  LControl
 }
})
export default class MyMap extends Vue {
  center= { lat: 11.016749, lng: 76.955817 };

  recenterMap(){}
}
</script>
neubert
  • 15,947
  • 24
  • 120
  • 212
Yogesh Vadekar
  • 119
  • 2
  • 9
  • do you want a dynamic center in the leaflet? – Ali SaZa Oct 13 '20 at 11:14
  • No. I just want to bring my map view back to where it was when loaded in DOM. (something similar to Re-center button functionality in google maps which brings focus back on device location). – Yogesh Vadekar Oct 13 '20 at 12:58
  • 1
    @YogeshVadekar, Make your question clearer and use properly formatting. – NKSM Oct 13 '20 at 20:16
  • Ok, So I have attached sample code here. How can I make the map come back to its center on the click of a button when I don't have access to 'map' object as I have created the map with 'LMap' component provided by 'vue2-leaflet' package? – Yogesh Vadekar Oct 14 '20 at 04:22
  • I tried putting 'center' property under 'Watch' but it reflects only once and then it stops working. Currently changing id of l-map component in template functionally is the workaround I am using. But it might create problem ahead by making more api calls, thus, increasing cost of project. – Yogesh Vadekar Oct 15 '20 at 04:55

2 Answers2

4

You can make a ref to your map component like:

<l-map ref="myMap" :zoom="zoom" :center="center">
      <v-btn small @click="recenterMap()">
           <span class="mdi mdi-target" />
      </v-btn>
</l-map>

and then access the mapObject via reference with a method like

recenterMap() {
   this.$refs.myMap.mapObject.panTo(<your center coordinates object>)
  }
Lefteris
  • 51
  • 5
  • Welcome to SO! Beware of your typo (myMap vs appMap). Also in this case you have probably missed OP's difficulty, which is not to refer to a Vue component, but to an underlying object that is created within the LMap component by Vue2-Leaflet library. See https://vue2-leaflet.netlify.app/quickstart/#accessing-leaflet-api – ghybs Nov 24 '20 at 01:49
  • Hello there! Thank you for your comment. I corrected my typo and for those who didn't understand, making a reference to any Vue component wont get you back the map object. In order to get it, it needs to make a reference to the component to have access to it's underlying object that is created with Vue2-Leaflet and includes the actual map object from which you can access leaflet api methods. See: [https://vue2-leaflet.netlify.app/quickstart/#accessing-leaflet-api](https://vue2-leaflet.netlify.app/quickstart/#accessing-leaflet-api) – Lefteris Nov 26 '20 at 10:18
3

For getting the original leaflet map you can use that:

<l-map ref="map" :zoom="zoom" :center="center">
    // Your code
</l-map>

mounted() {
   this.$nextTick(() => {
      this.map = this.$refs.map.mapObject;
   });
}

Docu: https://vue2-leaflet.netlify.app/faq/#how-can-i-specify-leaflet-options-that-aren-t-part-of-a-component-s-props

miko866
  • 182
  • 2
  • 9