I have a huge amount of GIS data in a database. I am fetching this data and converting it into GeoJSON before viewing the map. I am fetching all of the data to meet the requirements, which is taking a lot of time. Is there any way to load data for a particular map window which user is viewing, and only loading respective GIS data for the same window using the Leaflet library?

In my case, I am using Google Maps to show parking slots (GIS data) of a country on a map.


2 Answers 2


In an Ideal condition, if you have lots of Data, you do not add it to the Map as a GeoJSON, since :

  • It will be a Large File, and hence will take a long time for the client to receive in its browser over the internet.
  • This large amount of data will consume a lot of resources when Leaflet will draw it in the browser.

This kind of problem can usually be solved by using some kind of server side rendering.

  • You can use a GIS server like GeoServer to serve out this data as a WMS service.
  • You could use some other technology like MapBox or CartoDB to serve this data as Vector Tiles.

The most efficient workflow recommendation depends on the type of database you have.

For example, w/ PostGIS you would probably want to create vector tiles dynamically. You could then consume this endpoint in Leaflet using the (Leaflet.MapboxVectorTile) library: https://github.com/spatialdev/PGRestAPI/blob/master/docs/VectorTiles.md

Note: dynamic vector tile endpoints pulling from PostGIS only pulls the geometry column, and the resulting .pbf (vector tile) will contain NO properties/attributes.

You could also defer to a tile rendering tool, such as Tippecanoe. In order to use this tool you would simply:

Step 1. Install tippecanoe w/ homebrew.

Step 2. Build vector tileset from collection of GeoJSON features w/ $ tippecanoe -o file.mbtiles [file.json ...]

Step 3. Import to SQLite database or upload to Mapbox Studio.

Step 4. use Mapbox.js, a Leaflet plugin, that "extends Leaflet functionality with additional code to integrate with Mapbox services and your data on Mapbox."

Note: the default Mapbox.js file includes a copy of Leaflet pinned to a particular stable version. If you want just Mapbox.js and to use your own local copy of Leaflet, go to this page to grab the standalone URLs: https://www.mapbox.com/mapbox.js/api/v2.4.0/standalone/

  • Keep in mind with PGRestAPI you can include additional fields in the url string as options. Dec 29, 2016 at 20:01

Your Answer

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

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