Menu

Multilayer map (canvas + svg)

A canvas layer and an SVG layer that share a common projection. Because the projection is a shared element, we set it on the store as opposed to in the map component such as the other map example.

import LayerCake from 'layercake';
import { geoAlbersUsa } from 'd3-geo';
import { feature } from 'topojson';
import usStates from './data/us-states.topojson.js';
import MapSvgStore from './components/MapSvgStore.html';
import MapCanvasStore from './components/MapCanvasStore.html';

// Load in a topojson file and convert it to geojson
const geojson = feature(usStates, usStates.objects.collection);

const myCake = new LayerCake({
  data: geojson,
  target: document.getElementById('my-chart')
})
  .canvasLayers([
    { component: MapCanvasStore, opts: {} }
  ])
  .svgLayers([
    { component: MapSvgStore, opts: {} }
  ]);

myCake.compute('projection_', ['width', 'height', 'data'], (width, height, data) => {
  return geoAlbersUsa()
    .fitSize([width, height], data);
});

myCake.render();