Vue-simple-svg-map NPM

Vue component to display an interactive SVG map. Zoom, drag, clicks, etc.

Installation

npm

npm install vue-simple-svg-map --save

Demo

https://walkerz88.github.io/vue-simple-svg-map/

Usage

Custom map

First of all you should get SVG image of your map with regions. For example this map of Moscow Regions and transform it to an array (only required parameter is d - path of your svg region):

[
  {
    id: '1',
    title: 'Мытищи',
    fill: '#ffffe0',
    stroke: '#878787',
    strokeWidth: 30,
    strokeLinejoin: 'bevel',
    d: 'm 11774.8,8296 -95,-80.2 75,-35.09 20,-95.23 135.1,-90.23 10,-35.09 -120.1,10.03 -5,40.1 -50,-15.04 -5,-140.35 20,-115.28 120.1,-150.37 -75.1,-55.15 45,-160.39 -90,-120.3 60,-15.03 -35,-105.27 260.1,-95.24 230,30.08 290.1,250.63 180,-10.03 45,20.04 -5,95.25 -90,20.04 -65,310.77 115,65.16 -25,35.09 565.1,486.22 -50,35.07 v 5.02 l -35,20.05 10,20.05 10,5.01 -10,10.03 -25,15.03 5,5.02 25,35.08 h 10 l -40,75.19 -50,-10.03 -15,15.05 50,75.18 -50,-5.01 -30,85.22 45,85.2 65,30.07 120.1,150.38 v 15.04 l -60.1,55.13 -65,180.45 15,95.24 230.1,-45.12 105,70.19 -105,160.39 -180.1,15.03 5,45.12 -135,10.03 v 135.33 l -370.1,-330.83 -75,-10.01 -50,-5.02 h -135 l -335.1,-130.32 -120,10.02 -15,5.01 30,-40.1 -5,-165.41 25,-15.04 15,-5 10,-45.12 -30,-20.05 v -65.16 l 65,5.01 -5,-50.13 -30,-25.06 -155,40.11 20,85.21 h -35 l -25,-100.26 -35.1,-5 65.1,-85.22 -55.1,-75.18 20.1,-75.19 -150.1,-130.32 -165,105.26 -15,-65.16 -100,30.07 5,-85.2 305,-55.15 20,-50.13 z',
  },
  {
    id: '2',
    title: 'Видное',
    name: '#_Vidnoe',
    fill: '#ffffe0',
    stroke: '#878787',
    strokeWidth: 30,
    strokeLinejoin: 'bevel',
    d: 'm 12264.9,12897.4 -25,-105.2 -60,-70.2 -30,-15 20,-135.4 30,-200.5 80,-35.1 -45,-115.3 345.1,40.1 120,-40.1 360.1,-260.6 160,-160.4 20,20 5,80.3 85.1,15 50,-60.2 125,-5 90,100.3 -80,40.1 80,35.1 v 80.2 l 115,155.3 75,20.1 45.1,65.2 105,60.1 -65,160.4 30,205.5 45,-50.1 100,175.4 -85,75.2 -70,-110.3 -90.1,85.3 -50,-60.2 v -80.2 l -105,-55.1 -30,-95.3 -130,195.5 -110,-125.3 25,255.6 -320.1,-85.2 -40,100.3 -210,-100.3 -70.1,-205.5 -215,135.4 -230.1,-45.2 -30,195.5 -110,-30 z',
  },
  ...
]

Ready maps

You can use geometry from one of this ready maps

Usage in single file component

<template>
  <SvgMap
    :map="map"
    view-box="0 0 25220 23850"
    :thin-border-on-zoom="true"
  />
</template>

<script>
import SvgMap from 'vue-simple-svg-map'
import map from './assets/map'

export default {
  name: 'App',
  components: {
    SvgMap
  },
  data () {
    return {
      map
    }
  }
}
</script>

Props

Prop	Type	Default	Description
map	Array	[]	Array of regions `<path>`, made from SVG image
view-box	String	null	viewBox parameter of original svg image
data-path	String	d	Your regions `<path>` geometry variable name in map array
wrapper-styles	Object	`{position: 'relative', width: '100%', height: '600px'}`	Map wrapper css parameters
map-styles	Object	`{shapeRendering: 'geometricPrecision', textRendering: 'geometricPrecision' imageRendering: 'optimizeQuality', fillRule: 'evenodd', clipRule: 'evenodd'}`	Styles of default svg image
region-additional-styles	Object	{}	Additional styles for every regions `<path>`
mobilePreventScroll	Boolean, Object	false	Prevent page from scroll on map drag on mobile devices. You could pass object with options `{breakpoint: 1024, selector: 'body'}` `breakpoint` - media breakpoint where scroll prevents, default: 1024. `selector` - selector of element to prevent scroll, default: 'body'. If you just pass TRUE - default values would be used.
drag-cursor	String	grabbing	CSS cursor name when drag is active
hover-cursor	String	pointer	CSS cursor name on region hover
zoom-factor	Number	0.8	Zoom speed
min-size	Number	50	Minimum size of your map image
max-size	Number	1500	Maximum size of your map image
size	Number	600	Init size of your map image
enable-zoom	Boolean	true	Enable zoom on scroll
enable-drag	Boolean	true	Enable drag by mouse
mouse-change-diff	Number	2	How many pixels mouse should move, to change cursor and prevent mouse events
center-map-on-init	Boolean	true	Center map in wrapper on mount
thin-border-on-zoom	Boolean	false	Automaticly thin borders of region on zoom in
max-thin-border	Number	30	Max border width on zoom out
min-thin-border	Number	1	Min border width on zoom in

Events

Event	Description
mouseover	Hover mouse on region (You will receive full data from region object)
mouseleave	Leave mouse from region (You will receive full data from region object)
click	Click on region (You will receive full data from region object)
dragstart	Drag started (Even if drag is disabled)
drag	Drag in progress (Even if drag is disabled)
dragend	Drag ended (Even if drag is disabled)
zoom	Scroll event (Event if zoom is disabled)
center-map	Fires if map was centered