A vue.js component for an easier usage of Leaflet

Related tags

Map easy-vue-leaflet
Overview

easy-vue-leaflet

A vue.js component for an easier usage of Leaflet

Table of content

Install

How to install easy-vue-leaflet ?

First, you need to import this module in your vue project with npm :

    npm install --save easy-vue-leaflet leaflet

Then, go in your vue template and import the component in your Vue.js project and import the easy-vue-leaflet component like the code below.

Don't forget to set the whished start view in the options (View the Options prop).
Don't forget to add the css import

">

  




Now, you are ready to use it. Follow the Usage section for more details. You don't need to import any other CSS or JS file.

Optional
By default, the leaflet map have a this size :

  • width : 100%
  • height: 500px
  • z-index: 0

But your could redefine these properties by adding a style property and modify the #leaflet element.


   




Usage

Props

Options :

options is an object with some parameters :

  • view define the initialisation view, it requires tree params :
    • lat, the latitude of the center of the vue
    • lng, the longitude of the center of the vue
    • zoom, the zoom level of the map
... data() { return { ... options : { view : { lat: 48.5, lng: 0.5, zoom: 3, } } ... }; } ...">

   

...
data() {
    return  {
        ...
        options : {
            view : {
                lat: 48.5,
                lng: 0.5,
                zoom: 3,
            }
        }
        ...
    };
}
...

Disabled :

disabled is a boolean props which is optional (disabled = false by default):

When disabled is true, drag and scroll are disabled. So, users cannot change the current view.

">

   

Markers :

markers is an array of marker object which contains :

... data() { return { ... markers : [ { ..., position : { lat : ..., // the latitude of the marker lng : ... // the longitude of the marker }, ... }, ... ] ... }; }">

   

...
data() {
    return  {
        ...
        markers : [
            {
                ...,
                position : {
                    lat : ..., // the latitude of the marker
                    lng : ... // the longitude of the marker
                },
                ...
            },
            ...
        ]
        ...
    };
}

The markers display is automatically refresh when array of markers change.
But if you modify data in marker which was already added to the array, you should specify the update to easy-vue-leaflet by adding a property updated: true to the modified marker.

// Method call when markerin event (@markerin)
onMarkerIn(event) {
    const {marker} = event; // get the hovered marker
    marker.position.lat += 0.5; // add 0.5° to the latitude
    marker.position.lng -= 0.5; // remove 0.5° to the longitude
    marker.updated = true; // apply change 
}

Circles :

circles is an array of circle object which contains :

... data() { return { ... circles : [ { ..., position : { lat : ..., // the latitude of the marker lng : ... // the longitude of the marker }, radius: ... // the radius of the circle (in meters) ... }, ... ] ... }; }">

   

...
data() {
    return  {
        ...
        circles : [
            {
                ...,
                position : {
                    lat : ..., // the latitude of the marker
                    lng : ... // the longitude of the marker
                },
                radius: ... // the radius of the circle (in meters)
                ...
            },
            ...
        ]
        ...
    };
}

The circles display is automatically refresh when array of circles change.
But if you modify data in circle which was already added to the array, you should specify the update to easy-vue-leaflet by adding a property updated: true to the modified circle.

// Method call when circlein event (@circlein)
onMarkerIn(event) {
    const {circle} = event; // get the hovered circle
    circle.radius += 2000; // add 2 km to his radius
    circle.updated = true; // apply change 
}

Circle have an optional property color to change the color of the circle.
It can take a name of color : red, blue, black, ...
or a hexa code : #fff, #3388ff, ...
or you can set it to null to have the default color.

You can set it to * or other invalid color to make a circle without border.

By default color property is set to #3388ff

...
data() {
    return  {
        ...
        circles : [
            {
                ...,
                position : { ... },
                radius: ... // the radius of the circle (in meters)
                color: 'red', // [optional] the color of the circle (#3388ff by default)
                ...
            },
            ...
        ]
        ...
    };
}

Popup

You can bind popup to markers and circles by adding to them a property popup.
This property take some parameters :

  • content : the content of the popup
  • show : if the popup is open or not (optional : true by default)
...
data() {
    return  {
        ...
        markers : [
            {
                ...,
                position : {
                    lat : ..., // the latitude of the marker
                    lng : ... // the longitude of the marker
                },
                popup: {
                    content: 'blou', // an open popup that have with the 'blou' text
                }
                ...
            },
            ...
        ],
        circles : [
            {
                ...,
                position : {
                    lat : ..., // the latitude of the marker
                    lng : ... // the longitude of the marker
                },
                radius: ..., // the radius of the circle (in meters)
                popup: { 
                    content: 'blou', // a popup that have with the 'blou' text
                    show: false, // set the popup closed
                }
                ...
            },
            ...
        ]
        ...
    };
}

If you modify the state or the content of the popup don't forget to set the proporty updated to true of the parent object (namely the marker or the circle)

onMarkerIn(event) {
    const {marker} = event; // get the hovered marker
    marker.position.popup.show = true; //open the popup
    marker.updated = true; // apply change 
}

Events

ready :

ready event is fire when the map was being initialized and is ready to interract with it.

viewchanged :

viewchanged event is fire when zoom change or when map is moved. It is also fire at the initialisation state (after the ready event) This event return an object with the new bounds and the new zoom level Result :

{
    view : {
        NW: "54.188155,17.841797", // the north west postion in lat,lng format
        SE: "39.266284,13.579102", // the south east position in lat,lng format
        zoom: 5, // the new zoom level
        center: { // the position of the center of the view
            lat: 46.727549, // the latitude of the center
            lng: 15.710450 // the longitude of the center 
        }
    }
}

mapclick

mapclick event is fire when user click on the map, but not on a layer (like marker, etc ...).
This is usefull to give the posibility to set a new marker for example. This event return an object with a postion object, like this :

{
    position: {
        lat: 45.5, // the latitude of the click
        lng: 6.8 // the longitude of the click
    }
}

markerclick :

markerclick event is fire when the user click on a marker. This event return the inital object with a marker field which contains the original object used to create the marker.
For example,

data() {
    return  {
        markers : [
            {
                id: 1
                position : {
                    lat : 45, // the latitude of the marker
                    lng : 5 // the longitude of the marker
                },
                color: black
            },
            {
                id: 2
                position : {
                    lat : 44, // the latitude of the marker
                    lng : 6 // the longitude of the marker
                },
                color: white
            },
        ]
    };
}

If you click on the first marker, you will have the object :

{
    marker : {
        id: 1
        position : {
            lat : 45,
            lng : 5
        },
        color: black
    },
}

markerin :

markerin event is fire when the mouse enter on a marker. This event return the inital object with a marker field which contains the original object used to create the marker.
For example,

data() {
    return  {
        markers : [
            {
                id: 1
                position : {
                    lat : 45, // the latitude of the marker
                    lng : 5 // the longitude of the marker
                },
                color: black
            },
            {
                id: 2
                position : {
                    lat : 44, // the latitude of the marker
                    lng : 6 // the longitude of the marker
                },
                color: white
            },
        ]
    };
}

If you hover the first marker, you will have the object :

{
    marker : {
        id: 1
        position : {
            lat : 45,
            lng : 5
        },
        color: black
    },
}

markerout :

markerout event is fire when the mouse leave from a marker. This event return the inital object with a marker field which contains the original object used to create the marker.
For example,

data() {
    return  {
        markers : [
            {
                id: 1
                position : {
                    lat : 45, // the latitude of the marker
                    lng : 5 // the longitude of the marker
                },
                color: black
            },
            {
                id: 2
                position : {
                    lat : 44, // the latitude of the marker
                    lng : 6 // the longitude of the marker
                },
                color: white
            },
        ]
    };
}

If you put out your mouse of the first marker, you will have the object :

{
    marker : {
        id: 1
        position : {
            lat : 45,
            lng : 5
        },
        color: black
    },
}

circleclick :

circleclick event is fire when the user click on a circle. This event return the inital object with a marker field which contains the original object used to create the marker.
For example,

data() {
    return  {
        circles : [
            {
                id: 1
                position : {
                    lat : 45, // the latitude of the marker
                    lng : 5 // the longitude of the marker
                },
                radius: 10000,
            },
            {
                id: 2
                position : {
                    lat : 44, // the latitude of the marker
                    lng : 6 // the longitude of the marker
                },
                radius: 10000,
            },
        ]
    };
}

If you click on the first circle, you will have the object :

{
    circle : {
        id: 1
        position : {
            lat : 45,
            lng : 5
        },
        radius: 10000,
    },
}

circlein :

circlein event is fire when the mouse enter on a circle. This event return the inital object with a circle field which contains the original object used to create the circle.
For example,

data() {
    return  {
        circles : [
            {
                id: 1
                position : {
                    lat : 45, // the latitude of the circle
                    lng : 5 // the longitude of the circle
                },
                radius: 10000 // the radius of the circle
            },
            {
                id: 2
                position : {
                    lat : 44, // the latitude of the circle
                    lng : 6 // the longitude of the circle
                },
                radius: 15000 // the radius of the circle
            },
        ]
    };
}

If you hover the first circle, you will have the object :

{
    circle : {
        id: 1
        position : {
            lat : 45,
            lng : 5
        },
        radius: 10000 // the radius of the circle
    },
}

circleout :

circleout event is fire when the mouse leave from a circle. This event return the inital object with a circle field which contains the original object used to create the circle.
For example,

data() {
    return  {
        circles : [
            {
                id: 1
                position : {
                    lat : 45, // the latitude of the circle
                    lng : 5 // the longitude of the circle
                },
                radius: 10000 // the radius of the circle
            },
            {
                id: 2
                position : {
                    lat : 44, // the latitude of the circle
                    lng : 6 // the longitude of the circle
                },
                radius: 15000 // the radius of the circle
            },
        ]
    };
}

If you put out your mouse of the first circle, you will have the object :

{
    circle : {
        id: 1
        position : {
            lat : 45,
            lng : 5
        },
        radius: 10000
    },
}
Issues
  • Bump lodash from 4.17.15 to 4.17.19

    Bump lodash from 4.17.15 to 4.17.19

    Bumps lodash from 4.17.15 to 4.17.19.

    Release notes

    Sourced from lodash's releases.

    4.17.16

    Commits
    Maintainer changes

    This version was pushed to npm by mathias, a new releaser for lodash since your current version.


    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.

    dependencies 
    opened by dependabot[bot] 0
  • Bump ini from 1.3.5 to 1.3.8

    Bump ini from 1.3.5 to 1.3.8

    Bumps ini from 1.3.5 to 1.3.8.

    Commits
    • a2c5da8 1.3.8
    • af5c6bb Do not use Object.create(null)
    • 8b648a1 don't test where our devdeps don't even work
    • c74c8af 1.3.7
    • 024b8b5 update deps, add linting
    • 032fbaf Use Object.create(null) to avoid default object property hazards
    • 2da9039 1.3.6
    • cfea636 better git push script, before publish instead of after
    • 56d2805 do not allow invalid hazardous string as section name
    • See full diff in compare view
    Maintainer changes

    This version was pushed to npm by isaacs, a new releaser for ini since your current version.


    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.

    dependencies 
    opened by dependabot[bot] 0
  • Bump pug-code-gen from 2.0.2 to 2.0.3

    Bump pug-code-gen from 2.0.2 to 2.0.3

    Bumps pug-code-gen from 2.0.2 to 2.0.3.

    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.

    dependencies 
    opened by dependabot[bot] 0
  • Bump path-parse from 1.0.6 to 1.0.7

    Bump path-parse from 1.0.6 to 1.0.7

    Bumps path-parse from 1.0.6 to 1.0.7.

    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.

    dependencies 
    opened by dependabot[bot] 0
  • Bump glob-parent from 5.1.0 to 5.1.2

    Bump glob-parent from 5.1.0 to 5.1.2

    Bumps glob-parent from 5.1.0 to 5.1.2.

    Release notes

    Sourced from glob-parent's releases.

    v5.1.2

    Bug Fixes

    v5.1.1

    Bug Fixes

    Changelog

    Sourced from glob-parent's changelog.

    5.1.2 (2021-03-06)

    Bug Fixes

    6.0.0 (2021-05-03)

    ⚠ BREAKING CHANGES

    • Correct mishandled escaped path separators (#34)
    • upgrade scaffold, dropping node <10 support

    Bug Fixes

    • Correct mishandled escaped path separators (#34) (32f6d52), closes #32

    Miscellaneous Chores

    • upgrade scaffold, dropping node <10 support (e83d0c5)

    5.1.1 (2021-01-27)

    Bug Fixes

    Commits
    • eb2c439 chore: update changelog
    • 12bcb6c chore: release 5.1.2
    • f923116 fix: eliminate ReDoS (#36)
    • 0b014a7 chore: add JSDoc returns information (#33)
    • 2b24ebd chore: generate initial changelog
    • 9b6e874 chore: release 5.1.1
    • 749c35e ci: try wrapping the JOB_ID in a string
    • 5d39def ci: attempt to switch to published coveralls
    • 0b5b37f ci: put the npm step back in for only Windows
    • 473f5d8 ci: update azure build images
    • Additional commits viewable in compare view

    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.

    dependencies 
    opened by dependabot[bot] 0
  • Bump lodash from 4.17.19 to 4.17.21

    Bump lodash from 4.17.19 to 4.17.21

    Bumps lodash from 4.17.19 to 4.17.21.

    Commits
    • f299b52 Bump to v4.17.21
    • c4847eb Improve performance of toNumber, trim and trimEnd on large input strings
    • 3469357 Prevent command injection through _.template's variable option
    • ded9bc6 Bump to v4.17.20.
    • 63150ef Documentation fixes.
    • 00f0f62 test.js: Remove trailing comma.
    • 846e434 Temporarily use a custom fork of lodash-cli.
    • 5d046f3 Re-enable Travis tests on 4.17 branch.
    • aa816b3 Remove /npm-package.
    • See full diff in compare view
    Maintainer changes

    This version was pushed to npm by bnjmnt4n, a new releaser for lodash since your current version.


    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.

    dependencies 
    opened by dependabot[bot] 0
Owner
Antoine Pinot
Antoine Pinot
A Vue.js component for Mapbox GL JS

Mapbox GL JS Vue.js A simple lightweight (9kb/3kb gzipped) Mapbox GL JS Vue component. Demo Installation Setup Props Events Plugins Popups Development

Pete Hegman 262 Nov 21, 2021
Choropleth Map component for Vue.js

vue-choropleth Vue components to display a choropleth map given a certain GeoJSON and another datasource to show information from. Using Vue2Leaflet H

Guillermo Peralta Scura 110 Jan 2, 2022
vue google map custom marker component

vue2-gmap-custom-marker This component allows you to display custom HTML content on the map using Overlay. This component is an adaptation of the Goog

eric regnier 124 Jan 14, 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
A Vue JS component for displaying dynamic data on a world map.

This is no longer being maintained, please do not open issues or PRs. Vue World Map A Vue JS Component for displaying dynamic data on a world map. Map

Gerard Burns 39 Jan 16, 2022
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 simple component to generate an static google map

vue-static-map a simple component to generate an static google map Google Documentation Demo SandBox JSBin example Requirements Vue 2.X.X Usage Instal

Eduardo P. Rivero 22 Sep 18, 2021
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
🔍 Google Place Autocomplete Search - Renderless component + Wrappers for Bulma, Bootstrap and more...

vue-custom-google-autocomplete Installation You need Vue.js version 2.0+ and an Google PLACE API key. This plugin is a renderless component. It comes

Damien Roche 29 Dec 9, 2021
🗺 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
Отрисовка карты офиса и круговой диаграммы Vue.js с использованием библиотек D3.js, vue-chartjs, vuedraggable

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

Zoya 0 Dec 5, 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
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
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
A cloned & maintained version of vue-mapbox

V-Mapbox ?? Combine powers of Vue.js and Mapbox GL JS NOTE: This is a maintained version of vue-mapbox V-Mapbox is wrapper around Mapbox GL JS library

GeoSpoc 78 Jan 18, 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
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.

Inocan Group 39 Jan 16, 2022
Wrapper for vue-mapbox-geocoder

v-mapbox-geocoder ?? v-mapbox plugin for mapbox-gl-geocoder support. Setup First of all you need to install mapbox-gl-geocoder and v-mapbox. See v-map

GeoSpoc 8 Sep 18, 2021