A Vue JS component for displaying dynamic data on a world map.

Last update: May 10, 2022

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 from amCharts

Installation

Install via npm using npm install vue-world-map

Usage

This component is most useful in creating a heat map for various countries. And will color countries differently based on a props passed.

The component requires a prop of countryData to be passed to it, which is a JS object formatted like so.

{
  US: 100,
  CA: 120,
  UK: 400,
}

Where the key is a country's ISO 3166 Code and the value is a numerical value associated with it.

API

Props Description Optional
countryData See Usage Section above for details no
lowColor Countries with lower values will be colored more strongly with this color yes
highColor Countries with higher values will be colored more strongly with this color yes
defaultCountryFillColor Countries with no data will default to this color yes
countryStrokeColor The color of the border around countries yes

GitHub

https://github.com/Ghrehh/vue-world-map
You might also like...

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

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

Render every single road in any city, The data is fetched from OpenStreetMap using overpass API.

Render every single road in any city, The data is fetched from OpenStreetMap using overpass API.

Render every single road in any city, The data is fetched from OpenStreetMap using overpass API.

May 27, 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
Comments
  • 1. Fix Jest localStorage issue, fix incorrect ISO 3166 code in for the United Kingdom in a test

    An update to Jest or a related package had broken the test for this app, fixed it using the method listed here.

    Also fixes the incorrect ISO 3166 code being used for the United Kingdom in a test, as pointed out in #1.

    Reviewed by Ghrehh at 2019-04-26 20:50
  • 2. Printing Country Full Name

    Hi There,

    I love the plugin but would like the option to print the full country name rather than the country_code in the view.

    Is there a way to do this or to support the passing of the full country name instead?

    I think showing the full name rather than the ISO will be clearer for my visitors.

    Thanks.

    [ Screenshot 2021-01-25 at 16 31 45 Screenshot 2021-01-25 at 16 32 19

    ](url)

    Reviewed by andyslack at 2021-01-25 15:33
  • 3. Hover events added

    mouseenter and mouseleave event listeners added so that additional data/effects can be shown on hover of the country. Readme updated to document the same functionality

    Reviewed by mrityunjaygr8 at 2019-08-28 19:10
  • 4. Refactor Custom Styling

    Refactored how the custom styling for the SVG works, it will no longer create style tags, but instead add in-line styles to the SVG paths.

    Renames "dynamic-map-css" to "dynamic-map-helpers" since it only has helper functions in it now, and the dynamic CSS is done in the Map component.

    Deletes tests for removed code. Adds tests for helper functions.

    Updated README.

    Reviewed by AustinCarr at 2019-07-15 16:26
VuePeople lists and connects Vue.JS developers around the world.

VuePeople lists and connects Vue.JS developers around the world.

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

Feb 12, 2022
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 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