SVG maps built with power of Vue and D3

Related tags

Map vue-simple-maps
Overview

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/[email protected]/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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

Issues
Owner
Georgiy Bukharov
Georgiy Bukharov
Web map Vue 3.x components with the power of OpenLayers

vue3-openlayers Web map Vue components with the power of OpenLayers Overview vue3-openlayers is components library that brings the powerful OpenLayers

Melih Altıntaş 223 Jan 24, 2022
Google maps component for vue with 2-way data binding

CONTRIBUTORS NEEDED! It's been increasingly difficult for me to make time to maintain this project. My projects at work have also gradually migrated a

Daniel Sim 1.8k Jan 8, 2022
Vue 2 components for Leaflet maps

Vue2Leaflet Vue2Leaflet is a JavaScript library for the Vue framework that wraps Leaflet making it easy to create reactive maps. How to install npm in

Vue Leaflet 1.8k Jan 21, 2022
Integrate Google Maps in your Vue application

vue-googlemaps Integrate Google Maps in your Vue application in a "Vue-way". This library is Work In Progress. More components will be available in th

Guillaume Chau 525 Jan 9, 2022
A lightweight Google Maps plugin for Vue

x5-gmaps (Live Demo) This is a lightweight Google Maps plugin for Vue. Samples/examples/tutorials Tutorial creating a COVID Heatmap Address Autocomple

Keagan Chisnall 101 Jan 7, 2022
Google maps component for vue with 2-way data binding

vue-google-maps Demo: Demo in production Showcase with a lot of features Presentation If you want to write google map this way : <map :center="{lat:

Guillaume Leclerc 547 Jan 14, 2022
A set of composable components for easy use of Google Maps in your Vue 3 projects.

A set of composable components for easy use of Google Maps in your Vue 3 projects.

Inocan Group 39 Jan 16, 2022
Reactive Vue 3 components for Google maps

Vue 3 Google maps Components Set of mostly used Google Maps components for Vue.js. Why this library exists? We heavily use Google Maps in our projects

Fawad Mirzad 55 Jan 12, 2022
Integrate Azure Maps in your Vue application

Vue Azure Maps Vue Azure Maps is a library for Vue.js that integrates Azure Maps. It offers several Vue components out of the box and supports custom

Ricardo Ruiz 21 Dec 27, 2021
Using Google Maps with Vue.js

stores-map Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Run

Edoardo Gargano 7 Mar 31, 2020
📍 Vue composable for Google Maps Places Autocomplete.

v-use-places-autocomplete ?? Vue composable for Google Maps Places Autocomplete. Though not a fork, this composable is fully inspired by react-google-

Robert Soriano 6 Oct 31, 2021
Yandex Maps Component for VueJS

vue-yandex-maps Documentation: RU, EN Contributors ✨ Thanks goes to these wonderful people (emoji key): Wormaster ?? Nikitenko Andrey ?? Kamil ?? Alex

null 310 Jan 23, 2022
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. Demo Take a look at the live demo! Installation npm npm install --save vue-s

Victor Cazanave 65 Jan 18, 2022
A simple map & geolocation field, built on top of open-source services and Mapbox. Kirby 3 only.

Kirby Locator A simple map & geolocation field, built on top of open-source services and Mapbox. Overview This plugin is completely free and published

Sylvain Julé 79 Dec 12, 2021
VuePeople lists and connects Vue.JS developers around the world.

VuePeople lists and connects Vue.JS developers around the world.

Pulilab 172 Dec 22, 2021
🔍 Google Place Autocomplete Search - Renderless component + Wrappers for Bulma, Bootstrap and more...

vue-custom-google-autocomplete Installation You need Vue.js version 2.0+ and an Google PLACE API key. This plugin is a renderless component. It comes

Damien Roche 29 Dec 9, 2021
🗺 Vue Mapbox GL - A small components library to use Mapbox GL in Vue

?? Vue Mapbox GL A small components library to use Mapbox GL in Vue. Installation & usage Have a look at the small guide for information on how to set

Studio Meta 36 Nov 9, 2021
Отрисовка карты офиса и круговой диаграммы Vue.js с использованием библиотек D3.js, vue-chartjs, vuedraggable

office-map Отрисовка карты офиса и круговой диаграммы Vue.js с использованием библиотек D3.js, vue-chartjs, vuedraggable загрузка из JSON информации о

Zoya 0 Dec 5, 2021
A Vue.js component for Mapbox GL JS

Mapbox GL JS Vue.js A simple lightweight (9kb/3kb gzipped) Mapbox GL JS Vue component. Demo Installation Setup Props Events Plugins Popups Development

Pete Hegman 262 Nov 21, 2021