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.+

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

• 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);

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

{
	"type": "Feature",
	"geometry":
	{
		<geoJson geometry>...
	},
	"properties":
	{
		"<NAME>": <VALUE>, // Properties pairs that can be overloaded by the GeoJSON options or 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);

• 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).