Vue Datamaps

It is a Vue 3 port of the Vue port of the javascript-based DataMaps

Live demo

link

Run demo

# project clone
$ git clone https://github.com/insky/vue3-datamaps.git 

# install dependencies
$ npm install

# run
$ npm run dev

Installation

# install
$ npm install vue3-datamaps

Base Usage

Required

• json data is no longer required.
• CSS styles must be imported separately

Global

main.js

import { createApp } from 'vue'
import VueDatamaps from 'vue3-datamaps'
import 'vue3-datamaps/style.css'

const app = createApp(App)
app.use(VueDatamaps)
app.mount('#app')

vue template

<template>
    <div id="app">
        <vue-datamaps />
    </div>
</template>

Component Style

vue template

<template>
    <div id="app">
        <vue-datamaps />
    </div>
</template>
<script setup>
import { VueDatamaps } from 'vue3-datamaps'
import 'vue3-datamaps/style.css'
</script>

Example

<template>
  <div>
    <h4>Basic:</h4>
    <vue-datamaps />
  </div>
</template>

<script setup>
import { VueDatamaps } from 'vue3-datamaps'
</script>

Available Props Option

scope

• type: String
• value: world, usa, custom_map

Same as the original.

setProjection

• type: Function
• value: See sample code.

Same as original but d3 version different.

projection

• type: String
• value: Equirectangular, Orthographic, Mercator

Same as original but PascalCase.

dataType

• type: String
• value json, csv

Same as original.

data

• type: Object
• value: See sample code.

Same as original.

done

• type: Function

Not implemented.

fills

• type: Object
• value: The keys in this object map to the "fillKey" of [data] or [data of bubbles]

Same as original.

geographyConfig

• type: Object
• value: See sample code.

Same as original but not include popupTemplate.

bubblesConfig

• type: Object
• value: See sample code.

Same as original but not include popupTemplate.

bubbles

• type: Boolean
• value: true, false If bubblesConfig required.

arcConfig

• type: Object
• value: See sample code.

Same as original but not include popupTemplate.

arc

• type: Boolean
• value: true, false

If arcConfig required.

disableDefaultStyles

• type: Boolean
• value: true, false

Not implemented.

labelsConfig

• type: Object
• value: See sample code.

Same as original.

labels

• type: Boolean
• value: true, false

If labelsConfig required.

popupTemplate

• 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

{
  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

  <template #hoverinfo>
    <div class="hoverinfo" style="text-align:center;">
      <!-- ... -->
    </div>
  </template>

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

  <template #hoverBubbleInfo>
    <div class="hoverinfo" style="text-align:center;">
      <!-- ... -->
    </div>
  </template>

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

  <template #hoverArcInfo>
    <div class="hoverinfo" style="text-align:center;">
      <!-- ... -->
    </div>
  </template>

• when aws-region mouse hover

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

  <template #hoverRegionInfo>
    <div class="hoverinfo" style="text-align:center;">
      <!-- ... -->
    </div>
  </template>

Inspired

• markmarkoh/datamaps - original
• Seungwoo321/vue-datamaps - Vue 2 port

License

MIT