Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Leaflet GeoJSON API proposal
var geojson = L.geoJson(data, {
// style for all vector layers (color, opacity, etc.), either function or object (optional)
style: function (feature) {
return feature.properties && feature.properties.style;
},
// function for creating layers for GeoJSON point features (optional)
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {
icon: myCustomIcon,
title: feature.properties && feature.properties.name
});
},
// function that gets called on every created feature layer (optional)
onEachFeature: function (feature, layer) {
var content = feature.properties && feature.properties.popupContent;
if (content) {
layer.bindPopup(content);
}
},
// function that decides whether to show a feature or not (optional)
filter: function (feature, layer) {
return !(feature.properties && feature.properties.isHidden);
}
}).addTo(map);
// add more GeoJSON data
geojson.addData(moreData);
map.fitBounds(geojson.getBounds());
@robertharm

This comment has been minimized.

Copy link

@robertharm robertharm commented Aug 14, 2012

my plugin mapsmarker.com offers the feature to add layer maps whose markers are loaded via GeoJSON. Since v0.4 this feature is broken.
According to the doc, the GeoJSON API has changed and is not backward-compatible. The shown example of the new API above
doesnt show, what exactly has to be changed in order to get old code working (in contrast to marker icon changes at https://gist.github.com/3076084) :-/

Here´s 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?
And heres a link to a GeoJSON-File which gets loaded on layer maps: http://current.mapsmarker.com/wp-content/plugins/leaflet-maps-marker/leaflet-geojson.php?layer=14&callback=jsonp&full=yes
Many thanks!

Robert

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("/" + e.properties.icon);
if (e.properties.icon == '') e.layer.options.icon = new L.Icon("");
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;

geojson.addGeoJSON(geojsonObj);
selectlayer.addLayer(mapcentermarker).addLayer(geojson);

@abdulrehmanch112

This comment has been minimized.

Copy link

@abdulrehmanch112 abdulrehmanch112 commented Jul 12, 2014

i want to get feature properties and want to show in a div. Plz fine some solution.

@Summys

This comment has been minimized.

Copy link

@Summys Summys commented Jun 16, 2017

var marker, popupContent, properties;
            marker = e.layer;
            properties = marker.feature.properties;
            popupContent = '<div class="popup"><h3><a href="/places/' + properties.id + '" target="marker">' + properties.name + '</a></h3><p class="popup-num">' + properties.description + ' Point of Interest No. ' + properties.id + '</p></div>';

            return marker.bindPopup(popupContent, {
                closeButton: false,
                minWidth: 300
            }).addTo(map);

all goes on 'layeradd' event, hope I'm not too late.

@GraniteConsultingReviews

This comment has been minimized.

Copy link

@GraniteConsultingReviews GraniteConsultingReviews commented Sep 4, 2017

Thanks for sharing this code this really help to solve my problem.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment