victorcazanave/vue-svg-map

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-svg-map

yarn

yarn add vue-svg-map

Usage

Install the map you need from svg-maps or use your own map. See maps section for more details.

🌍 Simple SVG Map

This is the base component to display an SVG map.

In a SFC (Single File Component):

• Import SvgMap component from vue-svg-map
• Import the map you want
• Optionally, import vue-svg-map/dist/index.css if you want to apply the default styles

<template>
	<svg-map :map="Taiwan" />
</template>

<script>
import { SvgMap } from "vue-svg-map";
import Taiwan from "@svg-maps/taiwan";

export default {
	name: "MyMap",
	components: {
		SvgMap
	},
	data() {
		return {
			Taiwan
		};
	}
};
</script>

<style src="vue-svg-map/dist/index.css"></style>

Props

Prop	Type	Default	Description
map	Object	required	Describe SVG map to display. See maps section for more details.
location-class	String|Function	null	CSS class of each <path>. The function parameters are the location object and the location index.
location-tabindex	String|Function	null	Tabindex each <path>. The function parameters are the location object and the location index.
location-role	String	null	ARIA role of each <path>.
is-location-selected	Function	null	Executed to determine if a location is selected. This property is used to set the aria-checked HTML attribute.

Note: other HTML attributes (e.g. style, title, data-*...) can be added to and customized for each <path> modifying the map object.

Events

All the listeners (click, keypress...) are applied to each location.

Slots

There are 2 named slots:

• before which is before the locations
• after which is after the locations

☑️ Checkbox SVG Map

This is an implementation of SvgMap that behaves like a group of checkboxes.
It is based on this WAI-ARIA example to support keyboard navigation and be accessible.

• Import CheckboxSvgMap component from vue-svg-map
• Import the map you want
• Optionally, import vue-svg-map/dist/index.css if you want to apply the default styles

<template>
	<checkbox-svg-map v-model="selectedLocations" :map="Taiwan" />
</template>

<script>
import { CheckboxSvgMap } from "vue-svg-map";
import Taiwan from "@svg-maps/taiwan";

export default {
	name: "MyCheckboxMap",
	components: {
		CheckboxSvgMap
	},
	data() {
		return {
			Taiwan,
			selectedLocations: []
		};
	}
};
</script>

<style src="vue-svg-map/dist/index.css"></style>

Props

Prop	Type	Default	Description
map	Object	required	Describe SVG map to display. See maps section for more details.
value	String[]	[]	List of ids of selected locations. Used for v-model.
location-class	String|Function	null	CSS class of each <path>. The function parameters are the location object and the location index.

Note: other HTML attributes (e.g. style, title, data-*...) can be added to and customized for each <path> modifying the map object.

Events

Like for SvgMap all the listeners (click, keypress...) are applied to each location.

Event	Output	Description
change	String[]	Emits the new list of ids when a location is selected/unselected. Used for v-model.

Slots

Like in SvgMap there are 2 named slots:

• before which is before the locations
• after which is after the locations

Note: inserting focusable elements may break the checkboxes' behaviour.

🔘 Radio SVG Map

This is an implementation of SvgMap that behaves like a group of radio buttons.
It is based on this WAI-ARIA example to support keyboard navigation and be accessible.

• Import RadioSvgMap component from vue-svg-map
• Import the map you want
• Optionally, import vue-svg-map/dist/index.css if you want to apply the default styles

<template>
	<radio-svg-map v-model="selectedLocation" :map="Taiwan" />
</template>

<script>
import { RadioSvgMap } from "vue-svg-map";
import Taiwan from "@svg-maps/taiwan";

export default {
	name: "MyRadioMap",
	components: {
		RadioSvgMap
	},
	data() {
		return {
			Taiwan,
			selectedLocation: null
		};
	}
};
</script>

<style src="vue-svg-map/dist/index.css"></style>

Props

Prop	Type	Default	Description
map	Object	required	Describe SVG map to display. See maps section for more details.
value	String	null	Id of selected location. Used for v-model.
location-class	String|Function	null	CSS class of each <path>. The function parameters are the location object and the location index.

Note: other HTML attributes (e.g. style, title, data-*...) can be added to and customized for each <path> modifying the map object.

Events

Like for SvgMap all the listeners (click, keypress...) are applied to each location.

Event	Output	Description
change	String	Emits the new id when a location is selected. Used for v-model.

Slots

Like in SvgMap there are 2 named slots:

• before which is before the locations
• after which is after the locations

Note: inserting focusable elements may break the radio buttons' behaviour.

Maps

Existing maps

All the existing maps are in an independant svg-maps project because they may be useful for other components/projects.

Custom maps

You can modify existing maps or create your own.

Modify a map

1. Import the map to modify
2. Create a new object from this map
3. Pass this new object as map prop of the component

<template>
	<svg-map :map="customTaiwan" />
</template>

<script>
import { SvgMap } from "vue-svg-map";
import Taiwan from "@svg-maps/taiwan";

export default {
	name: "MyMap",
	components: {
		SvgMap
	},
	data() {
		return {
			customTaiwan: {
				...Taiwan,
				label: "Custom map label",
				locations: Taiwan.locations.map(location => {
					// Modify each location to customize/add attributes of <path>
				})
			}
		};
	}
};
</script>

It is recommended to not modify the SVG properties (viewBox, path), because it may break the map's display.

Create a map

If you create a new map (other country, city...), feel free to contribute to svg-maps project!

License

MIT

vue-svg-map's Issues

Zoom

Hello,

In advance, thank you very much for the package, it is very easy to use and very good.

Will the zoom functionality ever arrive?

Excuse my writing, I'm not very good with English.

Maps don't work with class component syntax

Was working with USA map, does not render when using class component syntax

Add markers on map

Hello,

Is it planned to have the possibility to add markers on the map please?

It would indeed seem very interesting to be able to add markers and to have a label by placing the mouse on it.

Thank you for your work!
Val'

RadioSvgMap throws error in development mode.

using RadioSvgMap in Vue w/ TypeScript. Development mode throws 'Failed to mount component: template or render function not defined.'.

export TooltipHeatMap was not found in vue-svg-map

where is tooltip heat map

am using vue-svg-map for showing heat map with tooltip but i cant find it

There is no computed style property for the map

Even if the map includes the property to select custom classes for each location, there is no feasible way to computed the color based on input data. Take for example a heat map, lets say each country has some datapoint, and will be colored acording to this datapoint, is not possible to generate a class for each country, there must be a computed style, not class.

is it possible to have svg map pan zoom?

I'm using the map to display the users stats based on their country or region but there are some countries that are too small to be seen so is it possible to have SVG map pan zoom like the same zoom in this map demo?
also, thanks for this amazing package saved me lots of time!

Nuxt (Unexpected token 'export')

I'm not sure what's wrong.. I've follow all the instructions for a simple map. But this error pops out instead.

Thank you replying

Vue Property for SVG Maps for icons and labels

I am trying to add span text onto the individual states to indicate States and potentially number of cities. Do you know if there is an easy way to do this?

Render error in Vue3

I can't make it work in Vue3.
During render I got warning "Property "$createElement" was accessed during render but is not defined on instance."
Essentially _vm.$createElement is undefined.

Here's my component:

<template>
  <vue-svg-map :map="Taiwan"></vue-svg-map>
</template>

<script>
import { SvgMap } from 'vue-svg-map';
import Taiwan from '@svg-maps/taiwan';

export default {

  components: {
    'chart': Chart,
    'vue-svg-map': SvgMap,
  },

	data() {
		return {
			Taiwan
		};
	}


}
</script>

How to add State names or codes

Is it possible to show State Names or Codes on usa.svg? I know I should use slot and text, but could you give an example, please?