I have a map editor that lets the user draw and modify polygons. Polygons can be drawn inside polygons to create "holes."
The problem I am facing is after drawing inside polygon's on the map and saving the map data--the map becomes mangled on page refresh. The map does not show the original shape even though the GeoJSON is correct. I suspect the addfeature
event is not handling inner and outer polygon's properly.
How can I fix addfeature
to properly display the saved map data?
Expected output:
Actual output:
Update: I have tried this and it partially works but it cuts polygon data off. I added another layer to see the original shape:
//When the data is loaded from the geojson it is processed here
map.data.addListener('addfeature', function(e) {
//center map
processPoints(e.feature.getGeometry(), bounds.extend, bounds);
map.fitBounds(bounds);
//check for polygon in case we do other shapes
if (e.feature.getGeometry().getType() == "Polygon") {
// lat/lng array
let _map_d = []
e.feature.getGeometry().forEachLatLng(function(latLngArry) {
// populate array
_map_d.push(latLngArry);
});
//Create a polygon with the lat long array
let polygon = new google.maps.Polygon({
map: map,
paths: _map_d,
fillColor: '#0099FF',
fillOpacity: 0.7,
strokeColor: '#AA2143',
strokeWeight: 2
});
console.log("Added Polygon");
/*
* Debug to visualize where the rest of the shape data is
*/
let poly = new google.maps.Polygon({
path: e.feature.getGeometry().getAt(0).getArray(),
strokeWeight: 1,
map: map
});
console.log("Added debug overlay -- click to remove")
//This layer is on top of the previous polygon so click it to remove
google.maps.event.addListener(poly, 'click', function() {
this.setMap(null);
});
google.maps.event.addListener(polygon, 'click', function() {
setSelection(polygon)
});
all_overlays.push(polygon);
}
});
Fiddle Snippet: https://jsfiddle.net/dizzled/b1ste57L/
Notes: Draw a shape and draw inside of the shape to draw "holes". Click export and reload the page to see the geoJSON data from localstorage. You can verify the geoJSON data is correct using https://geojson.io/
ExpiredKeyMapError
error:["Google Maps JavaScript API error: ExpiredKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#expired-key-map-error"]