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 usStates from './data/us-states.topojson.js';
  import MapSvg from './components/MapSvg.svelte';
  import MapCanvas from './components/MapCanvas.svelte';

  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
        projectionName={'geoAlbersUsa'}
      />
    </Canvas>

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