Map

Renders the root <svg> and provides a reactive map context to children.

Props

Parameter	Type	Default	Description
data	MapData	—	TopoJSON or GeoJSON
width?	number	600	Internal width used by projection fitting and path rendering.
height?	number	width / aspectRatio	Internal height used by projection fitting and path rendering.
aspectRatio?	number	2 / 1	Used to derive height when height is not provided.
projection?	() => GeoProjection	geoNaturalEarth1	d3-geo projection factory
projectionConfig?	ProjectionConfig	—	See the guide below
dataTransformer?	DataTransformer	—	Optional transform applied to GeoJSON features before rendering

projectionConfig

Use projectionConfig to call projection methods before rendering

{
  [methodName]: args[] | arg
}

• single non-array arg: can be passed as it is or wrapped with an array
• multiple args / single array arg: wrapped with an array

See available methods in d3-geo projection docs
and usage example below

Core defaults

if (!(fitExtent || fitSize || fitWidth || fitHeight)) {
  mapProjection.fitExtent([[1, 1], [width - 1, height - 1]], { type: 'Sphere' })
}
if (!precision) {
  mapProjection.precision(0.2)
}

Source: packes/core/src/lib/map.ts

Usage

<script setup lang="ts">
import type { MapData } from '@d3-maps/core'

import { geoMercator } from 'd3-geo'
</script>

<template>
  <Map
    :data="data"
    :data-transformer="(features) => features.map(/* some logic */)"
    :aspect-ratio="2 / 1"
    :projection="geoMercator"
    :projection-config="{
      rotate: [[0, 12]], // array wrapper required
      scale: 200, // single argument can be passed as it is
      precision: [0.1], // also can be array-wrapped
    }"
  >
    <MapFeatures />
  </Map>
</template>

Hooks

• See useMapContext