Skip to content

Instantly share code, notes, and snippets.

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 &&;
// function for creating layers for GeoJSON point features (optional)
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {
icon: myCustomIcon,
title: &&
// function that gets called on every created feature layer (optional)
onEachFeature: function (feature, layer) {
var content = &&;
if (content) {
// function that decides whether to show a feature or not (optional)
filter: function (feature, layer) {
return !( &&;
// add more GeoJSON data

This comment has been minimized.

Copy link

@robertharm robertharm commented Aug 14, 2012

my plugin 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 :-/

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:
Many thanks!


var layers = {};
var geojson = new L.GeoJSON();
geojson.on("featureparse", function(e) {
if (typeof != 'undefined') e.layer.bindPopup(;
if ( != '') e.layer.options.icon = new L.Icon("/" +;
if ( == '') e.layer.options.icon = new L.Icon("");
if ( == '') e.layer.options.clickable = false;
layers[] =;
if (typeof markers[] == 'undefined') markers[] = [];
var geojsonObj;



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.


This comment has been minimized.

Copy link

@Summys Summys commented Jun 16, 2017

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

            return marker.bindPopup(popupContent, {
                closeButton: false,
                minWidth: 300

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


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