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.

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.

:earth_africa: 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.

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

:ballot_box_with_check: 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.

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_button: 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.

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.

GitHub