Atlas

@d3-maps/atlas is a collection of TopoJSON world layers, continents, and countries

Install

npm install @d3-maps/atlas

Usage

World map

<script setup lang="ts">
import { MapBase, MapFeatures } from '@d3-maps/vue'
import Countries from '@d3-maps/atlas/world/countries'
</script>

<template>
  <MapBase :fit="Countries">
    <MapFeatures :data="Countries" />
  </MapBase>
</template>

World layers

<script setup lang="ts">
import { MapBase, MapFeatures } from '@d3-maps/vue'
import Land from '@d3-maps/atlas/world/land'
import Coastline from '@d3-maps/atlas/world/coastline'
</script>

<template>
  <MapBase>
    <MapFeatures :data="Land" />
    <MapFeatures :data="Coastline" />
  </MapBase>
</template>

Continent

<script setup lang="ts">
import { MapBase, MapFeatures } from '@d3-maps/vue'
import Africa from '@d3-maps/atlas/continents/africa'
</script>

<template>
  <MapBase :fit="Africa">
    <MapFeatures :data="Africa" />
  </MapBase>
</template>

Country

<script setup lang="ts">
import { MapBase, MapFeatures } from '@d3-maps/vue'
import Japan from '@d3-maps/atlas/countries/japan'
</script>

<template>
  <MapBase :fit="Japan">
    <MapFeatures :data="Japan" />
  </MapBase>
</template>

Multiple countries

<script setup lang="ts">
import { MapBase, MapFeatures } from '@d3-maps/vue'
import { Georgia, Germany, Russia } from '@d3-maps/atlas/countries'
</script>

<template>
  <MapBase>
    <MapFeatures :data="Georgia" />
    <MapFeatures :data="Germany" />
    <MapFeatures :data="Russia" />
  </MapBase>
</template>

Scales

Scale	Use it for
110m	World maps, dashboards, examples, and the smallest payload
50m	Regional maps or closer zoom where 110m looks too coarse
10m	Country detail views where coastline and border detail matter

Default country imports use the coarsest available scale. In most cases that is 110m

import Japan from '@d3-maps/atlas/countries/japan' // japan-110m
import Japan10m from '@d3-maps/atlas/countries/japan/japan-10m'
import Japan50m from '@d3-maps/atlas/countries/japan/japan-50m'
import Japan110m from '@d3-maps/atlas/countries/japan/japan-110m'

Import matrix

Entity	Default import	Scale-specific import pattern
Country	@d3-maps/atlas/countries/<slug>	@d3-maps/atlas/countries/<slug>/<slug>-<scale>
Continent	@d3-maps/atlas/continents/<slug>	Continent default entry only
World countries	@d3-maps/atlas/world/countries	@d3-maps/atlas/world/countries/countries-<scale>
World land	@d3-maps/atlas/world/land	@d3-maps/atlas/world/land/land-<scale>
World ocean	@d3-maps/atlas/world/ocean	@d3-maps/atlas/world/ocean/ocean-<scale>
World coastline	@d3-maps/atlas/world/coastline	@d3-maps/atlas/world/coastline/coastline-<scale>
World lakes	@d3-maps/atlas/world/lakes	@d3-maps/atlas/world/lakes/lakes-<scale>
World rivers	@d3-maps/atlas/world/rivers	@d3-maps/atlas/world/rivers/rivers-<scale>

Metadata

Use metadata when you need richer country or continent information

import countries from '@d3-maps/atlas/metadata/countries'
import continents from '@d3-maps/atlas/metadata/continents'

Data types

Types can be imported from @d3-maps/atlas/types
Country, continent, and world-countries properties are by default typed as AtlasFeatureProperties