React Maps

A React map component library for ATOM and Locus, based on Deck.gl.

Libraries

• Deck.gl
• Nebula.gl
• Luma.gl
• React-Map-GL
• Turf.js
• D3.js

Getting started

In react-maps project root:

$ nvm use
$ yarn install
$ yarn start

Import

import {
LocusMap,
POIMap,
GeoCohortMap,
QLReportMap,
} from '@eqworks/react-maps'

Map component documentation

Locus Map

A data visualization map that can accept a variety of data layers. Ref.

Storybook

Props

• dataConfig - array of data configuration. Example:

[
{ id: 'poiGeojson-123', data: poiGeojson },
{ id: 'wiReportData-123', data: wiReportData },
// data configuration for MVT layer
{
id: 'mvt-123',
data: {
tileGeom: 'https://${process.env.TEGOLA_SERVER_URL}/maps/ct/{z}/{x}/{y}.vector.pbf?',
tileData: [],
},
},
]

• layerConfig - array of layer configuration. Example:

[
{
layer: 'scatterplot', // other types: 'geojson', 'MVT', 'text', 'icon', 'arc', 'select'
dataId: 'scatterplot-123',
dataPropertyAccessor: d => d,
geometry: {
geometryAccessor: d => d,
longitude: 'lon',
latitude: 'lat',
}
visualizations: {
radius: {
// radius based on the value of clicks
value: { field: 'revenue' }, // | 5 (can also be just one size)
valueOptions: [1, 10],
dataScale: 'linear',
},
fill: {
value: [102, 108, 198],
},
},
opacity: 0.3,
interactions: {
tooltip: {
tooltipKeys: {
tooltipTitle1: 'name',
tooltipTitle2: 'id',
metricKeys: ['lon', 'lat'],
metricAccessor: d => d.properties,
},
},
},
legend: {
showLegend: true,
layerTitle: 'Source Layer',
},
keyAliases: {
'Imp': 'Impressions'
},
formatDataKey: {
(title) => truncate(title, 20)
},
formatDataValue: {
revenue: d => '$' + d,
},
// custom color
schemeColor: '#366fe4',
// whether to allow map to zoom into layer data extent upon first time loading
initialViewportDataAdjustment: true,
opacity: 0.5,
visible: true,
// whether the scatterplot layer is a target layer or not; used for cross visualizations
isTargetLayer: false,
},
]

• mapConfig - object for various base map prop & component configurations
  • getCursor - a custom callback to retrieve the cursor type. Ref. Default is getDefaultCursor.
  • legendPosition - position of the Legend on the map. Options: ['top-left', 'top-right', 'bottom-left', 'bottom-right'].
  • legendSize - Legend size. Options: ['sm', 'lg'].
  • legendNode - custom element for legend.
  • showMapLegend - whether to show or not the legend on the map. Options: [true, false].
  • tooltipNode - custom element for tooltip.
  • showMapTooltip - whether to show or not the tooltip on the map. Options: [true, false].
  • initViewState - initial view state. Ref. Example:

  {
  latitude: 43.41,
  longitude: -79.23,
  zoom: 8.6,
  }
  

  • setCurrentViewport - callback to set the current viewport
  • setMapInRenderState - callback to set whether the map is still rendering or not
  • pitch - map pitch in degrees. Used only when we use elevation (extruded layers) on the map. [0-60].
  • mapboxApiAccessToken - mapbox token. Required.
  • controller - Deck.gl controller. Ref.
  • typography - typography props. Example:

  {
  fontFamily: 'Open Sans',
  fontSize: '0.75rem',
  textColor: 'rgb(0, 0, 0)',
  },
  

POI Map

A location map for point & polygons POIs (Point of Interest) that is capable of displaying, editing, and creating new POIs.

Storybook

Props

• POIData - an array of objects representing point or polygon locations Point:

{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-79.43598,
43.65993
]
},
"properties": {
"id": 180798,
"name": "Brand 1",
"radius": 200,
"poiType": 2, \\ POI type Point
"city": "Toronto",
"region": "ON",
"postalCode": "M6H 4E6",
"country": "CAN",
"polygon": null,
"polygon_json": null,
"lat": 43.65993,
"lon": -79.43598,
"center_lon": null,
"center_lat": null,
"locationType": 2,
"category": null,
"deprecated": false
}
},

Polygon:

{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-122.718121194664,
49.2421430700734
]
},
"properties": {
"id": 208752,
"name": "9",
"radius": 89,
"poiType": 1, \\ POI type Polygon
"chainId": null,
"address": "45 Oak Street",
"city": "Pitt Meadows",
"region": "BC",
"postalCode": "V3Y",
"country": "CAN",
"addressLabel": "45 Oak Street, Pitt Meadows, BC V3Y, Canada",
"polygon": "POLYGON((-122.718492116132 49.2423843021567,-122.718943854745 49.2425959134472,-122.719090948745 49.2425023350972,-122.71864472492 49.2422603989072,-122.718331910686 49.2421412847236,-122.717771070249 49.241895375912,-122.717201718636 49.241705233125,-122.717117042149 49.2418160311411,-122.717623902033 49.2420111335121,-122.718174581713 49.242250067994,-122.718492116132 49.2423843021567))",
"polygon_json": "{\"type\":\"Polygon\",\"coordinates\":[[[-122.718492116132,49.2423843021567],[-122.718943854745,49.2425959134472],[-122.719090948745,49.2425023350972],[-122.71864472492,49.2422603989072],[-122.718331910686,49.2421412847236],[-122.717771070249,49.241895375912],[-122.717201718636,49.241705233125],[-122.717117042149,49.2418160311411],[-122.717623902033,49.2420111335121],[-122.718174581713,49.242250067994],[-122.718492116132,49.2423843021567]]]}",
"lat": 49.2421430700734,
"lon": -122.718121194664,
"center_lon": -122.718121194664,
"center_lat": 49.2421430700734,
"locationType": 2,
"category": 3,
"deprecated": false
}
}

• activePOI - active selected POI data object (see above). Defaults to null.
• setActivePOI - callback to help pass selected POI to the parent component. Defaults to () => {}.
• setDraftActivePOI - callback to help pass draftActivePOI to the parent component. Defaults to () => {}.
• onClickHandle - custom function to handle onClick events. Defaults to () => {}.
• mode - map mode. Defaults to ''. Options: ['empty', 'display', 'edit', 'create-point', 'create-polygon'].
• cluster - whether or not to use clusters for point POIs. Defaults to false.
• controller - Deck.gl controller. Ref. Default is { controller: true }.
• forwardGeocoder - callback to pass on Geocoder's localGeocoder prop (react-map-gl-geocoder) Default is () => {}.
• geocoderOnResult - callback to be used in Geocoder's onResult prop. Default is () => {}.
• dataPropertyAccessor - accessor for data properties. Default is d => d.
• formatTooltipTitle - formatting function for Tooltip title. Default is (title) => truncate(title, 20).
• formatDataKey - formatting function for data keys. Default is d => d.
• formatDataValue - formatting function for data values. Default is formatDataPOI.
• getCursor - a custom callback to retrieve the cursor type. Ref. Default is getDefaultCursor.

GeoCohort Map

A GeoJSON map that displays data visualization at FSA levels for small zoom values, and at postal code level for large zoom values.

Storybook

Props

• reportFSAData - array of data objects with FSA geometry. Example:

[
{
"Actions": 0, "BidAmount": 0.3138552566694, "Bids": 1299, "Clicks": 0, "GeoCohortItem": "M3C", "GeoCohortListID": [
8, 10
], "GeoCohortListName": [
"Children's Apparel - Top Spending", "Men's Apparel - Top Spending"
], "ImpCost": 0.2592245468532, "Imps": 858, "Revenue": 2.3595000000000, "geometry": {
"coordinates": [
[
[
[
-79.33049, 43.7344
], ...
]
]
], "type": "MultiPolygon"
}, "type": "Feature"
},
...
]

• reportGeoCohortData - - array of data objects with postal code geometry. Similar to reportFSAData, but for postal codes instead of FSAs.
• filled - whether to draw filled polygons. Ref. Default is true.
• stroked - whether to draw an outline around polygons. Ref. Default is true.
• fillBasedOn - column name that fill value is based on. Default is ''.
• fillDataScale - scale for data fill. Default is 'linear'
• fillColors - array of two hex colors to be used as gradient fill in polygons & legend. default is ['#bae0ff', '#0075ff'].
• elevationBasedOn - column name that elevation value is based on. Default is ''.
• elevationDataScale - scale for data elevation. Default is 'linear'.
• elevations - array of elevation size range. Default is [0, 2000].
• onClick - custom function to handle onClick events. Defaults to undefined.
• onHover - custom function to handle onHover events. Defaults to undefined.
• opacity - value between 0 and 1 for fill opacity. Default is 0.5.
• getElevation - determines the elevation of a polygon feature on map. Ref. Default is 0.
• getFillColor - determines the solid color of the polygon. Ref. Default is highlightId => d => d?.GeoCohortItem === highlightId ? [255, 138, 0] : [0, 117, 255].
• getLineWidth - determines the width of a line. Ref. Default is 1.
• getLineColor - the rgba color of a line. Ref. Default is [34, 66, 205].
• showLegend - whether to show or not the legend on the map. Default is false.
• legendPosition - position of the Legend on the map. Options: ['top-left', 'top-right', 'bottom-left', 'bottom-right'].
• legendNode - custom element for legend. Default is undefined.
• getCursor - a custom callback to retrieve the cursor type. Ref. Default is getDefaultCursor.
• getTooltip - callback that takes a hovered-over point and renders a tooltip. Ref. Default is undefined.
• showTooltip - whether to show or not tooltip. Default is false.
• tooltipProps - object of props to pass on Tooltip node. Default is:

  {
  backgroundColor: getTailwindConfigColor('secondary-50'),
  boxShadow: '0 0.125rem 0.5rem 0 rgba(12, 12, 13, 0.15)',
  borderRadius: '0.25rem',
  padding: '0.625rem 0.75rem',
  opacity: 0.9,
  }
  

• tooltipNode - custom tooltip element. Default.
• tooltipKeys - keys to use for data values in the tooltip. Example:

  {
  metricKeys: ['Imps', 'Clicks', 'Bids', 'Revenue'],
  }
  

• typography - typography props. Example:

  {
  fontFamily: 'Open Sans',
  fontSize: '0.75rem',
  textColor: 'rgb(0, 0, 0)',
  },
  

• pitch - map pitch in degrees. Used only when we use elevation (extruded layers) on the map. [0-90].
• dataPropertyAccessor - accessor for data properties. Default is d => d.
• formatLegendTitle - function to format the Legend title column name. Default is d => d.
• formatTooltipTitle - formatting function for Tooltip title. Default is d => d.
• formatDataKey - formatting function for data keys. Default is d => d.
• formatDataValue - object for formatting functions for data values. Default is undefined. Example:

  {
  Revenue: d => '$' + d,
  }
  

• keyAliases - object of aliases for column names. Default is undefined. Example:

  {
  Imps: 'Impressions',
  Revenue: 'Spend',
  }
  

• setViewportBBox - callback to read the viewport bbox. Default is () => {}.
• setApiBBox - callback to read the viewport bbox. Default is () => {}.