Adding Custom Data

Native Mapbox Layers

You can inject data and mapbox native layers using the Source and Layer components:

import * as React from 'react';
import ReactMapGL, {Source, Layer} from 'react-map-gl';

const geojson = {
  type: 'FeatureCollection',
  features: [
    {type: 'Feature', geometry: {type: 'Point', coordinates: [-122.4, 37.8]}}
  ]
};

const layerStyle = {
  id: 'point',
  type: 'circle',
  paint: {
    'circle-radius': 10,
    'circle-color': '#007cbf'
  }
};

function App() {
  const [viewport, setViewport] = React.useState({
    longitude: -122.45,
    latitude: 37.78,
    zoom: 14
  });
  return (
    <ReactMapGL {...viewport} width="100vw" height="100vh" onViewportChange={setViewport}>
      <Source id="my-data" type="geojson" data={geojson}>
        <Layer {...layerStyle} />
      </Source>
    </ReactMapGL>
  );
}

For details about data sources and layer configuration, check out the Mapbox style specification.

For dynamically updating data sources and layers, check out the GeoJSON and GeoJSON animation examples.

Overlays

react-map-gl provides a basic overlay API that enables applications to overlay data on top of maps. They are great for creating light-weight custom drawings.

Example

import {SVGOverlay} from 'react-map-gl';

function redraw({project}) {
  const [cx, cy] = project([-122, 37]);
  return <circle cx={cx} cy={cy} r={4} fill="blue" />;
}

<MapGL {...viewport}>
  <SVGOverlay redraw={redraw} />
</MapGL>

Built-in Overlays

Example Overlays

There are a couple of additional overlays in the examples folder that can be copied into applications ScatterplotOverlay, ChoroplethOverlay.

Third-party overlays are also available. For example, the heatmap-overlay module uses webgl-heatmap to create geographic heatmaps.

Other vis.gl Libraries

For more feature rich and performant data visualization overlay use cases, you may consider using other visualization libraries. react-map-gl is part of the vis.gl ecosystem, a suite of high-performance data visualization tools for the Web.

  • deck.gl - WebGL-powered framework for the visualization of large datasets.
  • loaders.gl - loaders for file formats focused on visualization of big data, including point clouds, 3D geometries, images, geospatial formats as well as tabular data.
  • nebula.gl - 3D-enabled GeoJSON editing based on deck.gl and React.