How do I call map on the line .getSource('my-data').setData(this.props.heatMapDisplay); it keeps me giving error(TypeError: Map.getSource is not a function.) Not sure what I am doing wrong.
class Map extends Component {
constructor(props) {
super(props);
this.state = {
viewport: {
latitude: 39.7392,
longitude: -104.9903,
width: "calc(100% - 350px)",
height: "100vh",
zoom: 10,
},
selectedRsu: null,
selectedRsuCount: null
}
};
render() {
const { viewport, selectedRsu, selectedRsuCount } = this.state;
return (
<div>
<ReactMapGL
{...viewport}
mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
mapStyle={mbStyle}
onViewportChange={(viewport) => {
this.setState({ viewport });
Map.getSource('my-data').setData(this.props.heatMapDisplay);
//how to call map properly
}}
>
<Source id="my-data" type="geojson" data={this.props.heatMapDisplay}>
<Layer {...layerStyle} />
</Source>
{
}
{this.props.rsuData?.map((rsu) => (
<Marker
key={rsu.id}
latitude={rsu.geometry.coordinates[1]}
longitude={rsu.geometry.coordinates[0]}
>
<button
class="marker-btn"
onClick={(e) => {
e.preventDefault();
this.setState({
selectedRsu: rsu
});
}}
></button>
</Marker>
))}
{selectedRsu ? (
<Popup
latitude={selectedRsu.geometry.coordinates[1]}
longitude={selectedRsu.geometry.coordinates[0]}
onClose={() => {
this.setState({
selectedRsu: null,
selectedRsuCount: null
});
}}
>
<div>
<h2 class="popop-h2">{selectedRsu.properties.Ipv4Address}</h2>
<p class="popop-p">Online Status: {selectedRsu.onlineStatus}</p>
<p class="popop-p">
Milepost: {selectedRsu.properties.Milepost}
</p>
<p class="popop-p">
Serial Number:{" "}
{selectedRsu.properties.SerialNumber
? selectedRsu.properties.SerialNumber
: "Unknown"}
</p>
<p class="popop-p">BSM Counts: {selectedRsuCount}</p>
</div>
</Popup>
) : null}
</ReactMapGL>
</div>
);
}
}
const layerStyle = {
id: 'GeoJsonMap-heat',
type: 'heatmap',
source: 'my-data',
paint: {
// increase weight as diameter breast height increases
'heatmap-weight': {
property: 'count',
type: 'exponential',
stops: [
[1, 0],
[62, 1]
]
},
// increase intensity as zoom level increases
'heatmap-intensity': {
stops: [
[11, 1],
[15, 3]
]
},
// assign color values be applied to points depending on their density
'heatmap-color': [
'interpolate',
['linear'],
['heatmap-density'],
0,
'rgba(236,222,239,0)',
0.2,
'rgb(208,209,230)',
0.4,
'rgb(166,189,219)',
0.6,
'rgb(103,169,207)',
0.8,
'rgb(28,144,153)'
],
// increase radius as zoom increases
'heatmap-radius': {
stops: [
[11, 15],
[15, 20]
]
},
// decrease opacity to transition into the circle layer
'heatmap-opacity': {
default: 1,
stops: [
[14, 1],
[15, 0]
]
}
}
}
//call setData()
//figure out when to call above function
export default Map;