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} />

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.


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.


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} />

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 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 ecosystem, a suite of high-performance data visualization tools for the Web.

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