I have two layers in an Argentinian railroad-related project: one is for train stations and the other is for railroad lines. The first one has about 1100 points and the second, about 250 finely-detailed linestrings. I use leaflet.js as my framework, and a Bing layer and a background satellite imagery.

Right now, I have a web application in which I charge straight into memory both GeoJSON files, and it works just OK, except when I need to zoom or pan to a specific feature: it works really slow. I tried removing almost all the features, leaving just two or three linestrings and a couple dozen stations, and it works fast enough to be usable. So, I guess I need to refactor my code so every time I pan or zoom the map, there's an Ajax query to a PHP script that filters my layers using a bounding box query.

It is trivial to filter train stations because they are just points. My problem arises when I need to filter railroad lines: as I said, they are finely drawn, so each one of them has hundreds if not thousands of points. I tried a "foreach" loop with a coordinate query inside, but it takes forever to iterate and filter every coordinate that falls outside the bounding box. So, my question is: is there any way to make this more effective, or at least less CPU-intensive? I need to return a geojson object containing trimmed lines that fit nicely into the provided bounding box.

Edit: please bear with me, as I am an absolute amateur on this subject.

Edit 2: to summarize what I'm trying to achieve: I need to filter a GeoJSON object containing linestrings to return a sub-set of linestrings that fit inside a given bounding box, trimming those linestrings that are bigger than it.

Edit 3: forgot to mention that simplified geometries aren't a valid solution for me, as I need the current level of detail for railroad routes.

  • 1
    github.com/Leaflet/Leaflet.VectorGrid for displaying big GeoJSON files simplifying the geometries along the way (via github.com/mapbox/geojson-vt), and turfjs.org/docs for manual geoprocessing. – IvanSanchez Jan 24 at 17:02
  • While I forgot to mention that simplifying geometries is out of the question, the transforming bboxClip method can be what I'm looking for. Thanks! – AsBerserker Jan 24 at 17:38
  • Oh, using your suggestion, I ended up finding a similar method in Leaflet: clipSegment, so I guess I'll end up using that. Thanks again! – AsBerserker Jan 24 at 17:53
  • I still think you should give VectorGrid.Slicer a try, because your ultimate goal is smooth map panning/zooming, not clipping lines (and you're missing the fact that geojson-vt geometry simplification happens on a per-zoom-level basis instead of globally). See also the XY problem. – IvanSanchez Jan 25 at 11:09
  • Sorry for the late reply. I read about VectorGrid and, after some additional research, it did work! Thanks @IvanSanchez! – AsBerserker Feb 8 at 20:55

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Browse other questions tagged or ask your own question.