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 |

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