Scatter Plot Overlay

This is an example overlay that draws a scatterplot over a map using canvas. Adjust the more interesting props using the controls below.

const ScatterplotOverlay = require('./scatterplot-overlay');

<MapGL {...viewport} mapStyle={mapStyle}>
    <ScatterplotOverlay
      locations={this.state.locations}
      dotRadius={1}
      globalOpacity={0.8}
      compositeOperation="lighter"
      dotFill="blue"
      renderWhileDragging={true}
    />
</MapGL>

Props

locations

An ImmutableJS List of points.

const locations = Immutable.fromJS([
  [-122.39851786165565, 37.78736425435588],
  [-122.40015469418074, 37.78531678199267],
  [-122.4124101516789, 37.80051001607987],
  // ...
]);

lngLatAccessor

Use the lngLatAccessor prop to provide the location in a custom format. It's called with each location as the first argument. Here's the default lngLatAccessor.

function lngLatAccessor(location) {
  return [location.get(0), location.get(1)];
}

renderWhileDragging

If the overlay should redraw when the user is dragging the map. Default true.

dotRadius

Radius of the dots. Default 4.

dotFill

Color of the dots. Default #1FBAD6.

globalOpacity

Opacity of the dots when drawing into the canvas. Default 1.

compositeOperation

globalCompositeOperation of the canvas. This prop can be used to control blending modes. Default source-over.

1.5 KiB Raw Blame History