Adding custom properties to Leaflet layers (non-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//
/////////////////////////////////////////////////////////////////////////////////////////////
group = L.featureGroup().addTo(map);
L.marker([34.0726,-118.2931]).addTo(group);
L.marker([34.0674,-118.2817]).addTo(group);
L.marker([34.0637,-118.2968]).addTo(group);

/////////////////////////////////////////////////////////////////////////////////////////////
//attaching custom properties//
/////////////////////////////////////////////////////////////////////////////////////////////
var tempID = 1;
group.eachLayer(function(layer) {
  layer.layerID = tempID;
  tempID+=1;
	layer.bindPopup('Layer ID: ' + layer.layerID);
});

deleteFromGroupByID = function (group, ID) {
	group.eachLayer(function(layer) {
  	if (layer.layerID === ID) {
    	group.removeLayer(layer);
    }
  });
}