Skip to content


Folders and files

Last commit message
Last commit date

Latest commit


Repository files navigation

Leaflet JSON Layer

npm version

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

Copyright 2023 Stefano Cudini

If this project helped your work help me to keep this alive by Paypal DONATION ❤

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 Function 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 Function function for pre-filter data
dataToMarker Function function that will be used for creating markers from json points
layerTarget L.Layer pre-existing layer to add markers(L.LayerGroup, L.MarkerClusterGroup)
buildPopup Function function popup builder
optsPopup String popup options
buildIcon Function function icon builder
minZoom Number min zoom for call data
caching Boolean remote requests caching
cacheId Function function to generate id used to uniquely identify data items in cache
minShift Number min shift for update data(in meters)
precision Number number of digit send to server for lat,lng precision
updateOutBounds String request new data only if current bounds higher than last bounds
updateMarkers Boolean update all markers in map to last results of callData


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