Vue 2 components for Leaflet maps

Related tags

Map map vuejs vue leaflet
Overview

Vue2Leaflet

All Contributors

ci

Downloads Version License

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

Issues
  • vue-marker not displaying on map and map not fully rendering

    vue-marker not displaying on map and map not fully rendering

    Description

    Steps to Reproduce

    1. installed Vue2Leaflet via npm
    2. created a component called Simplewith the following contents (just copied the Simple.vue example and added the style import)
    
    <template>
      <div class="simple">
        <div id="top_div" style="height: 100%">
          <v-map :zoom="zoom" :center="center" style="height: 1000px; width: 1000px">
            <v-tilelayer :url="url" :attribution="attribution"></v-tilelayer>
            <v-marker :lat-lng="marker"></v-marker>       
          </v-map>
        </div>
      </div>
    </template>
    
    <script>
     import Vue2Leaflet from 'vue2-leaflet';
     
    export default {
      name: 'simple',
      components: {
        'v-map': Vue2Leaflet.Map,
        'v-tilelayer' :Vue2Leaflet.TileLayer,
        'v-marker': Vue2Leaflet.Marker
      },
      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',
            marker: L.latLng(47.413220, -1.219482),
        }
      }
    }
    </script>
    
    <style>
     @import "~leaflet/dist/leaflet.css";
    </style>
    

    Expected Results

    I expect to see the basic map with marker from the example jsfiddle.

    Actual Results

    The map appears as a large gray box with a small section with rendered map tiles. My problem looks identical to the one described in #81 , but I do include the leaflet css import.

    leaflet

    What is strange is that when I resize the window, the map loads as it should, but the marker does not show up. I see in the html that the marker is loaded, however: leaflet2

    Browsers Affected

    • [x ] Chrome
    • [x ] Firefox
    • [ ] Edge
    • [ ] Safari 9
    • [ ] Safari 8
    • [ ] IE 11

    Versions

    • Leaflet: v1.2.0
    • Vue: v2.5.2
    • Vue2Leaflet: v0.0.55
    help wanted wontfix Docs 
    opened by qualisign 45
  • Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

    Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

    Hey KoRiGaN.

    I just installed Vue2-leaflet 0.0.60 to my project and followed your simple example on how to set it up, which works. The problem appears when i'm trying to add a popup or tooltip to my markers. The error happens on load and whenever i hover over a marker / clicks on a marker.

    Error:

    Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

    I have the following code:

    <v-map :zoom="zoom" :center="center">
        <v-tilelayer :url="url" :attribution="attribution"></v-tilelayer>
            <v-marker v-for="marker in markers" :key="marker.id" :visible="marker.visible" :draggable="marker.draggable" :lat-lng="marker.position">
                <v-popup :content="marker.tooltip" />
                <v-tooltip :content="marker.tooltip" />
          </v-marker>
    </v-map>
    
    <script>
    import Vue2Leaflet from 'vue2-leaflet';
    
    export default {
        name: 'vuejscomponent',
        components: {
            'v-map': Vue2Leaflet.Map,
            'v-tilelayer': Vue2Leaflet.TileLayer,
            'v-popup': Vue2Leaflet.Popup,
            'v-marker': Vue2Leaflet.Marker,
            'v-tooltip': Vue2Leaflet.Tooltip
        },
        data () {
            return {
                zoom: 14,
                center: [51.505, -0.09],
                url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
                attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
                markers: [
                    { id: "m1", position : {lat:51.005, lng:-0.09}, tooltip: "tooltip for marker3", draggable: true, visible: true },
                    { id: "m2", position : {lat:50.7605, lng:-0.09}, tooltip: "tooltip for marker4", draggable: true, visible: false }
                ],
                options: { permanent: true, custom: true, className: 'tooltipBox', custom: true, dashOffset: "" }
            }
        }
    }
    </script>
    

    Got any suggestion how to fix this?

    opened by Fillah 34
  • Leaflet version and version lock [FOR PLUGIN DEVS  / USERS]

    Leaflet version and version lock [FOR PLUGIN DEVS / USERS]

    After two days of debugging I finally managed to grasp an issue that I was having on some personal projects ( vue people and others ). As it stands leaflet used to export itself to the window object, in more recent version they also have an es6 module version. Most of the leaflet plugins uses the window object so they keep exporting it. Now there are some edge cases that completely breaks both vue2-leaflet and the plugins if there is a mismatch version from what version vue-leaflet declare is different from the one declared both in the vue-leaflet-plugin and the leaflet-plugin.

    I'll make an example with markercluster plugin. vue-leaflet declare as dependency leaflet: 1.3.4 leaflet.markercluster declare as dependency: leaflet 1.3.1

    They are just patch releases so it should be all fine.

    What happens instead is that webpack see the two differences and load two leaflet instances. now everything still works MINUS when:

    leaflet markercluster declare a new class say: const a = new LatLngBounds([lat, lon]). and then uses the leaflet method to check if that bound intersect with other markers. Since that method check a instanceof LatLngBounds and that LatLngBounds is coming from a DIFFERENT leaflet instance that check will pass false and then everything will start behaving bad / breaking

    Everything is fine if all the leaflet versions are set at the same since only one distance of leaflet is instantiated. @jperelli

    EDIT FOR CLARITY:

    A solid workaround for this is to use Aliases to point to a single leaflet root instance, for example in nuxt 1.x ( I believe 2.x too ) one would do:

    build: {
      extend(config){
        config.resolve.alias['leaflet'] = path.join(__dirname, 'node_modules/leaflet');
      }
    }
    
    opened by DonNicoJs 29
  • Rewrite docs with gridsome / vuepress / nuxt

    Rewrite docs with gridsome / vuepress / nuxt

    Currently the docs are written in docsify, and they have several problem of not loading partials and similar.

    Having proper working docs is paramount and we should rewrite them in a more stable approach.

    Vuepress or Gridsome seem to be the best candidates.

    We should also ditch the examples folder for storbybook.

    Docs confirmed 
    opened by DonNicoJs 29
  • Vue 3 Plan

    Vue 3 Plan

    Hi everyone, this issue is going to be the entry point for the discussion on what to do about vue3.

    Due to the name of the repo ( which I can't change since I am not the owner ) I foresee some user confusion.

    Also I would like to integrate the code with some ci/cd tools and bots to make my life more easy, but I can't since I have no access to the settings...

    I see two options moving forward:

    • fork, rename move from there
    • keep working here, accept that the users are going to be confused.

    If a fork is done, due to limited time I am going to drop support of this repo and keep offering security updates / bug fixes on the new codebase.

    Everyone is free to comment here but I am tagging the people who committed the most.

    @bezany @HIMISOCOOL @mikeu @javiertury @jericopulvera @jperelli

    confirmed 
    opened by DonNicoJs 27
  • Not fully rendering Map and markers

    Not fully rendering Map and markers

    Have the problem with map: not fully rendering Map.

    My application work using vuejs-templates and vue-loader. And I found some problem with webpack and Vue2Leaflet, after that I add to my main.js next lines:

    import L from 'leaflet';
    delete L.Icon.Default.prototype._getIconUrl;
    
    L.Icon.Default.mergeOptions({
      iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
      iconUrl: require('leaflet/dist/images/marker-icon.png'),
      shadowUrl: require('leaflet/dist/images/marker-shadow.png')
    });
    

    And after that, I have the same issue.

    My component:

    <template>
      <div>
        <l-map style="height: 90%" :zoom="zoom" :center="center">
          <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
          <l-marker :lat-lng="marker"></l-marker>
        </l-map>
      </div>
    </template>
    
    <script>
    import { LMap, LTileLayer, LMarker } from 'vue2-leaflet';
    export default {
      name: 'example',
      components: {
        LMap,
        LTileLayer,
        LMarker
      },
      data () {
        return {
          zoom:13,
          center: L.latLng(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',
          marker: L.latLng(47.413220, -1.219482),
        }
      },
      methods: {
        mounted() {
            setTimeout(function() { window.dispatchEvent(new Event('resize')) }, 250);
        }
      }
    }
    </script>
    

    Result rendering map:

    screen shot 2018-04-15 at 3 01 01 pm

    Question:

    How it fix? @KoRiGaN do you have any ideas?

    opened by ximet 25
  • How to add layer-group into control-layers

    How to add layer-group into control-layers

    In official documentation, Leaftlet shows me to use L.control.layers(baseMaps, overlayMaps).addTo(map); to add baseMaps and overlayMaps to control layer. How can I do that with l-layer-group and l-control-layers?

    I checked the example, it has the only baseMaps option.

    Make an example, I want to add this layer group, it is a set of markers, how do I add another checkbox on control-layers to become overlayMaps?

    <l-tile-layer
        layerType="base"
        name="Default Base"
        :url="url"
    />
    <l-layer-group :visible="sourceVisible">
        <l-marker
             v-for="(item, index) in sources"
             :key="index"
             :lat-lng="[item.coordinates[1], item.coordinates[0]]"
             :icon="sourceIcon(item.icon)"
             @l-click="onClick(item)"
        >
        </l-marker>
    </l-layer-group>
    

    Thank you.

    opened by sangdth 23
  • index.d.ts does not include exported member L

    index.d.ts does not include exported member L

    While importing L from module using import {L} from 'vue2-leaflet'; an error is being thrown: Module '"vue2-leaflet"' has no exported member 'L'.

    And we CANNOT use import from leaflet directly because some functions fail checks because leaflet sometimes uses instanceof and it is a huge app size increase.

    Versions

    • Leaflet: v1.3.4
    • Vue: v2.5.21
    • Vue2Leaflet: v1.2.3
    opened by drafu 19
  • No toolbar for draw?

    No toolbar for draw?

    Hi guys,

    Im trying to add a toolbar to draw geometric figures like this example using the native leaflet library: http://leaflet.github.io/Leaflet.draw/docs/examples/full.html

    But I didnt found nothing to get it work with vue2-leaflet.

    This is possible to do with this lib?

    Thanks!

    opened by jlpereira 17
  • Popup with button click event

    Popup with button click event

    How to trigger the button click event in the marker popup?

    opened by SupriyaSudhindra 17
  • Clear reference counter when position changed

    Clear reference counter when position changed

    Fix #695.

    Leaflet may assume the position of the attribution text as static.

    opened by tailriver 0
  • Change of attribution text may fail in some situation

    Change of attribution text may fail in some situation

    Description

    Sometimes old attribution text remains after the layer is hidden. I think the setAttribution may fail if { attributionControl: false } is specified in LMap.

    Live Demo

    https://vue2-leaflet.netlify.app/examples/feature-showcase.html

    Steps to Reproduce

    1. Change "Attribution position" to "topleft" (other than "bottomright").
    2. Change tile layer to OpenTopoMap.

    Expected Results

    Vue2Leaflet | Map data: © OpenStreetMap, SRTM | Map style: © OpenTopoMap (CC-BY-SA)

    (skip step 1 to get this)

    Actual Results

    Vue2Leaflet | © OpenStreetMap contributors, Map data: © OpenStreetMap, SRTM | Map style: © OpenTopoMap (CC-BY-SA)

    Browsers Affected

    • [x] Chrome
    • [ ] Firefox
    • [ ] Edge
    • [ ] Safari 9
    • [ ] Safari 8
    • [ ] IE 11

    Versions

    • Leaflet: vX.X.X
    • Vue: vX.X.X
    • Vue2Leaflet: vX.X.X
    opened by tailriver 0
  • LIcon with null size within LMarker slot fails to nullify default size

    LIcon with null size within LMarker slot fails to nullify default size

    When providing an icon without a size within the default slot the icon property defaults to new Icon.Default() which has an iconSize of [12,12].

    Steps to Reproduce

      <l-marker :lat-lng = "[-10, 10]">
        <l-icon :icon-size="null" :class-name="`leaflet-marker-icon`">
          <div :style="`width: 50px; height: 50px; background-color: #03f;`">Icon</div>
        </l-icon>
      </l-marker>
    

    Expected Results

    No forced sizing on marker.

    Actual Results

    The internal div will have the correct size, however...

    Using DOM inspection tools, observe .leaflet-marker-icon wrapping this to have a size of 12x12

    Browsers Affected

    • [x] Chrome
    • [ ] Firefox
    • [ ] Edge
    • [ ] Safari 9
    • [ ] Safari 8
    • [ ] IE 11

    Versions

    • Leaflet: v1.7.1
    • Vue: v2.6.14
    • Vue2Leaflet: v2.7.1
    opened by mryellow 0
  • Move LImageOverlay url prop from mixin to component

    Move LImageOverlay url prop from mixin to component

    This PR movesLImageOverlay url prop from mixin to a component so it doesn't end up in the components that inherit its mixin (like LVideoOverlay #683 or LSVGOverlay #684 )

    If this PR is approved it should be merged before these two mentioned above because they depend on it.

    opened by mandryllo 2
  • Add LSVGOverlay

    Add LSVGOverlay

    This PR adds LSVGOverlay component (link)

    Depends on #685

    opened by mandryllo 0
  • Add LVideoOverlay

    Add LVideoOverlay

    This PR adds LVideoOverlay component (link)

    Depends on #685

    opened by mandryllo 2
  • GeoJSON mouse events not triggered with preferCanvas=true

    GeoJSON mouse events not triggered with preferCanvas=true

    Description

    The CircleMarker layer seems to block the LGeoJson mouse interactivity when preferCanvas: true.

    Live Demo

    I prepared the following code-sandbox reproducing the issue: https://codesandbox.io/s/leaflet-canvas-geojson-click-uy9ez Usage: The left map has preferCanvas: true, the right one has preferCanvas: false ; on the right map you can click on italian regions triggering the event and see the region name in the top-right; on the left map this does not work.

    Steps to Reproduce

    • create a map with the option preferCanvas: true
    • add some circles using LCircleMarker
    • add LGeoJson layer and set a mouse event (e.g. click) in the onEachFeature function using layer.on("eventname",fn).

    Expected Results

    The mouse event calls the callback

    Actual Results

    The mouse event won't trigger (but it works fine with map option: preferCanvas: false)

    Browsers Affected

    Tested on:

    • [x ] Chrome
    • [x ] Firefox (but I guess all are affected)

    Versions

    • Leaflet: v1.6.0
    • Vue: v2.6.11
    • Vue2Leaflet: v2.5.2

    Similar issue (closed) : https://github.com/vue-leaflet/Vue2Leaflet/issues/358

    bug confirmed 
    opened by digEmAll 7
  • Attribution for multiple WMSTile layers not showing correctly on first load

    Attribution for multiple WMSTile layers not showing correctly on first load

    Description

    When drawing map with multiple WMSTile layers on initial load all three attributions (for each separate WMS layer) are printed as attribution. After first change everything is as should be and attributions are correctly displayed.

    Live Demo

    https://codesandbox.io/s/eager-feather-vf691

    Steps to Reproduce

    Create two or more separate WMS layers with different attribution and on initial load all three attributions will be showed.

    Expected Results

    On initial load only attribution of selected WMS base layer should be displayed as attribution.

    Actual Results

    On initial load all three attributions are showed and only after first change the attribution is correctly displayed.

    Browsers Affected

    • [x] Chrome
    • [x] Firefox
    • [ ] Edge
    • [x] Safari 9
    • [ ] Safari 8
    • [ ] IE 11

    Versions

    • Leaflet: v1.6.0
    • Vue: v2.6.10
    • Vue2Leaflet: v2.5.2
    bug confirmed 
    opened by grgurev 2
  • Changing LWMSTileLayer `layers` prop has no effect

    Changing LWMSTileLayer `layers` prop has no effect

    Description

    Changing the LWMSTileLayer layers prop does not trigger redraw.

    Live Demo

    http://jsfiddle.net/q1gfj9n7/4/

    Steps to Reproduce

    As per fiddle, any LWMSTileLayer which has a layers property which changes will not redraw the layer.

    Expected Results

    Changing the value of layers should cause the layer to be redrawn using the new layer name.

    Actual Results

    Nothing visible changes.

    Browsers Affected

    • [X] Chrome
    • [X] Firefox

    Unable to check:

    • [ ] Edge
    • [ ] Safari 9
    • [ ] Safari 8
    • [ ] IE 11

    Versions

    • Leaflet: v1.6.0
    • Vue: v2.6.10
    • Vue2Leaflet: v2.5.2
    bug confirmed 
    opened by guygriffiths 4
  • @stop and @prevent not working on CircleMarker

    @stop and @prevent not working on CircleMarker

    Description

    Can not stop propagation or prevent default on circle marker clicks. @click.stop and/or @click.prevent throw errors. Original event seems to be in an object called $event.originalEvent but calling preventDefault() and stopPropagation() doesn't have any effect on it.

    Live Demo

    https://jsfiddle.net/gulyamani/541bpcja/1/

    Steps to Reproduce

    Open console and click circle markers.

    Expected Results

    Only seeing 'marker click' on console.

    Actual Results

    Seeing both 'marker click' and 'map click'

    Browsers Affected

    • [x] Chrome
    • [x] Firefox
    • [ ] Edge
    • [ ] Safari 9
    • [ ] Safari 8
    • [ ] IE 11

    Versions

    • Leaflet: v1.6.0
    • Vue: v2.5.16
    • Vue2Leaflet: v2.2.1
    bug help wanted confirmed 
    opened by maratumba 2
Releases(v2.4.3)
  • v2.2.1(Jul 24, 2019)

    • disableClickPropagation on LControl
    • more unit test
    • memory leak on LMap addressed
    • kebab case event names on marker
    • fix tooltip issues
    • minor fix to LCirlce

    Huge thanks to everybody who put their effort in writing test, patching and enhancing the code

    Source code(tar.gz)
    Source code(zip)
  • v2.1.1(Apr 25, 2019)

  • v2.1.0(Apr 21, 2019)

  • v2.0.3(Apr 20, 2019)

    • Leaflet is now a peerDependecy, please install it manually
    • ES module compilation for tree-shaking
    • l-icon component fixes
    • unit testing boostrap

    Special thanks to @bezany

    Source code(tar.gz)
    Source code(zip)
  • v1.2.0(Nov 8, 2018)

  • v1.1.1(Oct 28, 2018)

    • All the features introduced in 1.1.0
    • Fixed issues introduced in 1.1.0
    • Typescrip support

    Big thanks to @bezany @HIMISOCOOL for the hard work and everyone else who contribute to this release.

    Source code(tar.gz)
    Source code(zip)
  • v1.1.0(Oct 2, 2018)

    This release contain a big refactor of the code an many addition.

    No breaking changes aside some future deprecation warning.

    While it has been tested with all the examples and working application it's important to point out that the codebase has been strongly mutated.

    • Code size reduced by almost 10kb
    • Tooltip and popup performance (dynamic prop added )
    • Codebase now uses linting
    • GeoJson options and style are now reactive (thanks @bezany)
    • Image Overlay additional options

    Feel free to open any Issue if any bug / perplexity is found.

    Marked as pre-release

    Source code(tar.gz)
    Source code(zip)
  • v1.0.1(Mar 27, 2018)

    :warning: Breaking changes from v1.x.x to v0.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.

    Source code(tar.gz)
    Source code(zip)
Reactive Vue 3 components for Google maps

Vue 3 Google maps Components Set of mostly used Google Maps components for Vue.js. Why this library exists? We heavily use Google Maps in our projects

Fawad Mirzad 55 Jan 12, 2022
Google maps component for vue with 2-way data binding

CONTRIBUTORS NEEDED! It's been increasingly difficult for me to make time to maintain this project. My projects at work have also gradually migrated a

Daniel Sim 1.8k Jan 8, 2022
Integrate Google Maps in your Vue application

vue-googlemaps Integrate Google Maps in your Vue application in a "Vue-way". This library is Work In Progress. More components will be available in th

Guillaume Chau 525 Jan 9, 2022
A lightweight Google Maps plugin for Vue

x5-gmaps (Live Demo) This is a lightweight Google Maps plugin for Vue. Samples/examples/tutorials Tutorial creating a COVID Heatmap Address Autocomple

Keagan Chisnall 101 Jan 7, 2022
Google maps component for vue with 2-way data binding

vue-google-maps Demo: Demo in production Showcase with a lot of features Presentation If you want to write google map this way : <map :center="{lat:

Guillaume Leclerc 547 Jan 14, 2022
Integrate Azure Maps in your Vue application

Vue Azure Maps Vue Azure Maps is a library for Vue.js that integrates Azure Maps. It offers several Vue components out of the box and supports custom

Ricardo Ruiz 21 Dec 27, 2021
Using Google Maps with Vue.js

stores-map Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Run

Edoardo Gargano 7 Mar 31, 2020
📍 Vue composable for Google Maps Places Autocomplete.

v-use-places-autocomplete ?? Vue composable for Google Maps Places Autocomplete. Though not a fork, this composable is fully inspired by react-google-

Robert Soriano 6 Oct 31, 2021
Yandex Maps Component for VueJS

vue-yandex-maps Documentation: RU, EN Contributors ✨ Thanks goes to these wonderful people (emoji key): Wormaster ?? Nikitenko Andrey ?? Kamil ?? Alex

null 310 Jan 23, 2022
A wrapper component for consuming Google Maps API built on top of VueJs v2.

A wrapper component for consuming Google Maps API built on top of VueJs v2. Fork of the popular vue-google-maps plugin.

Diego A. Zapata Häntsch 117 Jan 12, 2022
🗺 Vue Mapbox GL - A small components library to use Mapbox GL in Vue

?? Vue Mapbox GL A small components library to use Mapbox GL in Vue. Installation & usage Have a look at the small guide for information on how to set

Studio Meta 36 Nov 9, 2021
Baidu Map components for Vue 2.x

VUE BAIDU MAP Baidu Map components for Vue 2.x Languages 中文 English Documentation https://dafrok.github.io/vue-baidu-map Get Start Installation npm i

马金花儿 2.2k Jan 16, 2022
Web map Vue components with the power of OpenLayers

VueLayers Web map Vue components with the power of OpenLayers Overview VueLayers is components library that brings the powerful OpenLayers API to the

Vladimir Vershinin 610 Jan 12, 2022
Vue 2.x components for CesiumJS.

VUE CESIUM Vue 2.x components for CesiumJS. Load Cesium built package or other third-party packages which are built on Cesium. Languages 中文 English Li

zouyaoji 631 Jan 15, 2022
Web map Vue 3.x components with the power of OpenLayers

vue3-openlayers Web map Vue components with the power of OpenLayers Overview vue3-openlayers is components library that brings the powerful OpenLayers

Melih Altıntaş 223 Jan 24, 2022
A set of Vue.js components to display an interactive SVG map

vue-svg-map A set of Vue.js components to display an interactive SVG map. Demo Take a look at the live demo! Installation npm npm install --save vue-s

Victor Cazanave 65 Jan 18, 2022
a library of vue components used by mapping applications

phila-vue-mapping (@phila/vue-mapping in npmjs.com) phila-vue-mapping is a library of Vue components that can be used in mapping apps which use Vue.js

City of Philadelphia 48 Oct 27, 2021
Vuejs 2 components for interacting with mapbox-gl-js

VueMapbox Combine powers of Vue.js and Mapbox Gl JS Vue-mapbox is wrapper around Mapbox GL JS library that provides vueish-way to interact with the ma

Alex 399 Jan 19, 2022
Отрисовка карты офиса и круговой диаграммы Vue.js с использованием библиотек D3.js, vue-chartjs, vuedraggable

office-map Отрисовка карты офиса и круговой диаграммы Vue.js с использованием библиотек D3.js, vue-chartjs, vuedraggable загрузка из JSON информации о

Zoya 0 Dec 5, 2021