npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@alibaba-aero/vue2-leaflet

v2.0.5

Published

Vue2 leaflet library

Downloads

35

Readme

Vue2Leaflet

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

Image of Map

Documentation

Go here to check out live examples and docs.

If you want to hack around, here is a JS Fiddle to get started

:warning: Breaking changes from v0.x.x to v1.x.x :warning:

A new major release v1.x.x is available and come with some breaking changes.

:exclamation: Components names

As some component where conflicting with reserved name like Circle with SVG Circle, from v1.x.x all components are prefixed with L.

For example Marker component became LMarker (l-marker in template).

:exclamation: Events names

Event handling have been simplified and are now mapped directly to Leaflet event.

For example Marker move event was 'l-move' and became simply 'move'.

:sparkles: Leaflet Controls

v1.0.0 introduces Leaflet Controls you can now use them using LControlAttribution, LControlLayers, LControlScale and LControlZoom.

When adding LControlAttribution or LControlZoom to your template, remember to desactivate the default one by using LMap options:

{
  zoomControl: false,
  attributionControl: false
}

Otherwise you will end up with two zoom/attribution control.

How to install

npm

$ npm install @alibaba-aero/vue2-leaflet --save

yarn

$ yarn add @alibaba-aero/vue2-leaflet

For more detailed informations you can follow the Quick Start Guide

Leaflet Plugins

Leaflet plugins can easily work with Vue2Leaflet, if you want to use one I would recommand to look at the awesome work made by the community in the list below.

Vue2Leafet plugins:

If you have created a plugin and want it to be listed here, let me know :-).

Vue2Leaflet is only a wrapper for Leaflet. I want to keep it as simple as possible so I don't want to add any plugin support into this repo.

FAQ

My map and/or markers don't fully render. What gives?

Depending on your project setup, you may have to try different solutions.

To fix map rendering issues, it may help to import the Leaflet stylesheet within the script section of your Vue component.

In most cases, though, it is Webpack messing with Leaflet marker icons' paths, resulting in warnings or even errors. You can alleviate that by either unsetting/replacing the default paths (alternate solution) or using Webpack aliases.

How can I access the Leaflet map object?

First add a ref to the map

  <l-map ref="map" :zoom=13 :center="[47.413220, -1.219482]">
    ...
  </l-map>

Then in you JavaScript you can use mapObject which is Leaflet map instance :

this.$refs.map.mapObject;

Note: mapObject is not available directly in vue's mounted hook. You need to wrap the call to this.$refs.map in a nextTick call:

data: () => ({map: null}),
mounted () {
  // DON'T
  this.map = this.$refs.map.mapObject // doesn't work, this.map is null

  // DO
  this.$nextTick(() => {
    this.map = this.$refs.map.mapObject // work as expected
  })
},

This also work for any other component (Marker, Polyline, etc...)

How can I bind events of Vue2Leaflet components?

All event binding can be done to event with the same name as in leaflet documentation.

For example if you want to listen to Vue2Leaflet.LMarker move event.

<l-marker :lat-lng="[47.413220, -1.219482]" @move="doSomething"></l-marker>

Run code locally for contributors

# clone the repository
$ git clone [email protected]:alibaba-aero/Vue2Leaflet.git
$ cd Vue2Leaflet
# install dependencies and build vue2-leaflet
$ npm install
$ npm run build
# create a symlink for vue2-leaflet
$ npm link
$ cd examples
$ npm install
# create a symbolic link for vue2-leaflet in node_modules/
$ npm link vue2-leaflet
# serve with hot reload at localhost:8080
$ npm run dev

Go to http://localhost:8080/ to see running examples

NOTE: If you make changes to the library you should run 'npm run build' again in the root folder. The dev server should detect modification and reload the examples

Authors

Mickaël Bouchaud

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

Contributors

Thanks goes to these wonderful people

License

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