How to recenter vue2-leaflet map in vue on button click

Question

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>

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
– Yogesh Vadekar, Commented Oct 13, 2020 at 12:58
@YogeshVadekar, Make your question clearer and use properly formatting. — NKSM
– NKSM, Commented Oct 13, 2020 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
– Yogesh Vadekar, Commented Oct 14, 2020 at 4: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
– Yogesh Vadekar, Commented Oct 15, 2020 at 4:55

Lefteris · Accepted Answer · 2020-11-24 14:48:57Z

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>)
  }

edited Nov 24, 2020 at 14:48

answered Nov 23, 2020 at 17:39

Lefteris

615 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ghybs Over a year ago

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 vue2-leaflet.netlify.app/quickstart/#accessing-leaflet-api

Lefteris Over a year ago

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 <l-map> 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

miko866 · Accepted Answer · 2020-11-24 06:17:33Z

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

answered Nov 24, 2020 at 6:17

miko866

2991 gold badge4 silver badges11 bronze badges

1 Comment

Yogesh Vadekar Over a year ago

That's great. I can use functions like panTo() on this mapObject. Thanks!! :)

Collectives™ on Stack Overflow

How to recenter vue2-leaflet map in vue on button click

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related