Create 1000 polygons very slow

Ask the community
1

I have an Google-API project which I want to replace with Woosemap. In that I create a lot of cells (rectangles) in a radius arround a given point. We talk about 1000-3000 polygons, each have 4 points. 500 needs in my enviroment 30 seconds, 2000 are not possible, I got a timeout.

How can I fasten up that process ?

Here is a bit of sample code that I juse :

for (let i = 0; i<locs.length; i++) {
      var rec = locs[i];var loc = rec.split(“|”);

		if ( loc.length < 8 ) break;
	  // Define the LatLng coordinates for the polygon's path.
	  const polyCoords = [
		{ lat: parseFloat(loc[1]), lng: parseFloat(loc[0]) }, // top left
		{ lat: parseFloat(loc[5]), lng: parseFloat(loc[6]) }, // top right
		{ lat: parseFloat(loc[3]), lng: parseFloat(loc[2]) }, // bottom right
		{ lat: parseFloat(loc[7]), lng: parseFloat(loc[4]) }, // bottom left
	  ];
	  // Construct the polygon.
	  
	  const gridPoly = new woosmap.map.Polygon({
		paths: polyCoords,
		  strokeColor:"#B4B4B4",
		  strokeWeight:2,
		  fillColor:"#CC0000",
		  
	  });
	  gridPoly.setMap(map);
	  		  
	  gridPoly.addListener('rightclick',function(e){
		setContextMenu(e);
	  });	
	  
	}
2

The same thing with Google-API needs Milliseconds

3

Hello @Freudi

Thanks for reaching us.

Creating thousands of woosmap.map.Polygon objects and adding them one by one to the map is indeed very slow. Each polygon is a separate DOM element with its own event listeners and rendering overhead.

We acknowledge that the performance of individual Polygon rendering could be improved on our side, and we’ll look into optimizing this.

There’s a different approach that will solve this performance issue. You could use GeoJSON with the DataLayer (map.data). This will help handle thousands of polygons easily, and keeping events on top of it as required in your use case.

Here is a simple example derived from your code:

// Build GeoJSON FeatureCollection from your data
const features = [];
for (let i = 0; i < locs.length; i++) {
    const rec = locs[i];
    const loc = rec.split("|");
    if (loc.length < 8) break;
    
    const coords = [
        [parseFloat(loc[0]), parseFloat(loc[1])], // top left
        [parseFloat(loc[2]), parseFloat(loc[3])], // top right
        [parseFloat(loc[6]), parseFloat(loc[7])], // bottom right
        [parseFloat(loc[4]), parseFloat(loc[5])], // bottom left
        [parseFloat(loc[0]), parseFloat(loc[1])]  // close the ring
    ];
    
    features.push({
        type: "Feature",
        geometry: {
            type: "Polygon",
            coordinates: [coords]
        },
        properties: {
            id: i,
            name: `Polygon ${i}` // You can add any custom properties
        }
    });
}

const geojson = {
    type: 'FeatureCollection',
    features: features
};

// Add all polygons at once
map.data.addGeoJson(geojson);

// Style the polygons
map.data.setStyle({
    strokeColor: "#B4B4B4",
    strokeWeight: 2,
    fillColor: "#CC0000",
    fillOpacity: 0.5
});

// Add right-click event handler
map.data.addListener('rightclick', (event) => {
    // console.log('Polygon clicked:', event.feature);
    // Your context menu logic here
    setContextMenu(event);
});

With this approach, rendering thousands of polygons takes only a few milliseconds instead of timing out. Please tell us if that’s ok for your needs.

Thanks again for your feedback. We will get back to you for any improvement/updates on this point in the Woosmap Map JS library.

4

Wow, quick answer. Yes this works great, Thanks! For my usecase it is absolutly not important, but now I can’t click a single polygon, I only wrote that as hint if somebody else read this thread.

5

Hmm OK, removing the polygons are also very slow if make like in Google.

In your docs you write that addGeoJson should return feature objects, but the return value is “undefined”. And so I cant use data.remove(feature) and also not map.data.forEach(function(feature) map.data.remove(feature);

So is there a way to remove that features as fast I can add ?

That don’t work:

featureGrid = map.data.addGeoJson(geojson);
console.log(featureGrid); // shows undefined ??

6

This is very slow:

map.data.forEach(function(feature) {
map.data.remove(feature);
});

Is there any replacement ? Maybe some kind of Data-Layer where I can remove the whole layer in one step ?

In the Google API this is a bit different the code there is

map.data.forEach(function(feature) {
feature.setMap(null);
});

Somehow this is very fast.

7

To remove all polygons efficiently, you can use setMap(null) on the data object:

map.data.setMap(null);
// Or use myData.setMap(null) if you created a custom data object
// instead of using the one attached to the map

→ woosmap.map.Data.setMap() documentation reference

8

To make complete…. First I dont’t have to use the standard data-layer, it takes me while to find out that this is the answer to my question about layers:

GridLayer = new woosmap.map.Data();
GridLayer.addGeoJson(geojson);
GridLayer.setMap(map);

Than I can set the map to null for that data-layer.

GridLayer.setMap(null);

I thought that there was only one datalayer, it was not clear for me that I can create different ones.