Skip to content

souljorje/vue-simple-maps

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

vue-simple-maps

npm bundle size

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

docs | examples

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>
  </head>
</html>

Usage

  1. 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'];
  1. 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

License

MIT licensed. Copyright © 2020 Georgiy Bukharov. See LICENSE for more details.

Inspired with

react-simple-maps

About

SVG maps built with power of Vue and D3

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published