1.4.0 • Published 10 months ago

vue-d3-map v1.4.0

Weekly downloads
-
License
MIT
Repository
gitlab
Last release
10 months ago

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.

Vue D3 Map

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

proptypedescriptionrequired
widthNumberDefines the width of the mapYes
heightNumberDefines the height of the map.Yes
titleAttributeStringSpecifies the GeoJSON property that will be displayed as a title on each region, visible .Yes
dataUrlStringURL from which the GeoJSON data will be fetched.Yes
selectionColorStringDefines the color used to highlight the selected region. Defaults to #474747.No
regionClassFunction, StringDefines 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

Nameparametersdescription
loadedNoneWill be called when the map is fully loaded

Methods

methodparametersdescription
resetSelectionNoneResets the selected region and clears the selection highlight.
resetRegionClassesNoneRecalculates all the classes, can be used if values changed
selectRegionregionIdentifier: string, identifyingProperty: stringSelects 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.

1.2.0

10 months ago

1.1.0

10 months ago

1.4.0

10 months ago

1.3.0

10 months ago

1.0.8

11 months ago

1.0.7

11 months ago

1.0.6

11 months ago

1.0.5

11 months ago

1.0.4

11 months ago

1.0.2

11 months ago

1.0.1

11 months ago

1.0.0

11 months ago