Menu

Multilayer map (canvas + svg)Edit

A canvas layer and an SVG layer. This technique is useful if you have a background layer that would require a large number of DOM nodes. Rendering that layer with canvas will speed up the page. The shapes you actually care about are in SVG to make styling and mouse interaction easier.

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

  import MapSvg from './components/Map.svg.svelte';
  import MapCanvas from './components/Map.canvas.svelte';

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

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

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

<div class="chart-container">
  <LayerCake
    data={geojson}
  >
    <Canvas>
      <MapCanvas
        projection={geoAlbersUsa}
      />
    </Canvas>

    <Svg>
      <MapSvg
        projection={geoAlbersUsa}
        features={geojson.features.slice(40, 50)}
      />
    </Svg>
  </LayerCake>
</div>