# Create 1000 polygons very slow

**URL:** <https://forum.woosmap.com/t/create-1000-polygons-very-slow/174>\
**Category:** Ask the community\
**Tags:** map-api\
**Created:** [October 1, 2025, 10:41am UTC](https://forum.woosmap.com/t/create-1000-polygons-very-slow/174 "2025-10-01T10:41:36Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Freudi](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.woosmap.com/freudi/32/179_2.png) [@Freudi](https://forum.woosmap.com/u/Freudi)\
**Post date:** [October 1, 2025, 10:41am UTC](https://forum.woosmap.com/t/create-1000-polygons-very-slow/174/1 "2025-10-01T10:41:36Z")

</div>

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 :

```auto
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);
	  });	
	  
	}

```

---

<div class="post-metadata">

**Author:** ![Freudi](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.woosmap.com/freudi/32/179_2.png) [@Freudi](https://forum.woosmap.com/u/Freudi)\
**Post date:** [October 1, 2025, 10:50am UTC](https://forum.woosmap.com/t/create-1000-polygons-very-slow/174/2 "2025-10-01T10:50:02Z")

</div>

The same thing with Google-API needs Milliseconds

---

<div class="post-metadata">

**Author:** ![gael](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.woosmap.com/gael/32/3_2.png) [@gael](https://forum.woosmap.com/u/gael)\
**Post date:** [October 1, 2025, 12:44pm UTC](https://forum.woosmap.com/t/create-1000-polygons-very-slow/174/3 "2025-10-01T12:44:21Z")

</div>

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:

```javascript
// 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.

---

<div class="post-metadata">

**Author:** ![Freudi](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.woosmap.com/freudi/32/179_2.png) [@Freudi](https://forum.woosmap.com/u/Freudi)\
**Post date:** [October 1, 2025, 1:48pm UTC](https://forum.woosmap.com/t/create-1000-polygons-very-slow/174/4 "2025-10-01T13:48:33Z")

</div>

> [@gael](#):
>
> ```auto
> 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
> });
> 
> ```

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.

---

<div class="post-metadata">

**Author:** ![Freudi](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.woosmap.com/freudi/32/179_2.png) [@Freudi](https://forum.woosmap.com/u/Freudi)\
**Post date:** [October 7, 2025, 4:09pm UTC](https://forum.woosmap.com/t/create-1000-polygons-very-slow/174/5 "2025-10-07T16:09:51Z")

</div>

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 ??

---

<div class="post-metadata">

**Author:** ![Freudi](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.woosmap.com/freudi/32/179_2.png) [@Freudi](https://forum.woosmap.com/u/Freudi)\
**Post date:** [October 8, 2025, 7:51am UTC](https://forum.woosmap.com/t/create-1000-polygons-very-slow/174/6 "2025-10-08T07:51:19Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![gael](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.woosmap.com/gael/32/3_2.png) [@gael](https://forum.woosmap.com/u/gael)\
**Post date:** [October 13, 2025, 10:41am UTC](https://forum.woosmap.com/t/create-1000-polygons-very-slow/174/7 "2025-10-13T10:41:43Z")

</div>

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

```javascript
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](https://developers.woosmap.com/products/map-api/reference/1.4/#woosmap.map.Data__setMap)

---

<div class="post-metadata">

**Author:** ![Freudi](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.woosmap.com/freudi/32/179_2.png) [@Freudi](https://forum.woosmap.com/u/Freudi)\
**Post date:** [October 19, 2025, 8:02am UTC](https://forum.woosmap.com/t/create-1000-polygons-very-slow/174/8 "2025-10-19T08:02:04Z")

</div>

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.