Skip to content

Instantly share code, notes, and snippets.

@mourner
Created July 6, 2012 21:40
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save mourner/3062900 to your computer and use it in GitHub Desktop.
Save mourner/3062900 to your computer and use it in GitHub Desktop.
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());
@seyfro
Copy link

seyfro 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
Copy link

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

@Summys
Copy link

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

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