Define the icon in geojson file

geojson file

Define the following properties for each feature in your geojson file: iconUrl, iconSize, iconAnchor, popupAnchor, tooltipAnchor. If an property is not defined, the default from shortcode leaflet-geojson is used.

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "iconUrl": "/wp-content/uploads/icons/marker-icon-green.png",
        "iconSize": [50, 82],
        "iconAnchor": [12,-41],
        "popupAnchor": [1,34],
        "tooltipAnchor": [16,28]
      },
      "geometry": {
        "type": "Point",
        "coordinates": [

Code

Use e.g. WPCode and configure this as a Javascript snippet with shortcode [wpcode id="xxxx"].

window.WPLeafletMapPlugin = window.WPLeafletMapPlugin || [];
window.WPLeafletMapPlugin.push(function () {
	var map = window.WPLeafletMapPlugin.getCurrentMap();
	var geojsons = window.WPLeafletMapPlugin.geojsons;
	if (geojsons.length > 0) {
		var geocount = geojsons.length;
		for (var j = 0, len = geocount; j < len; j++) {
			var geojson = geojsons[j];
			geojson.on(
				"ready",
				function () {
					var a = this.layer;
					a.eachLayer(
						function (layer) {
							if (layer.feature.geometry.type == "Point" ) {
								let iconopts = ["iconUrl", "iconSize", "iconAnchor", "popupAnchor", "tooltipAnchor"];
								iconopts.forEach((item) => {
									if (layer.feature.properties[item]) {
										layer.options[item] = layer.feature.properties[item];
									}
								});
								let markeroptions = layer.getIcon().options; 
								var geojsonicon   = L.Icon.extend(
									{
										options: markeroptions
									}
								);
								geojsonmarker = new geojsonicon(
									{
										iconUrl: layer.options.iconUrl,
										popupAnchor: layer.options.popupAnchor,
										iconAnchor: layer.options.iconAnchor,
										iconSize: layer.options.iconSize,
										tooltipAnchor: layer.options.tooltipAnchor
									}
								);
								layer.setIcon( geojsonmarker );
							}
						}
					);
				}
			);
		}
	}
});

Map with geojson Marker icons

Define in your leaflet-geojson shortcode the default of iconUrl, iconSize, iconAnchor, popupAnchor, tooltipAnchor:

When using the maps, content is loaded from third-party servers. If you agree to this, a cookie will be set and this notice will be hidden. If not, no maps will be displayed.

[leaflet-map fitbounds]
[leaflet-geojson 
 iconUrl="/wp-content/uploads/sites/17/icons/marker-icon-red.png"
 iconAnchor="12,41"
 popupAnchor="1,-34"
 tooltipanchor="16,-28"
 iconSize="25, 41"
 src="/wp-content/uploads/sites/17/geojson/geojson-icons.geojson" table-view][/leaflet-geojson]
[hover]
[zoomhomemap]
[wpcode id="3550"]

Of course, everything has to fit together. The example is configured so that you can see the effect.

Nofollow!