Vue-simple-maps NPM

vue-simple-maps

vue-simple-maps is library to easily build SVG maps with Vue, d3 and TopoJSON-client.

Features

Responsive out of the box
Customize map with any svg objects
Zoom and drag on all devices
Automatic transform lightweight TopoJSON to functional GeoJSON

Installation

npm

npm install vue-simple-maps

yarn

yarn add vue-simple-maps

CDN

<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>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-simple-maps@latest/dist/vue-simple-maps.css"></script>
  </head>
</html>

Usage

Install vue plugin

import Vue from 'vue';
import VueSimpleMaps from 'vue-simple-maps';
import 'vue-simple-maps/dist/vue-simple-maps.css';
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