Vue Datamaps


It is a Vue port of the javascript-based DataMaps


Contributors

Seungwoo321 💻

hyemyn2 💻

Live demo

link

Run demo

``bash


project clone

$ git clone https://github.com/Seungwoo321/vue-datamaps.git

install dependencies

$ npm install

run

$ npm run dev
`

Installation

`bash


install


$ npm install vue-datamaps
`

Base Usage

$3

* json data is no longer required.

#### Global

main.js

`js
import Vue from 'vue'
import VueDatamaps from 'vue-datamaps'

Vue.use(VueDatamaps)

`

vue template

`vue

`

#### Component Style

vue template

`vue


`

Example

!vue-datamaps-demo-basic.png

`vue



`

!vue-datamaps-demo-state-label.png

`vue


`

!vue-datamaps-demo-bubbles.png

`vue


`

!vue-datamaps-demo-arcs.png

`vue


`

!vue-datamaps-demo-graticules.png

`vue



`

!vue-datamaps-demo-zoom.png

`vue



`

!vue-datamaps-demo-south-korea.png

`vue



`

!vue-datamaps-demo-custom-color.png

`vue



`

!vue-datamaps-demo-aws-region.png

`vue



`

Available Props Option

$3

* type: __String__
* value: __world__, __usa__, __custom_map__

Same as the original.

$3

* type: __Function__
* value: __See sample code.__

Same as original but d3 version different.

$3

* type: __String__
* value: __Equirectangular__, __Orthographic__, __Mercator__

Same as original but PascalCase.

$3

* type: __String__
* value __json__, __csv__

Same as original.

$3

* type: __Object__
* value: __See sample code.__

Same as original.

$3

* type: __Function__

Not implemented.

$3

* type: Object
* value: __The keys in this object map to the "fillKey" of [data] or [data of bubbles]__

Same as original.

$3

* type: __Object__
* value: __See sample code.__

Same as original but not include popupTemplate.

$3

* type: __Object__
* value: __See sample code.__

Same as original but not include popupTemplate.

$3

* type: __Boolean__
* value: __true__, __false__
If bubblesConfig required.

$3

* type: __Object__
* value: __See sample code.__

Same as original but not include popupTemplate.

$3

* type: __Boolean__
* value: __true__, __false__

If arcConfig required.

$3

* type: __Boolean__
* value: __true__, __false__

Not implemented.

$3

* type: __Object__
* value: __See sample code.__

Same as original.

$3

* type: __Boolean__
* value: __true__, __false__

If labelsConfig required.

$3

* type: __Boolean__
* value: __true__, __false__

If slot hoverinfo and event custom:popup||custom:popup-bubble||custom:popup-arc||custom:popup-region|| required.

Default Props Option

`js
{
scope: 'world',
setProjection: (d3, element) => {
let projection = null
let path = null
if (this.scope === 'usa') {
projection = d3.geoAlbersUsa()
.scale(this.svgWidth)
.translate([this.svgWidth / 2, this.svgHeight / 2])
} else if (this.scope === 'world') {
projection = d3[geo${this.projection}]()
.scale((this.svgWidth + 1) / 2 / Math.PI)
.translate([this.svgWidth / 2, this.svgHeight / (this.projection === 'Mercator' ? 1.45 : 1.8)])
}
if (this.projection === 'Orthographic') {
this.svg.append('defs').append('path')
.datum({ type: 'Sphere' })
.attr('id', 'sphere')
.attr('d', path)

this.svg.append('use')
.attr('class', 'stroke')
.attr('xlink:href', '#sphere')

this.svg.append('use')
.attr('class', 'fill')
.attr('xlink:href', '#sphere')
projection.scale(this.svgWidth / Math.PI * 0.9).clipAngle(90).rotate(this.projectionConfigOptions.rotation)
}

path = d3.geoPath()
.projection(projection)
return { projection, path }
},
projection: 'Equirectangular',
dataType: 'json',
data: {},
done: function () {
return {}
},
fills: {
authorHasTraveledTo: '#fa0fa0',
defaultFill: '#ABDDA4'
},
geographyConfig: {
dataUrl: null,
hideAntarctica: true,
hideHawaiiAndAlaska: false,
borderWidth: 1,
borderOpacity: 1,
borderColor: '#FDFDFD',
popupOnHover: true,
highlightOnHover: true,
highlightFillColor: '#FC8D59',
highlightBorderColor: 'rgba(250, 15, 160, 0.2)',
highlightBorderWidth: 2,
highlightBorderOpacity: 1,
highlightFillOpacity: 0.85
},
projectionConfig: {
rotation: [97, 0]
},
bubblesConfig: {
borderWidth: 2,
borderOpacity: 1,
borderColor: '#FFFFFF',
popupOnHover: true,
radius: null,
fillOpacity: 0.75,
animate: true,
highlightOnHover: true,
highlightFillColor: '#FC8D59',
highlightBorderColor: 'rgba(250, 15, 160, 0.2)',
highlightBorderWidth: 2,
highlightBorderOpacity: 1,
highlightFillOpacity: 0.85,
exitDelay: 100,
key: JSON.stringify,
data: []
},
bubbles: false,
arcConfig: {
strokeColor: '#DD1C77',
strokeWidth: 1,
arcSharpness: 1,
animationSpeed: 600,
popupOnHover: false,
data: []
},
arc: false,
disableDefaultStyles: false,
labelsConfig: {
fontSize: 10,
fontFamily: 'Verdana',
labelColor: '#000',
lineWidth: 1
},
labels: false,
popupTemplate: false,
awsRegions: false,
awsRegionsConfig: {
strokeColor: '#0b5fd6',
strokeWidth: 1.5,
defaultFill: 'transparent',
highlightFillOpacity: 1,
showPrivateRegions: false,
popupOnHover: false,
data: []
}
}

`

Slot & Event for @mouseover

* when geography mouse hover:
* slot: hoverinfo
* event: custom:popup

`html



`

* when bubbles mouse hover:
* slot: hoverBubbleInfo
* event: custom:popup-bubble

`html



`

* when arc mouse hover:
* slot: hoverArcInfo
* event: custom:popup-arc

`html



`

* when aws-region mouse hover

* slot: hoverRegionInfo
* event: custom:popup-region

`html



``

Inspired

* markmarkoh/datamaps - original
* btmills/react-datamaps - React-based datamaps library
* jsonmaur/aws-regions - AWS Regions and Availability Zones

License

MIT