Svelte Mapchart

Svelte mapchart is a svelte component library to help make SVG map charts using d3-geo and topojson-client under the hood.

Svelte mapchart is currently under HEAVY development. I am learning Svelte by building this library based on the API from react-simple-maps.

Getting started

Install mapchart using npm:

npm install svelte-mapchart --save

or yarn:

yarn add svelte-mapchart

Basic map

To make a basic world map using an Equal Earth projection, import MapChart, Geographies, and Geography and reference a geojson/topojson file.

<script>
  import {
    MapChart,
    Geographies,
    Geography,
  } from "./components/components.module.js";

	let geoUrl = "https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json";
</script>

<main>
  <MapChart projection="geoEqualEarth">
		<Geographies geography={geoUrl} let:features={features}>
			{#each features as feature}
				<Geography feature={feature} />
			{/each}
		</Geographies>
	</MapChart>
</main>