@abcnews/react-australia-map

An interactive map for use within an @abcnews/scrollyteller

Usage no npm install needed!

<script type="module">
  import abcnewsReactAustraliaMap from 'https://cdn.skypack.dev/@abcnews/react-australia-map';
</script>

README

Electorate Map

A map of Australian electorates to use in conjunction with @abcnews/scrollyteller.

Usage

@abcnews/react-australia-map is meant to be used within an @abcnews/scrollyteller.

<Scrollyteller {...}>
  <Map
    data={data}
    processData={processData}
    setupLegend={setupLegend}
    marker={marker}
    onZoom={onZoom}
    fill={fill}
    labelText={labelText}
  />
</Scrollyteller>

processData(d) - For each data point, attach any extra information needed to helper render.

setupLegend(svg, legend) - Called after the main map is added to the svg. legend is a reference to an svg group that can also be referred to during onZoom.

marker - The current scrollyteller marker.

onZoom(zoomFactor, svg, legend) - Called after the main map has been located/zoomed. zoomFactor is inverse of the zoom level itself so that you can use it to scale things inversely to the map's zoom.

fill(d) - Given a data point, returns a colour string to fill that map segment.

labelText(d) - Given a data point, returns the string used to label that map segment.

Authors