jsvectormap Documentation

You can render custom text labels for regions using the labels.regions.render function. The render function receives the region code as an argument and should return the label string or null to hide it.

To style these labels, use the regionLabelStyle property, which supports the same state-based approach (initial, hover, selected, selectedHover) as regionStyle.

const map = new jsVectorMap({
  labels: {
    regions: {
      render(code) {
        return ['EG', 'CN'].indexOf(code) > -1 ? 'Hello ' + code : null
      }
    }
  },
  regionLabelStyle: {
    initial: {
      fill: '#35373e',
      fontFamily: 'Poppins',
      fontWeight: 500,
      fontSize: 13,
    },
    hover: {},
    selected: {},
    selectedHover: {}
  }
})

If you only need the map on a specific page in Nuxt.js, you can import it locally within the component. You must check process.client to ensure the library is only loaded and executed on the client side to prevent errors during SSR.

<template>
  <div id="map"></div>
</template>

<script>
const jsVectorMap = process.client ? require('jsvectormap') : {}

if (process.client) {
  require('jsvectormap/dist/maps/world-merc')
}

export default {
  data: () => ({
    map: null
  }),
  mounted() {
    this.map = new jsVectorMap({
      selector: '#map',
      map: 'world_merc'
    })
  }
}
</script>

By default, the map legend is laid out horizontally. To display the legend vertically, set the vertical option to true within the legend object of your series configuration.

const series = {
  markers: [
    {
      attribute: 'fill',
      legend: {
        vertical: true,
      },
      // ... other options
    },
  ],
}

The tooltip is an interactive element that appears on hover to show contextual information about markers or regions. It is enabled by default. To disable tooltips globally, set the showTooltip option to false in your jsVectorMap configuration.

To hide tooltips for specific elements while keeping them enabled for others, use the onRegionTooltipShow event and call event.preventDefault() based on the element's code.

Note: For regions, omitting the name property from an element can also be used to control tooltip behavior.

```js
// Disable tooltips globally
const map = new jsVectorMap({
  showTooltip: false,
})

// Disable tooltips for specific regions
const options = {
  onRegionTooltipShow(event, tooltip, code) {
    if (['EG', 'US', 'GL'].indexOf(code) > -1) {
      event.preventDefault()
    }
  },
}

const map = new jsVectorMap(options)
```埋

Lines allow you to visually connect two or more markers on the map, representing paths, routes, or relationships between locations.

Note: Lines require markers to be present, as they connect two or more marker points on the map. You define connections by referencing the name of the markers in the from and to properties of the lines array.

const options = {
  markers: [
    { name: 'Egypt', coords: [26.8206, 30.8025] },
    { name: 'United Kingdom', coords: [55.3781, 3.4360] },
    {
      name: 'United States',
      coords: [37.0902, -95.7129],
      style: { fill: 'red' }
    },
  ],
  lines: [
    { from: 'Egypt', to: 'United Kingdom' },
    { from: 'United Kingdom', to: 'United States', style: { stroke: 'grey' } }
  ],
}

const map = new jsVectorMap(options)

To use jsVectorMap globally in Nuxt.js, you must register it as a client-side plugin to avoid SSR (Server-Side Rendering) issues.

1. Create a plugin file (e.g., @/plugins/jsvectormap.js) and use inject to make the constructor available via this.$jvm in components.
2. Register the plugin in nuxt.config.js with mode: 'client'.

Once registered, you can access the constructor via this.$jvm in any component's mounted hook.

// nuxt.config.js
export default {
  plugins: [
    { src: '@/plugins/jsvectormap.js', mode: 'client' }
  ]
}

// @/plugins/jsvectormap.js
import jsVectorMap from 'jsvectormap'
import 'jsvectormap/dist/maps/jvm-world-merc'
import 'jsvectormap/dist/css/jsvectormap.css'

export default function (ctx, inject) {
  inject('jvm', jsVectorMap)
}

Markers allow you to represent data at specific coordinates using icons, shapes, or labels. When you assign a name property to a marker, it appears in the tooltip on hover and acts as a unique identifier that can be used to connect markers with lines.

To use markers, provide a markers array in the jsVectorMap options containing objects with name and coords (an array of [latitude, longitude]).

import jsVectorMap from 'jsvectormap'

const options = {
  labels: {
    markers: { render: marker => marker.name }
  },
  markers: [
    { name: 'Egypt', coords: [26.8206, 30.8025] },
    { name: 'United Kingdom', coords: [55.3781, 3.4360] },
    {
      name: 'United States',
      coords: [37.0902, -95.7129],
      style: { fill: 'red' },
    },
  ],
}

const map = new jsVectorMap(options)

When using Vue.js, you can either use a provided wrapper component or integrate the library manually. For manual integration, import the jsVectorMap constructor, the desired map data, and the SCSS styles in your entry point (e.g., main.ts). Use onMounted to initialize the map instance to ensure the DOM element is available.

<script setup lang="ts">
import { shallowRef, onMounted } from 'vue'
import jsVectorMap from 'jsvectormap'
import 'jsvectormap/dist/maps/world'
import 'jsvectormap/src/scss/jsvectormap.scss'

const map = shallowRef()

onMounted(() => {
  map.value = new jsVectorMap({
    selector: '#map',
  })
})
</script>

<template>
  <div id="map"></div>
</template>

To use the source code directly, you can clone the repository or download it as a ZIP file from GitHub.

git clone https://github.com/themustafaomar/jsvectormap.git