Leaflet.js and complex polygons

Question

For a small project I am allowing users to add areas to the database. Their query is sent to http://nominatim.openstreetmap.org and I store the latitude and longitude. If available, I also store the geoJSON polygon outline data.

Example output: http://nominatim.openstreetmap.org/search?q=wyoming&format=xml&polygon_geojson=1&addressdetails=1

This outlined area is then displayed on a map using leaflet.js. For a lot of polygons this works out just fine, but it seems that there is a limit to the amount of data the library can process. Some rather complex areas (that require a longtext to store in mysql) simply do not get displayed at all, without an error being thrown.

I guess my question has two parts: 1 - Am I right to assume that the large datasets are the root of the problem or should leaflet.js be able to handle those? 2 - What would be the best way of simplifying such datasets? Leaflet has such an algorithm for displaying areas, but that seems to be the failing point already.

And while we are on the topic: Right now I'm converting Nominatim's lnglat polygons to leaflet's latlng by splitting up the data and patching it back together in javascript. Is there an easier/safer way to do that? Should I rather move that task to the server and use some php library/function?

I appreciate your help!

Edit: Forgot to mention: on the occasion that the polygon fails to render, my console gives me this error: TypeError: t is null

Answer 1

are the large datasets the root of the problem or should leaflet.js be able to handle those?

Leaflet.js will handle whatever you throw at it. There is, however, a limit on what your web browser can handle without slowing down.

Remember that every modern web browser has performance analysis tools that you can use to see what parts of the Leaflet code (or of the browser's internals) is taking up most of your time.

What would be the best way of simplifying such datasets?

You probably want to look at the Douglas-Peucker algorithm for a starting point in these algorithms.

Keep in mind that Leaflet uses this algorithm internally to simplify polygons on each zoom level, up to a pixel.

For some big complex polygons, slicing them up with something like Leaflet.VectorGrid might improve the performance.

There is no silver bullet for simplifying datasets, however. The best way will depend on the specific data you are using.

on the occasion that the polygon fails to render, my console gives me this error: TypeError: t is null

This is a different matter, and might be a symptom of malformed data .

In order to display prettier error messages, use the leaflet-src.js file instead of the leaflet.js file. Starting with Leaflet 1.0.0-beta2, leaflet-src.js has a sourcemap, which can point to the individual original files, allowing for better debugging.