vue-leaflet / vue2leaflet

Vue 2 components for Leaflet maps

Vue2Leaflet

Vue2Leaflet is a JavaScript library for the Vue framework that wraps Leaflet making it easy to create reactive maps.

How to install

npm install vue2-leaflet leaflet --save

For more detailed information you can follow the Quick Start Guide

Breaking change from 1.x.x to 2.x.x

A new major release 2.0.0 is available and come with two breaking changes:

Leaflet is not automatically installed anymore

Leaflet is now a peerDependency and need to be installed manually, we updated our docs to reflect this but please pay attention when migrating

Importing the library in Webpack / Rollup

Now the code of vue2-leaflet is split component by component (while using a bundler like Webpack/Rollup/Parcel) to do so the following syntax is not working anymore:

import Vue2Leaflet from 'vue2-leaflet'; // INVALID

And has been replaced by

import * as Vue2Leaflet from 'vue2-leaflet'; // VALID

Is highly suggested to import only the needed modules by doing so:

import { LMap, LTileLayer, LMarker } from 'vue2-leaflet';

This will reduce the size of the bundle significantly

Documentation

Go here to check out live examples and docs.

Support & Community

Do you have questions? Ideas? do you want to collaborate but you feel lost? Join us on discord Invite Link

Leaflet Plugins

Vue2Leaflet has a wide array of plugins written by the community! Check Here

Contribute

# clone the repository
git clone https://github.com/vue-leaflet/Vue2Leaflet.git
cd Vue2Leaflet
# install dependencies and build vue2-leaflet
npm install
# Compile the source and start the documentation server
npm run dev

Go to http://localhost:8080/ to see the docs and the examples

Any changes to the source code is reflected in the docs after a handfuls of seconds.

Authors

• Mickaël Bouchaud
• Nicolò Maria Mezzopera

Inspired by many map wrapper (google and leaflet) for many framework (React, Angular and Vue 1.0)

Contributors

Nicolò Maria Mezzopera 💻 🚧 📖	Mickaël 💻 🚧	bezany 💻	Michael Underwood 💻	Michael Wolf 💻	Emanuele Bertoldi 💻	javiertury 💻
ECO 💻	Udo Schochtert 🐛	Yaman Ozakin 🐛	Andre-John Mas 📖 💻	George Pickering 📖	Jake Potrebic 💻	itanka9 📖 💻
bravik 📖	Pierre Grimaud 📖	Andrei Rosca 💻

If you believe you should be on this list please add yourself by typing this on a PR or issue: @all-contributors please add @yourNickname for X where X is one of all-contributors emojoi keys

And all the rest who contributed

License

This project is licensed under the MIT License - see the LICENSE file for details

vue2leaflet's Issues

unable to set maxZoom above 18

Hi, i'm unable to set maxZoom above 18.

My code:

<template>
  <div style="height: 100%; width:100%">
      <v-map style="height: 100%; width:100%" :zoom="zoom" :center="center" :maxZoom="max" :minZoom="min">
        <v-tilelayer :url="url" :attribution="attribution" :maxZoom="max" :minZoom="min"></v-tilelayer>
      </v-map>
  </div>
</template>

<script>
  import Vue2Leaflet from 'vue2-leaflet';

  export default {
    name: 'home',
    components: {
      'v-map': Vue2Leaflet.Map,
      'v-tilelayer' :Vue2Leaflet.TileLayer,
      'v-marker': Vue2Leaflet.Marker
    },
    data () {
      return {
        zoom: 17,
        max: 19,
        min: 13,
        center: L.latLng(6.328400, 8.105166),
        url: 'http://localhost:5000/tiles/{z}/{x}/{y}/',
        attribution: 'Demo'
      }
    }
  }
</script>
<style>
</style>

Question about the use of HTML id

Hi,

We are using Vue2Leaflet inside a professional SPA, where maps are literally everywhere and our main concern.

And, for the map, you choose the following HTML implementation :

<div id="map">
  <slot></slot>
</div>

Is there a real value-added by the following use ?
This id seem to be present only for the use of css, isnt it ?

Can you consider moving to the following one (or similar) ?

<div class="Vue2Leaflet_Map">
  <slot></slot>
</div>

Or IDK if the following style implementation work (need some test)

<style scoped>
:first-of-type {
   height: 100%;
   width: 100%;
}
</style>

Cheers,

When v-bind:center changes it forces v-bind:zoom to restart

When you bind the :center of the map to your vue data coordinates and you change it later (in order to pan the map, for example), the :zoom of the map also restarts to its original value, if it was changed.

This should be two separated processes.

require is not defined

enter "npm run dev", then open http://localhost:8080/examples/index.html in browser, dose not work.
vue2-leaflet.js:71Uncaught ReferenceError: require is not defined
at eval (eval at (http://localhost:8080/dist/vue2-leaflet.js:71:2), :1:18)
at Object. (http://localhost:8080/dist/vue2-leaflet.js:71:2)
at webpack_require (http://localhost:8080/dist/vue2-leaflet.js:30:30)
at Object.eval (eval at (http://localhost:8080/dist/vue2-leaflet.js:65:2), :1:66)
at eval (eval at (http://localhost:8080/dist/vue2-leaflet.js:65:2), :130:30)
at Object. (http://localhost:8080/dist/vue2-leaflet.js:65:2)
at webpack_require (http://localhost:8080/dist/vue2-leaflet.js:30:30)
at Object. (http://localhost:8080/dist/vue2-leaflet.js:57:2)
at webpack_require (http://localhost:8080/dist/vue2-leaflet.js:30:30)
at http://localhost:8080/dist/vue2-leaflet.js:50:18(anonymous function) @ external "url"?caec:1(anonymous function) @ vue2-leaflet.js:71__webpack_require__ @ vue2-leaflet.js:30(anonymous function) @ client?8d8f:1(anonymous function) @ client?d013:128(anonymous function) @ vue2-leaflet.js:65__webpack_require__ @ vue2-leaflet.js:30(anonymous function) @ vue2-leaflet.js:57__webpack_require__ @ vue2-leaflet.js:30(anonymous function) @ vue2-leaflet.js:50(anonymous function) @ vue2-leaflet.js:53webpackUniversalModuleDefinition @ vue2-leaflet.js:9(anonymous function) @ vue2-leaflet.js:10
Leaflet.Icon.Glyph.js:4 Uncaught ReferenceError: L is not defined(…)(anonymous function) @ Leaflet.Icon.Glyph.js:4
index.html:139 Uncaught ReferenceError: L is not defined(…)

How to add a heatmap?

How can leaflet-heat be used? Have not found an example.

Widget options

How to set original Leaflet widget zoom, navigation, scale options like position, attributes, etc?

setCenter called on child prop change?

I have a simple Button component, which extends L.Control and receives a toggle prop:

<v-map ...>
  <v-btn :toggle="mode" v-on:toggleEvent="toggleMode"></v-btn>
</v-map>

A click on the control fires toggleEvent, which toggles mode between true and false -- nothing more.

I noticed that every time mode changes the map zooms and pans back into its initial position and zoom level. I checked the leaflet events without much luck, but just found out that I can avoid the problem by patching the setCenter method on my map with an empty function.

I'm not sure what exactly causes the call to setCenter in the first place and whether it's desired behaviour? Anyway to avoid this without removing the method?

v0.0.43 does not work

I think it does not have dist/ directory uploaded to npm

Detect retina?

Hi there,
Cant really get this to work. The resolution of tiles on mobile devices is really poor.

support for circles

Happy to make a PR

Use leaflet plugin

hello, how to integrate leaflet plugin like leaflet.markercluster with Vue2Leaflet? do I need to a custom component?
Thanks

Maps do not render correctly in Bootstrap Modals

When the map is created, the container width/height for your 'map-canvas' element has not yet been adjusted to the width/height of the modal dialog. This causes the map size to be incorrect (smaller) than what it should be and for the x and y coordinates of the tiles to be wrong. In particular if I inspect the generated code for my vue2leaflet map I see:

<div id="vmap" class="col-xs-4" style="height: 300px;">
  <div class="vue2leaflet-map leaflet-container leaflet-touch leaflet-fade-anim leaflet-grab leaflet-touch-drag leaflet-touch-zoom" style="position: relative; outline: none;" tabindex="0">
    <div></div> 
    <div></div>
    <div class="leaflet-pane leaflet-map-pane" style="transform: translate3d(0px, 0px, 0px);">
      <div class="leaflet-pane leaflet-tile-pane"><div class="leaflet-layer " style="z-index: 1; opacity: 1;">
      <div class="leaflet-tile-container leaflet-zoom-animated" style="z-index: 18; transform: translate3d(0px, 0px, 0px) scale(1);"><img alt="" role="presentation" src="//a.tile.openstreetmap.org/13/8039/5128.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(-17px, -235px, 0px); opacity: 1;">

The transform: translate3d(-17px, -235px, 0px) is placing the map tiles above and to the left of where they should be.

This is noted elsewhere on the internet and they stipulated that this can be fixed by calling map.invalidateSize() which will work by re-adjusting the width/height bounds of the leaflet Map's container.

Have you exposed invalidateSize()? If so, how do I call it?

Custom keys in url template

I'm building a custom map from this component and I'm running into a problem.

The url to retrieve the tiles are in the form http://tile.org.com/{z}/{x}/{y}.png?red={r}&green={g}&blue={b} and it seems that from the declaration of the TileLayer component it is not possible to add custom keys in the template.

Is there a workaround ?

Thanks in advance.

Pop-ups in markers

I'd like to add pop-ups to markers, but have no idea on how would be the best way to do that.

The easiest one would be to simply create a new method to the pop-up component which... adds a pop-up. But I don't think that's really the best way.

The other would be to create a pop-up component. In terms of how Vue is supposed to work, that would be the best way (I think).

Or there might be a completely different way to do it and I'm completely lost here.

Either way, I'm open to making a pull request with the necessary changes and/or improving the examples.

props not working as expected

I want to remove the stroke of my polygon, but it's not working for me currently.

 <v-map :zoom="zoom" :center="center" class="content__cell product-map">
   <v-polygon :lat-lngs="coordinates" :color="'#E94F0A'" :stroke="false"></v-polygon>
   <v-tilelayer :url="url" :attribution="attribution"></v-tilelayer>
 </v-map>

:color="'#E94F0A'" is working but not :stroke="false"

package.json

    "leaflet": "^1.0.3",
    "vue2-leaflet": "^0.0.40"

component demp

component registers

import Vue2Leaflet from 'vue2-leaflet';

export default {
  components: {
    'v-map': Vue2Leaflet.Map,
    'v-tilelayer': Vue2Leaflet.TileLayer,
    'v-polygon': Vue2Leaflet.Polygon,
  },
}

I forked the repo and wanted to add these features but then I realized they are actually implemented already:

const props = {
  latLngs: {
    type: Array,
    default: () => []
  },
  style: {
    type: Object,
  },
  stroke: {
    type: Boolean,
    custom: true,
    default: true
  },
  color: {
    type: String,
    custom: true,
    default: '#3388ff'
  },
  weight: {
    type: Number,
    custom: true,
    default: 3
  },
  opacity: {
    type: Number,
    custom: true,
    default: 1.0
  }

So how can we solve this?

Updating marker position

Not sure if i understood marker component code but it seems there's no way to call setLatLng() on marker and just binding :lat-lng="position" will not trigger map refresh when the value changes.

This should be an option for some live maps applications.
Regards.

Demo / Quick start

I would love a demo or quick "how-to" guide in the README please

deferredMountedTo is not a function?

I'm trying the following code

<v-map :zoom="zoom" :center="center" id="map" >
    <v-tilelayer :url="url" ></v-tilelayer>
    <marker-popup :position="marker" title="Hey"> </marker-popup> 
</v-map>

where marker-popup's template is:

<template>
    <v-marker :lat-lng="position" :title="title" :draggable="false">
      <v-popup :content="text"></v-popup>
    </v-marker>
</template>

I get this error:
[Vue warn]: Error in mounted hook: "TypeError: this.$children[e].deferredMountedTo is not a function.

Is there something special that I have to do to get this to work?

"style" is a reserved attribute

Hello,
I have an issue using polygons with vue-devtools:
[Vue warn]: "style" is a reserved attribute and cannot be used as component prop"
The warning happens with Polygon, LCircle, Polyline and Rectangle components.

Thanks!

Custom tiles

How do I add custom tiles, adding them from the assets folder doesn't seem to work for me.

<v-map :zoom=1 :center="[0, 0]">
    <v-tilelayer url="/assets/maps/Got/{z}/{x}/{y}.png"></v-tilelayer>
</v-map>

gives me:

Error on map load

Hi, I'm trying to include this dependency in my vue2 component but I'm getting the following error in my log when loading the page:

vue.js?3de6:427 TypeError: _vm._v is not a function
    at Proxy.render (eval at <anonymous> (app.js:2322), <anonymous>:1267:23)
    at VueComponent.Vue._render (eval at <anonymous> (app.js:606), <anonymous>:2927:22)
    at VueComponent.eval (eval at <anonymous> (app.js:606), <anonymous>:2335:21)
    at Watcher.get (eval at <anonymous> (app.js:606), <anonymous>:1643:27)
    at new Watcher (eval at <anonymous> (app.js:606), <anonymous>:1635:12)
    at VueComponent.Vue._mount (eval at <anonymous> (app.js:606), <anonymous>:2334:19)
    at VueComponent.Vue$3.$mount (eval at <anonymous> (app.js:606), <anonymous>:5916:15)
    at VueComponent.Vue$3.$mount (eval at <anonymous> (app.js:606), <anonymous>:8199:16)
    at init (eval at <anonymous> (app.js:606), <anonymous>:2648:11)
    at createComponent (eval at <anonymous> (app.js:606), <anonymous>:4030:9)
logError @ vue.js?3de6:427

My component looks like this, is this the correct way?

<template>
  <section class="customer-page">
    <vmap :zoom="zoom" :center="center">
      <vtilelayer :url="url" :attribution="attribution"></vtilelayer>
    </vmap>
  </section>
</template>

<script>
  /* eslint-disable */
  import { Map, TileLayer } from 'vue2-leaflet';

  export default {
    components: {
      vmap: Map,
      vtilelayer: TileLayer,
    },
    name: 'Map',
    data() {
      return {
        zoom: 13,
        center: [47.413220, -1.219482],
        url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      };
    },
  };

  </script>

Does it have to do with a version mismatch of the package dependencies or something? Thanks in advance!

plugin css usage issue

Hi,

have used a plugin for leaflet integration
https://www.npmjs.com/package/vue2-leaflet

but when we try to import css it's not showing image files as it creating wrong paths even if it converts it into inline images

so is there any option to skip plugin files from webpack merge or any other options to handle it.

Getting Reference to VMap

Hi guys, first off, thanks so much for working on this library. Secondly, I'm wondering if there is a way to get a reference to the map object from within the component that the map is embedded. So, for instance I'd like to be able to use Leaflet to panTo but I'm unsure how to get a handle on it to call anything against it. I see that the component structure looks like this:

But I'm not sure how to access the map within the VMAP component under my Stroll Map component. Any help with this would be great! Thanks.

IconDefault errors using vue-loader

Hi,
thanks for the great component! I have a problem setting the image when using vue-loader.

IconDefault does not set the image path at all,

    <leaflet-icon-default path="static/media/map"></leaflet-icon-default>`

Renders to

<img src="http://localhost:4000/static/media/marker-icon.2273e3d8.png&quot;)marker-icon.png" class="leaflet-marker-icon ...">

Notice the invalid link.

How to set custom Marker icon?

How to set custom Marker icon?

error on defferedMountedTo, _ is not defined

Hi,
I have an issue when map is mounted :
deferredMountedTo: function deferredMountedTo(parent) {
this.$tileLayer.addTo(parent);
=> _.forEach(this.$children, function (child) {
child.deferredMountedTo(that);
});
}

I don't understand why lodash is not present.

Tooltip and Popup with Polygon

Hi,

I have a problem with tooltips and popups.
It works perfectly with markers, but don't seems to work with polygon.

JSFiddle example: https://jsfiddle.net/k04zpLx9/18/

Did I miss something ?

Thanks!

TileLayer doesn't update

Hello,
Find an issue where modifying url does not update component. See here: https://jsfiddle.net/k04zpLx9/40/

I'm currently learning Vue, so I'm not an expert. It seems that, as there is no DOM elements, component is not updated. Adding something like this will work:

<template>
  <span :url="url"></span>
</template>

<script>
...
updated() {
    this.$tileLayer.setUrl(this.url);
}
...
</script>

Is it OK? Is there another solution?

GeoJSON not working.

Hello.

With a simple array configuration, the geojson component is not working for me:

v-geojson-layer(v-for="vector in map.vectors", :key="vector.id", :geojson="vector.geojson")

Gives the following error:

I tried with the sample geojson https://raw.githubusercontent.com/KoRiGaN/Vue2Leaflet/master/examples/src/assets/geojson/france.json in order to check the integrity but If fails.

What to look for?

Ty.

Binding events?

Well some example would be awesome

How to use two different Icon-pics??

Consider using modular lodash

A brief look at the components and you only seem to be using loadash's _.forEach, consider reducing the dependency size by using the modular parts of lodash you need rather than the entire library:

import _each from 'lodash.foreach'

_each(events, (eventName) => {...

L.Icon.Default errors using vue-loader and webpack | Duplicated Marker

System Information | Affected Versions

leaflet: 1.0.3
vue2-leaflet: 0.0.47
vue: 2.2.6
chrome: 58.0.3029.81 (64-bit)

Description

In v.0.0.47, I have noticed an issue with the Marker component being duplicated/shadowed when rendered in the map.

Code

<v-map :zoom=15 :center="[organization.latitude, organization.longitude]">
    <v-tilelayer :token="mapboxAPIKey" url="https://api.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token={token}"></v-tilelayer>
    <v-marker :lat-lng="{'lat': organization.latitude, 'lng': organization.longitude}">
        <v-popup :content="organization.name"></v-popup>
    </v-marker>
</v-map>

edit: fixed code copy paste error

Fix

If I remove the transform: translate3d(395px, 200px, 0px) style from the img.leaflet-marker-icon, then the issue is resolved.

Edit: This change seems to move the "clickable" marker out of the pane, so it cannot be used as the trigger for a popup. The incorrect "fat" marker is the one that remains. I will look into other possible "full" resolutions.

Attachments

Sub-component inside v-popup and v-tooltip

Hi @KoRiGaN,

Is it possible to use sub-component inside the content of v-popup and v-tooltip, instead of pure HTML string inside the content property?

So we can do this kind of stuff:

<div id="app">
  <v-map :zoom="zoom" :center="center">
    <v-tilelayer :url="url" :attribution="attribution"></v-tilelayer>
    <v-marker :lat-lng="marker">
      <v-popup>
        <button @click='counter += 1'>{{ some_content }}</button>
      </v-popup>
    </v-marker>
  </v-map>
</div>

Cheers,
Tortue Torche

Styles

Took me a while to work out why my map wasn't loading properly (it was showing up full browser height with random tiles loading) -- you need to make sure the leaflet.css is included, either via a HTML link tag or in your component style via something like @import "~leaflet/dist/leaflet.css";

Acces to child property/methods

Hello,

I'm trying out Vuejs these days. I'm not a font-dev expert though ...

Here is my question :
I'm working on a project with an API serving geo_shapes through json format. I have all my polygons displayed.
In order to understand the underlying mechanism, I'm wondering how to proceed to change the polygon fillColor on mousever for highlighting. What is the recomended way to make this done and how can I access the setFillColor in my Vue component ?

Here is chunks of component code :

<template>
<v-map id="leaflet">
    <v-tilelayer></v-tilelayer>

    <v-polygon v-for="area in areas" :key="area.id"
                           :lat-lngs="area.geometry.coordinates"
                           @l-dblclick="goto_sublevel(area)"
                           @l-mouseover="change_color()">  <!--???-->
        <v-popup :content="area.name"></v-popup>
    </v-polygon>

    <v-polygon v-for="area in parent_area" :key="area.id"
                           :lat-lngs="area.geometry.coordinates" :color="'#ff6056'"></v-polygon>
</v-map>
</template>

<script>
import Vue2Leaflet from 'vue2-leaflet';

export default {

        components: {
            'v-map': Vue2Leaflet.Map,
            'v-tilelayer': Vue2Leaflet.TileLayer,
            'v-polygon': Vue2Leaflet.Polygon,
            'v-popup': Vue2Leaflet.Popup
        },

        methods : {
        goto_sublevel: function (level) {
                // do something to retrieve data of next geographical level ...
                },
        change_color: function (?) {
                // ??? is it here that magic should happen ?
        },

}


</script>

Anyway, I found your api clear enough to had some fun with leaflet. Thanks for your job ! ;)

Dithyrambe

load and viewreset events are not firing

Out of the following events on the map component only zoomanim and moveend work.
I need to know when the map loads for the first time. Any suggestions?

<v-map :zoom=13 :center="[47.413220, -1.219482]" @l-zoomanim="mapReady" @l-viewreset="mapReady" @l-ready="mapReady" @l-load="mapReady" @l-moveend="mapReady">
</v-map>
...
mapReady(e){
      console.log(e)
}

Webpack error on build

Hi there,

I dont know if this error belongs to you, but I have no more intel to do.

When I try to build project using Vue2Leaflet, I got this short error :

ERROR in client.10c90a41.js from UglifyJs
Invalid assignment [./~/vue2-leaflet/src/utils/eventsBinder.js:1,0][client.10c90a41.js:23407,87]

I am using v0.0.42, before that v0.0.40 (the error is still the same).

Cheers,

components v-popup and v-tooltip not working

<template>
<v-map :zoom="zoom" :center="center" :min-zoom="minZoom" :max-zoom="maxZoom">
<v-tilelayer :url="url"></v-tilelayer>
<v-marker :lat-lng="latlng" :draggable="true" @l-move="markerMoved" @l-click="markerClick">
<v-popup :content="greeting"></v-popup>
<v-tooltip :content="greeting"></v-tooltip>
</v-marker>
</v-map>
</template>

<script>
import Vue2Leaflet from 'vue2-leaflet';

export default {
  components: {
      'v-map': Vue2Leaflet.Map,
      'v-tilelayer': Vue2Leaflet.TileLayer,
      'v-marker': Vue2Leaflet.Marker,
      'v-tooltip': Vue2Leaflet.Tooltip,
      'v-popup': Vue2Leaflet.Popup
  }}

</script>

<style>
@import "~leaflet/dist/leaflet.css";
</style>

How to change center, zoom, bounds of the map?

Like in leaflet, setCenter(), setZoom(), setBounds(), etc?

Where is the map object exposed to use it?

Thanks.

Zoom event not working

When I do a zoom in the map the event isn't being called. My component:

<template>
  <v-map ref="map" :zoom="zoom" :center="center" v-on:l-zoom="zoom">
    <v-tilelayer :url="titleLayer"></v-tilelayer>
    <v-marker :lat-lng="center"></v-marker>
  </v-map>
</template>

<script>

// Component
export default {
  name: 'map',

  data () {
    return {
      titleLayer: 'secret'
    }
  },

  methods: {

    zoom (evt) {
      console.log(evt) // not showing anything
    },
  },

  computed: {
    center () {
      return this.$store.state.map.center
    },
    zoom () {
      return this.$store.state.map.zoom
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

this.setVisible is not a function

First of all, great job on the leaflet component - it is working like a charm.

I just noticed that if I switch between 2 pages in a SPA I get the following error:
vue.common.js?e881:435 TypeError: this.setVisible is not a function
It seems to be caused by this bit (from vue-leaflet2.js in the dist, v0.0.27):

/***/ },
/* 9 */
/***/ function(module, exports, __webpack_require__) {

	'use strict';

	Object.defineProperty(exports, "__esModule", {
	  value: true
	});

	var _eventsBinder = __webpack_require__(2);

	var _eventsBinder2 = _interopRequireDefault(_eventsBinder);

	var _propsBinder = __webpack_require__(1);

	var _propsBinder2 = _interopRequireDefault(_propsBinder);

	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

	var events = ['add', 'remove', 'popupopen', 'popupclose', 'tooltipopen', 'tooltipclose'];

	var props = {
	  content: {
	    custom: true,
	    default: ''
	  }
	};

	exports.default = {
	  props: props,
	  mounted: function mounted() {
	    this.mapObject = L.popup();
	    (0, _eventsBinder2.default)(this, this.mapObject, events);
	    (0, _propsBinder2.default)(this, this.mapObject, props);
	    if (this.$parent._isMounted) {
	      this.deferredMountedTo(this.$parent.mapObject);
	    }
	  },
	  beforeDestroy: function beforeDestroy() {
      this.setVisible(false);
	  },

	  methods: {
	    deferredMountedTo: function deferredMountedTo(parent) {
	      this.parent = parent;
	      parent.bindPopup(this.content);
	    },
	    setContent: function setContent(newVal, oldVal) {
	      if (newVal) {
	        this.parent.bindPopup(this.content);
	      } else {
	        if (this.parent.getTooltip) {
	          this.parent.unbindPopup();
	        }
	      }
	    }
	  }
	};

As soon as I take out the this.setVisible the error is gone.

Image Overlay with v-for not updating when removing elements from array

As opposed as the v-for v-marker behaviour, in which I can add and remove markers of an array and the map updates accordingly, if I do the same with v-for v-image-overlay and add and then remove the image, the layer won't update and the old image remains rendered forever.

Is there a method for forcing to redraw the map or at least redraw the layer?

Thanks.

Popups or tooltips events

Hello, how do open popups or tooltips by default and how to trigger their events open/close ?
I've add my html like this and don't know where to bind click event, on parent tag marker or child tags ?

<v-marker v-for='(marker, index) in markers' :lat-lng='marker.position' :key='index'>
  <v-tooltip :content="marker.tooltip"></v-tooltip>
  <v-popup :content="marker.popup"></v-popup>
</v-marker>

use of arrays to specify center/lat-lng

From the example:

<div id="app" style="height: 100%">
  <v-map :zoom=13 :center="[47.413220, -1.219482]">
    <v-tilelayer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></v-tilelayer>
    <v-marker :lat-lng="[47.413220, -1.219482]"></v-marker>
  </v-map>
</div>

The problem with using arrays like this for 'center' and 'lat-lng' is that Vue gets a new array every time the map gets rendered. This in turn means the map will get re-centered every time the map is refreshed (i.e. anything in the map changes, e.g. a marker moves). Even if the values have not changed they will be sent to the component as though they have changed. Presumably the same thing happens for the markers too (not tested).

A work around is to create the array as a data property:

data: function() {
        return {
            map_centre: [-38, 145],
            map_zoom: 13,
        }
        ...
}

And use this in the map:

<v-map ref="map" :zoom="map_zoom" :center="map_centre" style="height: 500px;">

However this does not work if rendering markers from a list:

<v-marker
            ref="marker"
            v-for="item in inventory"
            v-if="item.c8y_Position && item.c8y_Position.lat && item.c8y_Position.lng"
            :key="item.id"
            :lat-lng="[item.c8y_Position.lat, item.c8y_Position.lng]">
</v-marker>

Is it possible that we could pass lat and lng and separate properties and not use the array?

Demo with vue component

Hello,

Can you make an example with Vue component?

Thank you

Listening for Ready Event of Map

I'm having an issue where if the user navigates away from the map while it's loading it's causing strange behavious in other parts of my application. I'm wondering if there is a way to listen for the l-ready event from the V-Map from the parent component?

I've tried to listen in mounted:

     this.$refs.strollMap.$on('l-ready', function(){
        console.log('Ready')
      })

But I can't seem to get a hook into it.

imageoverlay 'lat' not defined

I am almost certain its a user error on my part but when i try to add imagoverlay im getting
Cannot read property 'lat' of undefined

here is an example of the usecase
https://jsfiddle.net/b0r7/9f2yf3xh/20/

Control Layer

Hi,

If I need to display control layer (adding a few overlays on top of base map), how can I do so?

Map component can trigger "layeradd" event when the overlay is added, unfortunately, this event also triggers when marker is added.

How can I identify if the layer is a TileLayer (not Marker), and if TileLayer, which one is it (I could not find anything to identify that Tile Layer...

I may also need to add various GroupLayer to the control

Support arrays for LatLng objects

Hi,

It would be useful to support arrays whenever a LatLng object is expected, according to what Leaflet offers.

Typically, passing an array as the center prop of the map currently works, but it does not work for Marker position, which has to be an object with a lat and lng key.

Also, for bounds prop on Map, one has to pass a L.latLngBounds object whereas leaflet should support passing an Array directly.

Thanks!