I'm showing the boundaries of Cyprus regions using OpenLayers with vector layer, I get the coordinates from a shapefile which has a lot of points, for instance some regions can have a multipolygon with in total 30000 points.

This is really slow on Firefox / IE and in Firefox it shows unresponsive script error. Only Chrome works well. What's the best way to get it working faster and smoothly?

I read one answer is to create a WMS server with MapServer to generate the images tiles instead to use the OpenLayers directly but I can't implement that solution because I want to change layer style dynamically to the different features in the vector layer i.e to show different colors to the region based on the dynamic value.

How can I overcome this issue? Any Insights would be much appreciated.

  • 1
    Is migrating the data into a database an option? That would allow for strategies like simplification (merging nearby points to create a polygon with fewer vertices). Sep 18, 2013 at 12:26
  • There is something MapBox is working on that could help, but I think for now only works with TileMill2 (not production ready, if I'm not mistaken). They created the concept of Vector Tiles that seems to work well. Another issue is that the serialization between actual geometries and text (geojson) is always slow. If you can precache these geojson representations, it would me somewhat faster to draw, but that doesn't help in the client. Nov 5, 2013 at 3:30
  • Can you post your code? Make sure you are not blocking the browsers main(UI) thread while adding points to the openlayers vector layer.
    – ujjwaln
    Feb 25, 2014 at 23:07

3 Answers 3


The most conservative approach will be to employ some kind of WMS server, transform the user-defined style to SLD format and use POST requests with SLD_BODY parameter to the WMS server, causing it to render features in user-defined style. This can be done with standard OpenLayers. Alternatively, you can port your application to Leaflet with some high-performance rendering engine like Kothic (tightly bound to OSM data, will require a lot of hacking) or d3 (much easier). Last but not least, forget IE and port application to OpenLayers 3 with WebGL renderer.

  • IE 11 is going to support webGL, so we will be able to get decent GPU-based speed across all browsers. Jan 26, 2014 at 18:31

If you take a look at http://swingley.appspot.com/maps/olpts you will see that the limitations with large amounts of vector data are not trivial.

The best options would be to:

1) Reprocess/optimize the data set to reduce granularity meaning you reduce your total point count, in a third party and permanent way.

2) Dive into the OpenLayers.Strategy section of the documentation and optimize the actual display of the features in openlayers. This would allow you to do some "on the fly" pre-processing of the features.

3) Rasterize the data as you mentioned and simply pre-select a set of colors and render all the "regions" in those layers separately. This would allow you to change the XYZ location of the tiles programatically to match your design needs. This solution would take up some space, but would be a big performance gain.


What you want to do is visualise data with dynamic styling, which requires it being a vector.

What I've done to achieve this is to use topojson and you can see an example here: http://agl.pw/examples/NRM_Regions/map.html

In the example, the original SHP file was around 20 mb and the compressed, simplified topo-json file is only a 200 kb.

You could just simplify the geometry though, without using topojson for compression (and it only compresses it for transport, so it wont change how fast the browser responds when it's loaded).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.