I am creating an app that uses wildfire data from APIs and flips it in order to display polygons on a Google Map using the google-maps-react package. I have figured everything out up until returning and displaying the polygon using a function built into the map component. Does anyone want to chime in on what the issue might be? I'd really appreciate some help. Thanks.
import React, { Component } from 'react';
import { Map, GoogleApiWrapper, Polygon } from 'google-maps-react';
const mapStyles = {
margin: 30,
width: '93.75%',
height: '90%',
border: '1px solid #3E1C18',
display: 'inline-block'
};
class FireMap extends Component {
constructor(props) {
super(props)
this.state = {
fires: [],
polygons: []
}
}
componentDidMount() {
fetch('https://services3.arcgis.com/T4QMspbfLg3qTGWY/arcgis/rest/services/Public_Wildfire_Perimeters_View/FeatureServer/0/query?where=1%3D1&outFields=*&outSR=4326&f=json')
.then(res => res.json())
.then(data => {
this.setState({ fires: data.features })
this.state.fires.map((fire) =>{
if (fire.geometry !== null){
let fireCoords = fire.geometry.rings
let trueCoords = []
fireCoords.map((coords) => {
coords.map((pair) => {
let newPair = {lat: pair[1], lng: pair[0]}
return trueCoords.push(newPair)
})
})
this.state.polygons.push(trueCoords);
console.log(this.state.polygons)
}
})
})
}
showPolygons = () => {
this.state.polygons.map((polygon) => {
let firePoly= <Polygon paths={polygon} options={{
fillColor: "#BF5E4B",
fillOpacity: 0.45,
strokeColor: "#6B352A",
strokeOpacity: 0.9,
strokeWeight: 1
}}/>
return firePoly
})
}
render(){
return(
<div className="mapBox">
<Map
google={this.props.google}
zoom={8}
style={mapStyles}
initialCenter={{ lat: 37.7749, lng: -122.4149 }}
>
{this.showPolygons()}
</Map>
</div>
);
}
}
I haven't caught from your comment if you've tried things I've suggested... But you've edited your post with some random (and incorrect) changes. OK, I'll try to post an answer. It's an answer related to the original code because it looks simpler and contains less errors.
This is how I think it should look like:
Except for a more functional code style (which you can ignore), basically all I've changed was:
new Polygon()
and<Polygon>
is not the same thing. You should return the latter. JSX translates to something likeReact.createElement(Polygon,...)
not tonew Polygon(...)
. OK, you've fixed that.As per docs and per source code,
Polygon
should be created asand not as
your
options
are ignoredthis.displayFires()
incomponentDidMount
does nothing, so it should be removed.As a side note: also at the time of
this.displayFires()
callthis.state
is not changed yet. But it shouldn't change the outcome because, as I said,this.displayFires()
have no effect incomponentDidMount
... butthis.state.polygons.push
in your new version of code can have an effect... or I'd better say will introduce bugs. You should never do that.