Menu

Map (svg)Edit

A map component using d3-geo for the projection.

<script>
  import { LayerCake, Svg } from 'layercake';
  import { feature } from 'topojson';
  import usStates from './data/us-states.topojson.js';

  import MapSvg from './components/MapSvg.svelte';

  const geojson = feature(usStates, usStates.objects.collection);
</script>

<style>
  .chart-container {
    width: 100%;
    height: 100%;
  }
</style>

<div class="chart-container">
  <LayerCake
    data={geojson}
  >
    <Svg>
      <MapSvg
        projectionName={'geoAlbersUsa'}
      />
    </Svg>
  </LayerCake>
</div>