This component allows apps to create a map source using React. It may contain Layer components as children.
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>
);
}
The props provided to this component should be conforming to the Goong source specification or CanvasSourceOptions.
Note that the map component's mapStyle prop defaults to https://tiles.goong.io/assets/goong_map_web.json
. To use an empty base map with your own sources, you need to override the prop, e.g.:
const EMPTY_STYLE = {
version: 8,
sources: {},
layers: []
};
<ReactMapGL ... mapStyle={EMPTY_STYLE}>
When props change shallowly, the component will attempt to update the source. Do not define objects/arrays inline to avoid perf hit.
Once a <Source>
is mounted, the following props should not change. If add/remove multiple JSX sources dynamically, make sure you use React's key prop to give each element a stable identity.
id
(String)Unique identifier of the source. If not provided, a default id will be assigned.
type
(String, required)Type of the source.