Leaflet.GeoJSON.Ajax

Leaflet plugin for remote geoJson layers (Markers, Polylines, Polygons, ...) using AJAX.

Get collection of features from a remote <URL> & display it into the map with related & parametrables markers, lines & polygons.

Add customized markers, popup labels & click to navigate to external urls.

This plugin works both on Leaflet V0.7 & V1.+

DEMO

See a remote geoJson simple demo here

See a demo with styling here

See a demo with styling & BBOX strategy here

See a more complex demo based on OSM Overpass API here

See a demo using Leaflet V0.7 here

USAGE

For a geoJson remote URL:

• Include L.GeoJSON.Style
• Include L.GeoJSON.Ajax
• Create a L.GeoJSON.Ajax instance & add it to the map.

new L.GeoJSON.Ajax(
	<URL>, // GeoJson server URL or function that returns the URL
	{
		argsGeoJSON: {
			name: value, // GeoJson args pairs that will be added to the url with the syntax: ?name=value&...
			...
		}
		bbox: <boolean>, // Optional: whether or not add bbox arg to the geoJson server URL
		autosetBounds: <boolean>, // Default: false. Automatically zooms to extend of loaded data. Only applies when bbox is not set.
		style: function(feature) { // Optional
			return {
				"<NAME>": <VALUE>, // Properties pairs that will overwrite the geoJson flow features properties
				"<NAME>": feature.properties.<NAME>, // The value can be calculated from any geoJson property for each features.
				...
			};
		}
		idAjaxStatus: optional html element #id that will be updated during loading of the map
	}
).addTo(map);

Properties pairs "<NAME>":<VALUE> can be:

Markers:

• iconUrl: <string>, // Url of icon image or inline 'data:image/png;base64,...'
• iconSize: [<int>, <int>] | default=img file size, // Size of the icon.
• iconAnchor: [<int>, <int>] | default=[middle,top], // Point of the icon which will correspond to marker's location
• degroup: <int>, // Isolate too close markers by a number of pixels when the mouse hover over the group.
• Or any of the following L.Marker options

Polylines & polygons:

• Any of the following L.Path options

Display a label when hovering the feature:

• popup: <string>, // Popup text
• popupAnchor: [<int>, <int>] | default=[middle,top], // Point from which the popup should open relative to the iconAnchor
• popupValidity: default=100, // The popup stay open if the mouse moves closest than this distance (pixels)
• popupClass: <string>, // Optional: CSS class to apply to the label

Action when clicking the feature:

• url: <string>, // Url where to navigate when the feature is clicked

Misc:

• zoom: true, // Add &zoom=000 parameter to the ajax request sent to the server, correspondins to the current zoom of the map

Or any of the following L.GeoJSON options

The URL response must respect the geoJson format:

{
	"type": "Feature",
	"geometry":
	{
		<geoJson geometry>...
	},
	"properties":
	{
		"<NAME>": <VALUE>, // Properties pairs that can be overloaded by the GeoJSON options or style
		...
	}
}

Display local geoJson data with local style:

You can use the previously defined styles options on local geoJson data while expanding L.GeoJSON.Style

new L.GeoJSON.Style(
	<geoJSON>, // <String> geoJson features
	{
		<OPTIONS>,
		"<NAME>": <VALUE>, // Optional: Properties pairs that will overwrite the geoJson flow features properties
		style: function(feature) { // Optional
			return {
				"<NAME>": <VALUE>, // Properties pairs that will overwrite the geoJson flow features properties
				"<NAME>": feature.properties.<NAME>, // The value can be calculated from any geoJson property for each features.
				...
			};
		}
	}
).addTo(map);

Notes:

• Code example: GeoJSON.Ajax.WRI.js

• Layer to display OSM overpass Points Of Interest: GeoJSON.Ajax.OSM.js

• You will get better popup labels, including centering effects for icons close to the map limit, including Leaflet rrose. (Just include the .css & .js files).