Wednesday, 19 May 2021

Loading holes in polygons with "addfeature"

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:

Holes

Actual output:

No Holes

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/



from Loading holes in polygons with "addfeature"

No comments:

Post a Comment