Vue D3 Map

A Vue component that renders an interactive D3 map using GeoJSON data. It allows for region selection, zooming, and panning, and provides slots for displaying loading, error, and selection data.

Features

• Interactive Map: Zoom, pan, and click to select regions on the map.
• Customizable: Supports custom region styles, selection color, and data attributes.
• Slots for Custom Content: Add custom loading, error messages, and selected region data using named slots.

Installation

npm install vue-d3-map

Usage

In component

<template>
  <D3Map/>
</template>

<script setup>
import {D3Map} from "vue-d3-map";
import "vue-d3-map/style.css";
</script>

Install globally

import VueD3Map from "vue-d3-map";
import "vue-d3-map/style.css";

createApp(App)
    .use(router)
    .use(VueD3Map)
    .mount("#app");

Nuxt 3

// plugins/vueD3Map.ts
import VueD3Map from "vue-d3-map";
import "vue-d3-map/style.css";

export default defineNuxtPlugin(({vueApp}) => {
    vueApp.use(VueD3Map);
});

Props

| prop | type | description | required | |----------------|------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------|----------| | width | Number | Defines the width of the map | Yes | | height | Number | Defines the height of the map. | Yes | | titleAttribute | String | Specifies the GeoJSON property that will be displayed as a title on each region, visible . | Yes | | dataUrl | String | URL from which the GeoJSON data will be fetched. | Yes | | selectionColor | String | Defines the color used to highlight the selected region. Defaults to #474747. | No | | regionClass | Function, String | Defines a CSS class or a function that returns a CSS class for each region. If a function is provided, it receives the region's properties as an argument. | No |

Emits

| Name | parameters | description | |--------|------------|---------------------------------------------| | loaded | None | Will be called when the map is fully loaded |

Methods

| method | parameters | description | |--------------------|-------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------| | resetSelection | None | Resets the selected region and clears the selection highlight. | | resetRegionClasses | None | Recalculates all the classes, can be used if values changed | | selectRegion | regionIdentifier: string, identifyingProperty: string | Selects the region with region based on where the identifyingProperty of the region is equal to the identifyingProperty |

Slots

selection-data

This slot is displayed when a region is selected. It provides the following scoped properties:

• selectedRegion: The properties of the selected region.
• close: A function to reset the selection.

<template #selection-data="{ selectedRegion, close }">
  <!-- Custom content for the selected region -->
  <div>
    <h3>{{ selectedRegion.name }}</h3>
    <button @click="close">Close</button>
  </div>
</template>

selection-data

This slot is displayed on the top of the map

<template #actions>
  <input type="text" placeholder="ISO code" v-model="selectIsoCode">
  <button style="margin-left: 10px" @click="selectRegion">Select region</button>
  <button style="margin-left: auto" @click="resetSelection">Reset selection</button>
</template>

on-loading

This slot is displayed when the map is loading. You can provide custom loading content.

<template #on-loading>
  <!-- Custom loading message -->
  <div>Loading map...</div>
</template>

on-error

This slot is displayed if the map fails to load. You can provide custom error content.

<template #on-error>
  <!-- Custom error message -->
  <div>Error loading map.</div>
</template>

Example

<template>
  <D3Map
      :width="800"
      :height="600"
      title-attribute="name"
      data-url="/path/to/geojson"
      selection-color="blue"
      :region-class="getRegionClass"
  >
    <template #selection-data="{ selectedRegion, close }">
      <div class="region-info">
        <h2>{{ selectedRegion.name }}</h2>
        <p>{{ selectedRegion.description }}</p>
        <button @click="close">Close</button>
      </div>
    </template>

    <template #on-loading>
      <div>Loading map...</div>
    </template>

    <template #on-error>
      <div>Failed to load the map.</div>
    </template>
  </D3Map>
</template>

<script>
export default {
  methods: {
    getRegionClass(region) {
      return region.population > 1000000 ? 'large-region' : 'small-region';
    },
  },
};
</script>

<style>
.large-region {
  fill: red;
}

.small-region {
  fill: green;
}
</style>

License

This project is licensed under the MIT License.