vue-simple-maps is library to easily build SVG maps with Vue, d3 and TopoJSON-client.
- Responsive out of the box
- Customize map with any svg objects
- Zoom and drag on all devices
- Automatic transform lightweight TopoJSON to functional GeoJSON
npm
npm install vue-simple-mapsyarn
yarn add vue-simple-mapsCDN
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@latest/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-simple-maps@latest/dist/vue-simple-maps.min.js"></script>
</head>
</html>- Install vue plugin
import Vue from 'vue';
import VueSimpleMaps from 'vue-simple-maps';
Vue.use(VueSimpleMaps);Nuxt.js
Put previouse 👆 code into ~/plugins/vue-simple-maps.js
// nuxt.config.js
plugins: ['~/plugins/vue-simple-maps.js'];- Create component
<template>
<map v-if="mapData" :data="mapData" :projection="projection">
<MapFeatures />
</map>
</template>
<script>
import { geoEqualEarth } from 'd3-geo';
export default {
data: () => ({
mapData: undefined,
projection: geoEqualEarth,
}),
mounted() {
// fetch topojson map
fetch(
'https://raw.githubusercontent.com/deldersveld/topojson/master/world-countries.json'
)
.then((r) => r.json())
.then((d) => (this.mapData = d));
},
};
</script>Viola
See more examples or learn API
MIT licensed. Copyright © 2020 Georgiy Bukharov. See LICENSE for more details.