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>