Im trying to change my map container to be able to draw multiple polygons on my map. This was the change that i did to Map
import {
Map,
InfoWindow,
Marker,
GoogleApiWrapper,
Polygon
} from 'google-maps-react';
import React, { Component } from 'react';
export class MapContainer extends Component {
renderMarker = loc => {
return <Marker key={loc._id} position={loc} />;
};
renderPolygon = loc => {
console.log(loc);
return (
<Polygon
key={loc._id}
paths={loc}
strokeColor='#0000FF'
strokeOpacity={0.8}
strokeWeight={2}
fillColor='#0000FF'
fillOpacity={0.35}
/>
);
};
render() {
const coords = this.props.initialCenter;
const markerPositions = this.props.markerPositions;
const polygonPositions = this.props.polygonPositions;
const style = this.props.style;
const center = this.props.center;
const paths = this.props.paths;
console.log(this.props.polygonPositions);
return (
<Map
google={this.props.google}
zoom={18}
initialCenter={coords}
style={style}
center={center}
>
{markerPositions.map(this.renderMarker)}
{polygonPositions.map(this.renderPolygon)}
{/* <Polygon
paths={paths}
strokeColor='#0000FF'
strokeOpacity={0.8}
strokeWeight={2}
fillColor='#0000FF'
fillOpacity={0.35}
/> */}
{/* <Polygon
paths={{ paths }}
strokeColor='#0000FF'
strokeOpacity={0.8}
strokeWeight={2}
fillColor='#0000FF'
fillOpacity={0.35}
/> */}
</Map>
);
}
}
export default GoogleApiWrapper({
apiKey: process.env.REACT_APP_GOOGLE_MAPS_API_TEST
})(MapContainer);
Instead of drawing one Polygon, i can receive an array of them and draw them all but so far my map doesnt load.
This is how i got my polygon drawing from the service:
const polygon = this.props.places.places.map(place => {
return place.location.coordinates.map(values =>
values.map(data => {
return { lat: data[0], lng: data[1] };
})
);
});
And this is what is being returned from the polygon.
console.log(
'POLYGON',
JSON.stringify(polygon[0]),
'MULTIPLOS',
JSON.stringify(polygon)
);
POLYGON [[{"lat":41.53113384600326,"lng":-8.619018495082855},{"lat":41.53113384600326,"lng":-8.61851692199707},{"lat":41.53129447698251,"lng":-8.61851692199707},{"lat":41.53129447698251,"lng":-8.619018495082855},{"lat":41.53113384600326,"lng":-8.619018495082855}]]
MULTIPLOS [[[{"lat":41.53113384600326,"lng":-8.619018495082855},{"lat":41.53113384600326,"lng":-8.61851692199707},{"lat":41.53129447698251,"lng":-8.61851692199707},{"lat":41.53129447698251,"lng":-8.619018495082855},{"lat":41.53113384600326,"lng":-8.619018495082855}]],[[{"lat":-8.619018495082855,"lng":41.53113384600326},{"lat":-8.61851692199707,"lng":41.53113384600326},{"lat":-8.61851692199707,"lng":41.53129447698251},{"lat":-8.619018495082855,"lng":41.53129447698251},{"lat":-8.619018495082855,"lng":41.53113384600326}]]]
I can draw one Polygon but it would be nice if i could draw multiple polygons from my database. Any help?
You are getting back an array (polygons) of arrays (single polygon coordinate array). So, if you iterate over the 'MULTIPLOS' array you should be able to plot all the polygons in that array of arrays.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.