MapBase

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
height?	number	width/aspectRatio
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
context?	MapContext	—	Optional externally created context. When provided, MapBase uses it instead of creating one from props, and data is not required

projectionConfig

Use projectionConfig to call projection methods before rendering

{
  [methodName: string]: Arg | Arg[]
}

1. Single non-array value: Arg | [Arg] - pass directly or wrap with an array
2. Single array value: [Arg] - must be wrapped with an array
3. Multiple values: [Arg1, Arg2, ...]

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 { geoEquirectangular } from 'd3-geo'
import { type MapData } from '@d3-maps/vue'

defineProps<{
  data: MapData
}>()
</script>

<template>
  <MapBase
    :data="data"
    :data-transformer="(features) => features.map(/* some logic */)"
    :aspect-ratio="2 / 1"
    :projection="geoEquirectangular"
    :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 />
  </MapBase>
</template>

Helpers

• See useCreateMapContext
• See useMapContext

For adapter code and docs examples, prefer useMapContext or MapBase slot/render-prop context over rebuilding a separate map context manually

Advanced Composition

If controls or other consumers need the same map context outside the rendered <svg>, create the context once in the parent, pass it to sibling UI by prop, and pass the same object into MapBase.

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

const props = defineProps<{
  data: MapData
}>()

const context = useCreateMapContext(computed(() => ({
  data: props.data,
  aspectRatio: 2 / 1,
})))
</script>

<template>
  <Toolbar :context="context" />
  <MapBase :context="context">
    <MapFeatures />
  </MapBase>
</template>