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.

: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="https://github.com/VictorCazanave/vue-svg-map/raw/master/vue-svg-map/dist/index.css"></style>

Props

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

: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="https://github.com/VictorCazanave/vue-svg-map/raw/master/vue-svg-map/dist/index.css"></style>

Props

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.

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="https://github.com/VictorCazanave/vue-svg-map/raw/master/vue-svg-map/dist/index.css"></style>

Props

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.

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