3 ms·
Not to sure how your backend is set up, but it looks like you're generating GeoJSON on the fly and the JSON serialization for this amount of data can be slow.
by et-al 2y ago
Not to sure how your backend is set up, but it looks like you're generating GeoJSON on the fly and the JSON serialization for this amount of data can be slow.
In typical HN fashion, I would suggest looking into using Tippecanoe to generate some vector tiles of the data and host that on S3. Then the DB can fall back to performing simple lookups via the accident ID. Filtering by time will need to move to the frontend, but that should be fine (if not, look into clustering the data at further zoom levels).
https://github.com/mapbox/tippecanoe https://github.com/mapbox/tippecanoe
- Bencarneiro 2y agoThis is very helpful
- wcedmisten 2y agoI've built quite a few open source mapping projects myself using Tippecanoe and other tools. Feel free to email me if you want help setting this up!
- woudsma 2y agoYou could also take a look at PostGIS to do geospatial queries (if needed). And in the past I’ve used node-mapnik to render vector/image map tiles. You can indeed host and cache them effectively on S3.
- et-al 2y agoHi Ben, briefly took another look this morning and I'm sorry for the hasty rec because I forgot Leaflet doesn't support vector tiles as easily as MapLibre/Mapbox. If the bottle-neck is the DB and you haven't enabled the PostGIS extension, I'd look into that as the other commenter mentioned. If it's your server, then yes look into pre-generating all the tiles and hosting them elsewhere, but this might then mean switching over to MapLibre/Mapbox (which is what most companies end up using because of Leaflet's limitations). For filtering on the frontend, I'd look into Expressions so you're not regenerating the GeoJSON collection every time (this causes a significant delay and flicker). - https://maplibre.org/maplibre-style-spec/expressions/ https://maplibre.org/maplibre-style-spec/expressions/ - https://maplibre.org/maplibre-gl-js/docs/examples/hover-styles/ https://maplibre.org/maplibre-gl-js/docs/examples/hover-styl...