Choropleth Map component for Vue.js

Last update: Feb 12, 2022

vue-choropleth

Downloads Version License contributions welcome

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

Image of Paraguay Choropleth

How to use

For a complete example using a single-file component, check the code in the example.

For a complete example using script tags check this codepen

Make sure you have Vue2Leaflet installed and add the l-map component along with the next vue-choropleth components:

import {LMap} from 'vue2-leaflet';
import { InfoControl, ReferenceChart, ChoroplethLayer } from 'vue-choropleth'

// Register these components in the components

export default {
  name: "app",
  components: { 
    LMap,
    'l-info-control': InfoControl, 
    'l-reference-chart': ReferenceChart, 
    'l-choropleth-layer': ChoroplethLayer 
  },
  // .......your component code.........

Make sure the leaflet.css is included, either via a HTML link tag or in your vue component style

@import "~leaflet/dist/leaflet.css";

On the template:

<l-map 
  :center="[-23.752961, -57.854357]" 
  :zoom="6" 
  style="height: 500px;" 
  :options="mapOptions">
    <l-choropleth-layer 
      :data="pyDepartmentsData" 
      titleKey="department_name" 
      idKey="department_id" 
      :value="value" 
      :extraValues="extraValues" 
      geojsonIdKey="dpto" 
      :geojson="paraguayGeojson" 
      :colorScale="colorScale">
        <template slot-scope="props">
          <l-info-control 
            :item="props.currentItem" 
            :unit="props.unit" 
            title="Department" 
            placeholder="Hover over a department"/>
          <l-reference-chart 
            title="Girls school enrolment" 
            :colorScale="colorScale" 
            :min="props.min" 
            :max="props.max" 
            position="topright"/>
        </template>
    </l-choropleth-layer>
</l-map>

l-choropleth-layer Props

  • geojson: The GeoJSON object to use
  • data: Data object with the information to show on the map
  • titleKey: Property of the data object to show when you hover over a certain region of your map (e.g. state_name)
  • geojsonIdKey: Property under the properties array of the GeoJSON that serves as identifier of each region of the map.
  • idKey: Property of the data object that matches the geojsonIdKey value.
  • value: JS object with two properties, key: that maps to the data property that contains the value domain set (e.g. amount) and metric: that maps to the data property that describes the unit that you're working on (e.g. "% of students")
  • extraValues: Array of value objects that show additional information of a certain region of the map.
  • colorScale: Array of hex color codes to fill each region of the map with. At the minimum you need to specify two colors, the one to use with the lowest values and another one to use with the highest values. (e.g. ["e7d090", "de7062"]) The l-choropleth-layer component pass the this information through its default slot:
  • currentItem: Current item on focus
  • unit: metric associated with the value
  • min: The lowest value on the domain set
  • max: The highest value on the domain set
  • strokeColor: String with the color to use for each of the polygons' stroke color (in hex format). (e.g.: "e7d090"). If a value is not specified fff is used.
  • currentStrokeColor: String with the color to use for the stroke of the currently polygon that the user is hovering over. (e.g.: "e7d090"). If a value is not specified 666 is used.
  • strokeWidth: Number with the width of the stroke for each polygon. (default: 2).
  • currentStrokeWidth: Number with the width of the stroke for the currently hovered polygon. (default: 5).

As seen on the example, usually you'll pass these values to the l-info-control and l-reference-chart components.

l-info-control props

This is the current item information view.

  • item: Item to show information about
  • unit: Metric to use while displaying information
  • title: Description about what each item of the map is (e.g. "State")
  • placeholder: Placeholder text to show when no element is currently selected
  • position: Where to render the component. With values allowed here (default: "bottomleft")

l-reference-chart props

  • title: Short description to show as reference of the information described by the map (e.g. "Population density")
  • colorScale: Same prop as used on l-choropleth-layer component
  • min: The lowest value represented on the visualization
  • max: The highest value represented on the visualization
  • position: Where to render the component. With values allowed here (default: "topright")

How to install

NPM

$ npm install vue-choropleth --save

yarn

$ yarn add vue-choropleth

Live Demo

Example available here.

Build Setup

# Once you have cloned this repo, install dependencies
$ npm install

# build for development and production with minification
$ npm run build

Run demo locally

# Run demo at localhost:8080
$ npm link
$ cd examples/node-example
$ npm link vue-choropleth
$ npm install
# serve with hot reload at localhost:8080
$ npm run dev

Go to http://localhost:8080/ to see the demo

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 demo

Web example

You'll also find an example using <script> tags included under examples/browser-example

Authors

Guillermo Peralta Scura

Thanks to the works of Mickaël Bouchaud with Vue2Leaflet

GitHub

https://github.com/voluntadpear/vue-choropleth
Comments
  • 1. Get data from API call

    So far I am able to load data from a static file and successfully render the map. However I would like to be able to load data from an API and finally update them on an event.

    I have tried this but nothing happens.

    export default {
      name: "app",
      components: { 
        'v-map': Vue2Leaflet.Map,
        'v-info-control': VueChoropleth.InfoControl, 
        'v-reference-chart': VueChoropleth.ReferenceChart, 
        'v-choropleth-layer': VueChoropleth.ChoroplethLayer 
      },
      data() {
        return {
          indexData: [],
          kallikratis,
          show: true,
          colorScale: ["F90606", "0616F9", "#00FF00"],
          value: {
            key: "value",
            metric: "%"
          },
          
          mapOptions: {
            attributionControl: false
          },
        }
      },
      created(){
        axios.get("/api/mapValues?index=1").then(response => {
        console.log(response.data);
        this.indexData = response.data;    
    }
    );
    },
    }
    

    Instead I get only the polygons without any color.

    Reviewed by skarampatakis at 2018-02-08 10:22
  • 2. Unexpected behavior when geojsonIdKey values of string type

    I'm having a problem colouring a map where the values for geojsonIdKey and the (data) idKey are strings (rather than integers).

    In src/components/ChoroplethLayer.vue the assumption there is an assumption that keys are numbers, and this appears deliberate. For example I see

    let itemGeoJSONID = Number(feature.properties[this.geojsonIdKey])
    

    for instance, in:

      data() {
        return {
          currentItem: { name: "", value: 0 },
          geojsonOptions: {
            style: feature => {
              let itemGeoJSONID = Number(feature.properties[this.geojsonIdKey])
              let color = "NONE"
              const {data} = this.geojsonData
              let item = data.find(x => x[this.idKey] === itemGeoJSONID)
              if (!item) {
                return {
                  color: "white",
                  weight: this.strokeWidth
                }
              }
    ...
    

    Because of this recasting of the geojsonIdKey as a number, the following externally sourced geojson/data combination doesn't work: geojson structured like

    geojson.features[0].properties.geojsonIdKey = "SA4101"
    geojson.features[1].properties.geojsonIdKey = "SA4102"
    geojson.features[2].properties.geojsonIdKey = "SA4103"
    ...en
    

    and data like

    [
      {idKey: "SA4101", value: 77},
      {idKey: "SA4102", value: 71},
      {idKey: "SA4103", value: 81},
      ....
    ]
    

    manually replacing these keys with alternative numerical fixes the issue, but is it actually necessary to make the assumption that geojsonIdKey and idKey are numbers?

    Reviewed by MichaelCouch at 2019-06-05 17:40
  • 3. Layer not render correctly (or what is expected) when the min value is 0.

    Hi, thank you for your very helpful plugin. I have managed to install it correctly and made some tests.

    However I am having a problem when the min value on the dataset is 0.

    If the only values on the dataset is 0 and 100, then I get this layer.

    image

    If I manually edit the data and insert a let say "dummy" item with value even 0.1 then the polygons with value 100 and the dummy get colored but those with 0 get no color again.

    image

    If there are other values between 0 and 100, then I get this layer

    image

    It seems that somehow the polygons with 0 value are ignored and have no color at all.

    Am I missing something? Do you have any suggestion? I believe that there must be something with the utils function but not sure. Thank you for your time.

    Reviewed by skarampatakis at 2018-02-07 18:20
  • 4. Allow adding Colorpleth map as a layer to an existing map

    Hi,

    I just discovered this library and I think it's really nice and elegant! My problem is that I already have a Vue2Leaflet map and only want to add a Colorpleth map as a GeoJSON layer. I guess it should not be too complicated to implement this as a layer + controls rather than a complete solution? I think this can be very useful!

    Thanks! Omri

    Reviewed by omrihar at 2017-12-20 10:30
  • 5. Bug in ReferenceChart before destroy

    Hello, In the beforeDestroy function of ReferenceChart and InfoControl, you wrote :

    beforeDestroy() {
        if (this.parent) {
          this.parent.removeLayer(this.mapObject)
        }
     }
    
    

    But the correct function to use to remove controls is actually :

          this.parent.removeControl(this.mapObject)
    

    Because of this, those two components are still present on the map when the parent choropleth component is destroyed.

    Reviewed by fchabouis at 2019-03-28 10:57
  • 6. Problem with

    I have an issue with the new props and got this warning:

    [Vue warn]: Invalid prop: type check failed for prop "strokeColor". Expected String, got Number. And same warning for currentStrokeColor too.

    If I use a number (like 666 or 999) I got this message. It doesn't work with six-characters values.

    Wondering if I use it wrong ?

    Thanks

    Reviewed by plicplic at 2018-10-01 22:32
  • 7. Bump elliptic from 6.4.0 to 6.5.3 in /examples/node-example

    Bumps elliptic from 6.4.0 to 6.5.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.

    Reviewed by dependabot[bot] at 2020-07-29 22:33
  • 8. Bump elliptic from 6.4.0 to 6.5.3

    Bumps elliptic from 6.4.0 to 6.5.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.

    Reviewed by dependabot[bot] at 2020-07-29 22:12
  • 9. Bump lodash from 4.17.4 to 4.17.19 in /examples/node-example

    Bumps lodash from 4.17.4 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.

    Reviewed by dependabot[bot] at 2020-07-16 00:08
  • 10. Bump lodash from 4.17.4 to 4.17.19

    Bumps lodash from 4.17.4 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.

    Reviewed by dependabot[bot] at 2020-07-15 23:31
  • 11. prevent error when data for geojson feature is missing

    if you have geojson features that are not part of your data object an execption is raised. if no item can be found for a given feature, assume no data is present.

    The following line caused an error because item is undefined in this situation:

    let tempItem = { name: item[this.titleKey], value: item[this.value.key] }
    
    Reviewed by spiderpug at 2019-06-06 09:22
  • 12. Bump async from 2.6.0 to 2.6.4 in /examples/node-example

    Bumps async from 2.6.0 to 2.6.4.

    Changelog

    Sourced from async's changelog.

    v2.6.4

    • Fix potential prototype pollution exploit (#1828)

    v2.6.3

    • Updated lodash to squelch a security warning (#1675)

    v2.6.2

    • Updated lodash to squelch a security warning (#1620)

    v2.6.1

    • Updated lodash to prevent npm audit warnings. (#1532, #1533)
    • Made async-es more optimized for webpack users (#1517)
    • Fixed a stack overflow with large collections and a synchronous iterator (#1514)
    • Various small fixes/chores (#1505, #1511, #1527, #1530)
    Commits
    Maintainer changes

    This version was pushed to npm by hargasinski, a new releaser for async 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.

    Reviewed by dependabot[bot] at 2022-04-28 00:53
  • 13. Bump chownr from 1.0.1 to 1.1.4 in /examples/node-example

    Bumps chownr from 1.0.1 to 1.1.4.

    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-02-11 04:26
  • 14. Bump shelljs from 0.7.8 to 0.8.5 in /examples/node-example

    Bumps shelljs from 0.7.8 to 0.8.5.

    Release notes

    Sourced from shelljs's releases.

    v0.8.5

    This was a small security fix for #1058.

    v0.8.4

    Small patch release to fix a circular dependency warning in node v14. See #973.

    v0.8.3

    Closed issues:

    • Shelljs print stderr to console even if exec-only "silent" is true #905
    • refactor: remove common.state.tempDir #902
    • Can't suppress stdout for echo #899
    • exec() doesn't apply the arguments correctly #895
    • shell.exec('npm pack') painfully slow #885
    • shelljs.exec cannot find app.asar/node_modules/shelljs/src/exec-child.js #881
    • test infra: mocks and skipOnWin conflict #862
    • Support for shell function completion on IDE #859
    • echo command shows options in stdout #855
    • silent does not always work #851
    • Appveyor installs the latest npm, instead of the latest compatible npm #844
    • Force symbolic link (ln -sf) does not overwrite/recreate existing destination #830
    • inconsistent result when trying to echo to a file #798
    • Prevent require()ing executable-only files #789
    • Cannot set property to of [object String] which has only a getter #752
    • which() should check executability before returning a value #657
    • Bad encoding experience #456
    • phpcs very slow #440
    • Error shown when triggering a sigint during shelljs.exec if process.on sigint is defined #254
    • .to\(file\) does not mute STDIO output #146
    • Escaping shell arguments to exec() #143
    • Allow multiple string arguments for exec() #103
    • cp does not recursively copy from readonly location #98
    • Handling permissions errors on file I/O #64

    Merged pull requests:

    ... (truncated)

    Changelog

    Sourced from shelljs's changelog.

    Change Log

    Unreleased

    Full Changelog

    Closed issues:

    • find returns empty array even though directory has files #922
    • exec() should support node v10 (maxbuffer change) #915
    • grep exit status and extra newlines #900
    • Travis CI currently broken #893
    • Drop node v4 support #873
    • cp -Ru respects the -R but not the -u #808

    Merged pull requests:

    v0.8.3 (2018-11-13)

    Full Changelog

    Closed issues:

    • Shelljs print stderr to console even if exec-only "silent" is true #905
    • refactor: remove common.state.tempDir #902
    • Can't suppress stdout for echo #899
    • exec() doesn't apply the arguments correctly #895
    • shell.exec('npm pack') painfully slow #885
    • shelljs.exec cannot find app.asar/node_modules/shelljs/src/exec-child.js #881
    • test infra: mocks and skipOnWin conflict #862
    • Support for shell function completion on IDE #859
    • echo command shows options in stdout #855
    • silent does not always work #851
    • Appveyor installs the latest npm, instead of the latest compatible npm #844
    • Force symbolic link (ln -sf) does not overwrite/recreate existing destination #830
    • inconsistent result when trying to echo to a file #798
    • Prevent require()ing executable-only files #789
    • Cannot set property to of [object String] which has only a getter #752

    ... (truncated)

    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-01-15 02:12
  • 15. Bump path-parse from 1.0.5 to 1.0.7

    Bumps path-parse from 1.0.5 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.

    Reviewed by dependabot[bot] at 2021-08-10 17:40
  • 16. Bump path-parse from 1.0.5 to 1.0.7 in /examples/node-example

    Bumps path-parse from 1.0.5 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.

    Reviewed by dependabot[bot] at 2021-08-10 17:34
  • 17. Bump tar from 2.2.1 to 2.2.2

    Bumps tar from 2.2.1 to 2.2.2.

    Commits
    • 523c5c7 2.2.2
    • 7ecef07 Bump fstream to fix hardlink overwriting vulnerability
    • 9fc84b9 Use {} for hardlink tracking instead of []
    • 15e59f1 Only track previously seen hardlinks
    • 4f85851 Ignore potentially unsafe files
    • See full diff 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.

    Reviewed by dependabot[bot] at 2021-08-04 05:44
Related tags
vue google map custom marker component
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

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

May 10, 2022
a simple component to generate an static google map
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

May 17, 2022
This component allows you to display custom HTML content on the map using Overlay
This component allows you to display custom HTML content on the map using Overlay

vue3-gmap-custom-marker This component allows you to display custom HTML content on the map using Overlay. This component is an update (a fork) from e

Apr 1, 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
New Sayobot Map Downloader Written by [email protected], [email protected], [email protected]
New Sayobot Map Downloader Written by Electron@12, Vite@2, Vue@3

SayoDownloader This software only provide in Chinese! 一个全新设计的小夜地图下载器

Feb 20, 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 quick way to start a web map application with Vue.js using MapLibre GL JS.
A quick way to start a web map application with Vue.js using MapLibre GL JS.

Vue.js map using MapLibre GL JS A quick way to start a web map application with Vue.js using MapLibre GL JS. A simple fullscreen map application is us

May 19, 2022
Directus-extension-svgmap-picker-interface - Select a value from a SVG Map box, built using vue.js
Directus-extension-svgmap-picker-interface - Select a value from a SVG Map box, built using vue.js

This extension is under development, it may take breaking changes. SVG Map Picke

Apr 8, 2022
A simple map & geolocation field, built on top of open-source services and Mapbox. Kirby 3 only.
A simple map & geolocation field, built on top of open-source services and Mapbox. Kirby 3 only.

Kirby Locator A simple map & geolocation field, built on top of open-source services and Mapbox. Overview This plugin is completely free and published

Apr 24, 2022
Kartobuilder - a php package for the laravel framework that works with the inertia jetstream stack to build your own map

Kartobuilder is a php package for the laravel framework that works with the inertia jetstream stack to build your own map.

May 3, 2022
🗺 Map Module for Nuxt 3

@nuxtjs/map Map module for Nuxt ✨ Release Notes ?? Read the documentation Features Nuxt 3 ready Easy integration with Google Maps & Leaflet Use only t

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

Mar 21, 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
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