map-lao-by-toxin

Reusable Vue 3 choropleth map components and Laos GeoJSON datasets powered by MapLibre GL.

Install

npm install map-lao-by-toxin vue maplibre-gl

Import the bundled package CSS once in your app:

import 'map-lao-by-toxin/style.css'

Usage

<script setup lang="ts">
import { computed, ref } from 'vue'
import {
  MapCanvas,
  buildMetricLookup,
  joinMetricToFeatureCollection,
  laosProvinces,
  sampleMetrics
} from 'map-lao-by-toxin'

const selectedCode = ref<string | null>(null)

const geojson = computed(() => {
  const metricLookup = buildMetricLookup(
    sampleMetrics.filter((record) => record.metricKey === 'population' && record.year === 2024)
  )

  return joinMetricToFeatureCollection(laosProvinces, metricLookup)
})
</script>

<template>
  <MapCanvas
    :geojson="geojson"
    :selected-code="selectedCode"
    metric-label="Population"
    @select="selectedCode = $event"
  />
</template>

Exports

• MapCanvas
• MapLegend
• useMap
• useGeoLayers
• buildMetricLookup
• joinMetricToFeatureCollection
• laosCountry
• laosProvinces
• laosDistricts
• sampleMetrics

Development

npm install
npm run dev

Build the npm package:

npm run build