CODEWITHSUNDEEP
javascriptmysqlmapboxgeojsonmapbox-gl-js
mand
mand

Reputation: 129

Dynamic MySQL querying to fill a GeoJson-data cache to be displayed in MapBox GL-JS

I have a MySQL database with about 10,000 geographical points in it.

I also have a Mapbox GL-JS map running on a webpage that does a query to obtain the data, make it into a GeoJSON and then plot the points. Mapbox has no trouble with handling all the points.

However, querying all points is slow, so I have to limit the query to say 500 points. I figured out how to request only the points within the bounding box using MBRContains.

But now, every time I change the bounding box of my map by dragging or zooming, I have to request the entire bounding box, even though a part of the data may be already known. I am sure there must be a smarter way of doing this, by making some sort of a cache and only querying new data.

How should I make this? Requesting all data is costly so I can not do that and then process it into an R-tree. This is why I don't see yet how I could use this solution from Mapbox: geojson vt. However, I do know that all mapping applications and probably also RPG's need an algorithm for this.

So, how do I dynamically request and load my data?

Upvotes: 1

Views: 677

Answers (1)

Steve Bennett
Steve Bennett

Reputation: 126527

Dynamic vector tiles

Ideally, you want a mechanism to generate and serve vector tiles, which Mapbox-GL-JS can consume. Then, all the needs around fetching only the right data, caching etc are automatically met.

I can't recommend a specific tool, but it looks like TileStache's "vector" provider can be connected to MySQL.

Static vector tiles

If your data does not change very often (eg, hourly or daily), another approach would be to run a batch process like this:

1. Dump data to GeoJSON
2. Use Tippecanoe to generate .mbtiles file
3. Serve .mbtiles file using something like Tessera.

Merge GeoJSONs

Using your existing stack, it would also seem not too complex to simply:

  • Fetch initial dataset, store it as points
  • When map moves, fetch new dataset, merge it into points
  • Use map.getSource().setData() to display the merged dataset.

Not exactly a standard approach, but could work, if you can find a simple way to do the merge.

Upvotes: 1

Related Questions