You can inject data and mapbox native layers using the Source and Layer components:
import * as React from 'react';
import ReactMapGL, {Source, Layer} from '@goongmaps/goong-map-react';
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 Goong style specification.
For dynamically updating data sources and layers, check out the GeoJSON and GeoJSON animation examples.
goong-map-react 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 '@goongmaps/goong-map-react';
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>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.
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.