interactive-regions-map

interactive-regions-map

Embed Interactive Regions Map to your Vue Project

Demo

Here's an example of how the package works

Description

This package will allow you to embed an interactive map of the regions in your Vue project using Vue Components.

To create the map, the D3 library is used to draw SVG for the region elements.

The project is under development, follow the changes and offer solutions on my GitHub <3

Installation

Install latest version

npm i interactive-regions-map

Install a specific version

npm i interactive-regions-map@<version>

Project usage

Components

MapProvider

The main functionality provider component. It implements the basic functions to calculate svg-component path from region coordinates, zoom etc. using d3.js library.

Props

Name	Description	Default	Required
width	Width of main svg component	900px	-
height	Height of main svg component	900px	-
mapData	Object with all map regions	-	+
mapDataIndexes	Object with all map regions indexes	null	-
mapProjection	Custom map projection based on d3 mercators objects, using to manipulate your map	null	-
animationDurationTime	Zoom animation duration time	1500ms	-
color	The color of chosen region	red	-

Events

Name	Description	Effect
nextRegion	This event can be used on custom components to switch between regions sequentially	Changed currentRegionIndex to next (end + 1 = start)
previousRegion	This event can be used on custom components to switch between regions in reverse order	Changed currentRegionIndex to previous (start - 1 = end)
regionClicked	This event occurs after click on region	By default zoom in to clicked region
mapClicked	This event occurs after click on map	nothing

Slots

Name	Props	Listeners
map	width, height, mapData, path	regionClicked, mapClicked
default	currentRegion	nextRegion, previousRegion

RegionsMap

This component creates an SVG element with a map using the d3.js library. Each region is a Map Region component.

Props:

Name	Description	Default	Required
path	Function to calculate path of svg object by it coordinates	-	+
width	Width of main svg component	900px	-
height	Height of main svg component	900px	-
mapData	Object with all map regions	null	-

The mapData prop has a geo.json structure, so your object should look like this:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "coordinates": [
          [
            79.28348571016096,
            41.11592858806762
          ],
          [
            99.18614471851964,
            37.86845149053465
          ]
        ],
        "type": "LineString"
      }
    }
  ]
}

Inside the features list we store the region data. The feature object can store some data, you can place it inside the properties field;

The regionsIndexes prop is self-made json object to optimize search of the regions. It should look like this:

{
    "b974a86e44204511941d76c579b37c3e": {"index": 0},
    "6d195052b15345d5bf94e74ab2bac308": {"index": 1}, 
    "8d5317628bf14bdea2d3871d05b2b5fc": {"index": 2}
}

The keys of the object are the region id's.

MapRegion

This component is a nested component that is part of the svg-element map.

Props:

Name	Description	Default	Required
d	Coordinates of the region rendering	-	+
data	Information about the region	-	+

Emits:

This component emits events with default handlers that can be disabled or updated

Name	Description	Effect
regionClicked	This event occurs after clicking on Region Element	By default fill region by default color and zoom it

Where can I find the JSON file with the coordinates of my country or anything else?

Here the links:

1. D3 - The library to draw svg elements using JavaScript
2. GADM - The data of the country's regions and not only them (use level1 from GeoJSON to build a map of the regions, and use map into the package)
3. geojson.io - To check your .geojson file and edit
4. Vector.rocks - To check your .geojson file and edit