Menu

Map (svg)Edit

A map component using d3-geo for the projection. Adapted from d3-selection, the SVG map component uses Layer Cake's built-in raise function to ensure the hovered-over SVG element is always on top of its siblings.

To render server-side, this example uses the fixedAspectRatio property, which the user sets ahead of time.

<script>
  import { LayerCake, ScaledSvg, Html } from 'layercake';
  import { feature } from 'topojson';
  import { geoAlbersUsa } from 'd3-geo';

  import Map from './components/Map.svg.svelte';

  import usStates from './data/us-states.topojson.js';

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

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

<div class="chart-container" style="padding-bottom:{100 / aspectRatio}%">
  <LayerCake
    ssr={true}
    position='absolute'
    data={geojson}
  >
    <ScaledSvg
      fixedAspectRatio={aspectRatio}
    >
      <Map
        fixedAspectRatio={aspectRatio}
        projection={geoAlbersUsa}
      />
    </ScaledSvg>
  </LayerCake>
</div>