Build dynamic JSON Layer via Ajax/JSONP with caching
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
dist New Option cacheId Aug 11, 2017
examples css Oct 12, 2017
src New Option cacheId Aug 11, 2017
.gitignore fix nominatim example Apr 20, 2016
Gruntfile.js rename Oct 27, 2016 Update Mar 25, 2018
index.html css Oct 12, 2017
package.json New Option cacheId Aug 11, 2017

Leaflet JSON Layer

Simple way for transform any JSON data source in a Leaflet Layer!

A Dynamic Leaflet Layer that load JSON data in layer in the form of markers with attributes

and minimize remote requests with caching system

Tested in Leaflet 0.7 and 1.1


Option Data Description
url String remote url
jsonpParam String callback parameter name for jsonp request append to url
jsonpParam String callback parameter name for jsonp request append to url
callData String custom function for data source, params: (req: url
propertyItems String json property used contains data items
propertyLoc String json property used as Latlng of marker, if is array: ['lat','lon'] select double fields
locAsGeoJSON String interpret location data as [lon, lat] value pair instead of [lat, lon]
propertyTitle String json property used as title in marker
filterData String function for pre-filter data
dataToMarker String function that will be used for creating markers from json points
onEachMarker String function called on each marker created, similar to option onEachFeature of L.GeoJSON
layerTarget String pre-existing layer to add markers(L.LayerGroup, L.MarkerClusterGroup)
buildPopup String function popup builder
optsPopup String popup options
buildIcon String function icon builder
minShift String min shift for update data(in meters)
precision String number of digit send to server for lat,lng precision
updateOutBounds String request new data only if current bounds higher than last bounds


Event Data Description
'dataloading' {req: url bbox}
'dataloaded' {data: json} fired on ajax/jsonp request success


var l = new L.LayerJSON({url: "search.php?lat1={lat1}&lat2={lat2}&lon1={lon1}&lon2={lon2}" });






This plugin support Grunt for building process. Therefore the deployment require NPM installed in your system.

After you've made sure to have npm working, run this in command line:

npm install