leaflet.js - GeoJSON API changes with 0.4 - how to implement? WordPress

• SOLVED

my plugin [[LINK href="http://mapsmarker.com"]]mapsmarker.com[[/LINK]] offers the feature to add layer maps whose markers are loaded via GeoJSON. Since leaflet v0.4 - which I want to use in my next plugin release - this feature is broken.

According to the doc, the GeoJSON API has changed and is not backward-compatible. The linked example of the new API ([[LINK href="https://gist.github.com/3062900"]]https://gist.github.com/3062900[[/LINK]])
doesnt show, what exactly has to be changed in order to get old code working (in contrast to marker icon changes at [[LINK href="https://gist.github.com/3076084"]]https://gist.github.com/3076084[[/LINK]]) :-/

Below is the code I used with leaflet <0.4 to load markers via GeoJSON. Can anyone please help, what has to be changed in order to work with 0.4? Here´s a link to the official leaflet-reference: [[LINK href="http://leaflet.cloudmade.com/reference.html#geojson"]]http://leaflet.cloudmade.com/reference.html#geojson[[/LINK]]

And here´s a link to a GeoJSON-File which gets loaded on layer maps: [[LINK href="http://current.mapsmarker.com/wp-content/plugins/leaflet-maps-marker/leaflet-geojson.php?layer=14&callback=jsonp&full=yes"]]http://current.mapsmarker.com/wp-content/plugins/leaflet-maps-marker/leaflet-geojson.php?layer=14&callback=jsonp&full=yes[[/LINK]]

I also asked this question on the leaflet mailinglist where I got the following answer, which unfortunately I dont know what to do with :-/

<blockquote>AddGeoJson doesn't esiste anymore, use addData (i think). FeatureParae event doesn't esista anymore, but you need to pass a callback with constructor. I don't remember sintax, but it's easy to check using leaflet source code.</blockquote>

As answer I would need exactly what has to be changed in order to get it running again.

Robert

the code below which loads the markers via GeoJSON on the map is also on github: [[LINK href="https://github.com/robertharm/Leaflet-Maps-Marker/blob/dev/leaflet-layer.php#L918"]]https://github.com/robertharm/Leaflet-Maps-Marker/blob/dev/leaflet-layer.php#L918[[/LINK]]

var layers = {};
var geojson = new L.GeoJSON();
geojson.on("featureparse", function(e) {
if (typeof e.properties.text != 'undefined') e.layer.bindPopup(e.properties.text);
if (e.properties.icon != '') e.layer.options.icon = new L.Icon("<?php echo LEAFLET_PLUGIN_ICONS_URL ?>/" + e.properties.icon);
if (e.properties.icon == '') e.layer.options.icon = new L.Icon("<?php echo LEAFLET_PLUGIN_URL . 'leaflet-dist/images/marker.png' ?>");
if (e.properties.text == '') e.layer.options.clickable = false;
layers[e.properties.layer] = e.properties.layername;
if (typeof markers[e.properties.layer] == 'undefined') markers[e.properties.layer] = [];
markers[e.properties.layer].push(e.layer);
});
var geojsonObj;
<?php if ($multi_layer_map == 0) {
echo 'geojsonObj = eval("(" + jQuery.ajax({url: "' . LEAFLET_PLUGIN_URL . 'leaflet-geojson.php?layer=' . $id . '", async: false}).responseText + ")");';
} else if ($multi_layer_map == 1) {
echo 'geojsonObj = eval("(" + jQuery.ajax({url: "' . LEAFLET_PLUGIN_URL . 'leaflet-geojson.php?layer=' . $multi_layer_map_list . '", async: false}).responseText + ")");';
};?>
geojson.addGeoJSON(geojsonObj);
selectlayer.addLayer(mapcentermarker).addLayer(geojson);

Answers (1)

2012-08-15

Martin Pham answers:

please try this

var geojsonObj, mapIcon;
<?php if ($multi_layer_map == 0) {
echo 'geojsonObj = eval("(" + jQuery.ajax({url: "' . LEAFLET_PLUGIN_URL . 'leaflet-geojson.php?layer=' . $id . '", async: false}).responseText + ")");';
} else if ($multi_layer_map == 1) {
echo 'geojsonObj = eval("(" + jQuery.ajax({url: "' . LEAFLET_PLUGIN_URL . 'leaflet-geojson.php?layer=' . $multi_layer_map_list . '", async: false}).responseText + ")");';
};?>
L.geoJson(geojsonObj, {
// callback
onEachFeature: function(feature, layer) {
if (typeof feature.properties.text != 'undefined') {
layer.bindPopup(feature.properties.text);
}
},
pointToLayer: function (feature, latlng) {
mapIcon = L.icon({
iconUrl: (feature.properties.icon != '') ? "<?php echo LEAFLET_PLUGIN_ICONS_URL ?>/" + feature.properties.icon : "<?php echo LEAFLET_PLUGIN_URL . 'leaflet-dist/images/marker.png' ?>"
});
return L.marker(latlng, {icon: mapIcon});
}
}).addTo(map);


---

Robert Seyfriedsberger comments:

that worked - thanks!