Adding custom properties to Leaflet layers (GeoJSON version)

by Alex Azuero

HTML

<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<div id="map"></div>
<div class="btn-group">
    <button class="btn" onclick="deleteFromGroupByID(group, 1)">Remove Marker 1</button>
    <button class="btn" onclick="deleteFromGroupByID(group, 2)">Remove Marker 2</button>
    <button class="btn" onclick="deleteFromGroupByID(group, 3)">Remove Marker 3</button>
</div>

CSS

html, body, #map {
    height: 500px;
    width:100%;
    padding:0px;
    margin:0px;
}

JavaScript

////////////////////////////////////////////////////////////////////////////////////////////
//setting up the map//
////////////////////////////////////////////////////////////////////////////////////////////

// set center coordinates
var coords = [34.069, -118.293];

// set default zoom level
var zoomLevel = 14;

// initialize map
var map = L.map('map').setView(coords, zoomLevel);

// set source for map tiles
ATTR = '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a> | ' +
'&copy; <a href="http://cartodb.com/attributions">CartoDB</a>';
CDB_URL = 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png';

// add tiles to map
L.tileLayer(CDB_URL, {attribution: ATTR}).addTo(map);

/////////////////////////////////////////////////////////////////////////////////////////////
//adding data//
/////////////////////////////////////////////////////////////////////////////////////////////
var points = {
    "type": "FeatureCollection",
        "features": [{
        "type": "Feature",
            "geometry": {
            "type": "Point",
                "coordinates": [-118.2931, 34.0726]
        },
            "properties": {
        }
    }, {
        "type": "Feature",
            "geometry": {
            "type": "Point",
                "coordinates": [-118.2817, 34.0674]
        },
            "properties": {
        }
    }, {
        "type": "Feature",
            "geometry": {
            "type": "Point",
                "coordinates": [-118.2968, 34.0637]
        },
            "properties": {
        }
    }]
};

group = L.geoJson(points).addTo(map);

/////////////////////////////////////////////////////////////////////////////////////////////
//attaching custom properties//
/////////////////////////////////////////////////////////////////////////////////////////////
var tempID = 1;
group.eachLayer(function(layer) {
  layer.feature.properties.layerID = tempID;
...