Vue 2 components for Leaflet maps

Last update: May 24, 2022

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

GitHub

https://github.com/KoRiGaN/Vue2Leaflet
Comments
  • 1. 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
    Reviewed by qualisign at 2017-11-01 20:56
  • 2. 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?

    Reviewed by Fillah at 2018-03-27 13:25
  • 3. 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.

    Reviewed by DonNicoJs at 2020-01-01 11:19
  • 4. 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');
      }
    }
    
    Reviewed by DonNicoJs at 2018-11-11 14:04
  • 5. 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

    Reviewed by DonNicoJs at 2019-11-07 09:58
  • 6. 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?

    Reviewed by ximet at 2018-04-15 12:06
  • 7. 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.

    Reviewed by sangdth at 2018-04-04 05:34
  • 8. 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
    Reviewed by drafu at 2018-12-13 14:21
  • 9. 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!

    Reviewed by jlpereira at 2019-02-01 20:42
  • 10. build error Cannot find namespace 'L'

    Description

    hello everyone i use [email protected] & typescript template but i got a build error

    Steps to Reproduce

    just execyarn build

    Expected Results

    No error is throw

    Actual Results

    image

    Reviewed by manooog at 2018-12-05 06:40
  • 11. @click event not working inside l-icon

    Description

    I've been trying to make a custom marker icon which reacts to mouse events (basically triggers a function call on click). Unfortunately this doesn't seem to work

    Live Demo

    https://jsfiddle.net/nvcqw7d2/2/

    Steps to Reproduce

    Open above JSFiddle

    Expected Results

    Clicking on a element in the red box should open a alert

    Actual Results

    Nothing happens

    Browsers Affected

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

    Versions

    • Leaflet: v1.5.0
    • Vue: v2.15.6
    • Vue2Leaflet: v2.2.1
    Reviewed by bestmazzo at 2019-11-29 11:04
  • 12. Performance problem with big amounts of LCircleMarker

    In our application we have a vue-leaflet map where we show groups of circle markers according to the current zoom level.

    When the number of markers is relatively low, say 100 per group, the transition between each zoom level is quite smooth.

    The problem arises when the number grows (depending on your computer speed): application starts to freeze for 1-2 or more seconds and only after some time, the circles appear.

    I have attached a code-sandbox reproducing the issue (it's basically a stripped down version of our real application).

    https://codesandbox.io/s/leaflet-circles-test-h4z2h

    In this sandbox, there's a component MyMap receiving the list of groups, each containing the list of circles to be rendered. Each group can be shown when current zoom is inside a specific range (specified by group object properties min/maxZoom). In the sandbox there are 3 groups:

    • countries (green circles)
    • regions (yellow circles)
    • provinces (provinces) containing circles randomly positioned around the map center "Rome"

    If you increase the "Number of circles per group" to, say, 1000 or more and press APPLY, you will see a big performance degradation (more in Firefox than Chrome).

    Any idea how to solve this (and what is the cause ?)

    Notes:

    • preferCanvas is ON
    • I know of MarkerCluster plugin, but I'd prefer to stick on base vue-leaflet, unless there's no other solution

    Browsers Affected

    • [x] Chrome
    • [x] Firefox

    Versions

    • Leaflet: v1.8.0
    • Vue: v2.6.14
    • Vue2Leaflet: v2.7.1
    Reviewed by digEmAll at 2022-05-18 13:17
  • 13. Leaflet in Dashboard Widget ( with vue-grid-layout) doesn't center

    Hi,

    I created a Dashboard using vue-grid-layout and used leaflet as one of my widget. Problem occured when I try to instanciate the widget, the map is actually not centered. However, update is done if I resize by navigator windows or if I open devtools or if I directly change center lat and long parameter in my code... any idea ?

    Here is my code :

    <template>
      <div class="mt-4">
        <l-map ref="map"
               :zoom="zoom"
               :center="center"
               @update:zoom="zoomUpdated"
               @update:center="centerUpdated"
               style="height: 360px; width: 100%"
        >
          <l-tile-layer
              :url="url"
          />
          <l-marker :lat-lng="marker"/>
        </l-map>
      </div>
    </template>
    
    <script>
    import {LMap, LTileLayer, LMarker} from "vue2-leaflet";
    
    export default {
      name: "MapWidget",
      components: {
        LMap,
        LTileLayer,
        LMarker,
      },
      data() {
        return {
          url: "https://{s}.tile.osm.org/{z}/{x}/{y}.png",
          zoom: 8,
          center: [0, 0],
          marker: [48.771667, -3.968333]
        };
      },
      watch: {
        center() {
          this.centerUpdated(this.center)
        }
      },
      mounted() {
        this.center = [48.771667, -3.968333]
      },
      methods: {
        zoomUpdated(zoom) {
          this.zoom = zoom;
          console.log(this.markers)
        },
        centerUpdated(center) {
          this.center = center;
    
        }
      }
    };
    </script>
    

    Browsers Affected

    Chrome Firefox Edge

    Versions

    • Leaflet: v1.7.1
    • Vue: v2.6.11
    • Vue2Leaflet: v2.7.1
    Reviewed by CharlotteAndre at 2022-05-16 15:17
  • 14. Cannot read properties of undefined (reading '_leaflet_pos')

    Hello, im having issue with Cannot read properties of undefined (reading '_leaflet_pos'). Im using two components and two maps. One map enabled when window width is > 800, another one when < 800. When resizing window i always get this error:

    app.js:58878 Uncaught TypeError: Cannot read properties of undefined (reading '_leaflet_pos') at getPosition (app.js:58878)

    is there any way to prevent this?

    Versions

    "leaflet": "^1.7.1", "vue2-leaflet": "^2.7.1" "vue": "^2.6.14",

    Reviewed by ErikasMasaitis at 2022-05-03 19:16
  • 15. chore(deps): bump minimist from 1.2.5 to 1.2.6

    Bumps minimist from 1.2.5 to 1.2.6.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-04-08 22:11
  • 16. Suggestion for icon rotate / rotation / rotating - easy solution

    Hi -

    After spending a number of frustrating hours trying to figure out how to rotate icons, I finally found a plug-in that worked... but it also rotated the labels!

    Going back to basics, I found a solution that is extremely simple, and does not rotate the label along with the marker. I hope this solution might be put into the docs somewhere so that others are saved this effort.

    Example:

    <l-icon :icon-size="Icon.size" :icon-anchor="Icon.anchor">
          <img :src="Icon.url" :style="'transform: rotate(' + angle + 'deg)'"/>
          <div>{{ label }}</div>
    </l-icon>
    

    This relies on CSS transform rotate, no plug-in needed, and can be used within a Vue template rather than via JavaScript to affect the marker.

    -Ken

    Reviewed by kps1ny at 2022-03-24 15:30
  • 17. Add scale option for nautical miles

    Thanks for all the hard work with Vue2 Leaflet. I've just come to incorporate it into a web site and it's wonderful to work with.

    My application uses nautical miles for its base unit and it would be great to have an option besides :imperial and :metric in the tag, perhaps called :nautical or :nm, to show them (as well as the others).

    (If Leaflet itself does not support nautical miles, and therefore you can't, I can post an Issue there as well if need be.)

    -Ken

    Reviewed by kps1ny at 2022-03-18 18:21
Related tags
A set of composable components for easy use of Google Maps in your Vue 3 projects.

A set of composable components for easy use of Google Maps in your Vue 3 projects.

May 26, 2022
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

May 23, 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

May 24, 2022
Integrate Google Maps in your Vue application
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

Apr 10, 2022
A lightweight Google Maps plugin for Vue
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

Apr 22, 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:

May 10, 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

May 19, 2022
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

Apr 22, 2022
πŸ“ 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-

Oct 31, 2021
Yandex Maps Component for VueJS
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

May 21, 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.

May 14, 2022
Annotate maps and generate GeoJSON in Kirby by drawing markers, paths and shapes
Annotate maps and generate GeoJSON in Kirby by drawing markers, paths and shapes

Kirby Mapnotator Annotate maps and generate GeoJSON in Kirby by drawing markers, paths and shapes. Overview This plugin is completely free and publish

Apr 27, 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

Mar 21, 2022
Baidu Map components for Vue 2.x
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

May 24, 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

May 19, 2022
Vue 2.x components for CesiumJS.
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

May 23, 2022
Web map Vue 3.x components with the power of OpenLayers
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

May 26, 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

May 26, 2022
a library of vue components used by mapping applications
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

Apr 21, 2022