Menu

Map (svg)

A map component with the option of setting the projection through a setting.

import LayerCake from 'layercake';
import { feature } from 'topojson';
import usStates from './data/us-states.topojson.js';
import MapSvg from './components/MapSvg.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'),
  projection_: 'geoAlbersUsa' // define the d3.geo projection name here to make our MapSvg component more reusable
})
  .svgLayers([
    { component: MapSvg, opts: {} }
  ]);

myCake.render();