Solved: need to access the index of leaflet marker

I have a map in leaflet that lets me add and delete points.

When deleting a point I console.log the index of the point marker.

However, what I want to do is when just clicking on a point to display its popup I want to also console.log its index value in the marker list.

My reason for doing this is because later I will need to target this marker and its popup and change its value.

Thanks,

<!DOCTYPE html>
<html>
    <head>
        <meta name="description" content="Leaflet API - Adding a Marker" />
		<title>Leaflet API: Adding a Marker and Getting ID</title>
        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
		<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
		
<style>
#map { 
	height: 400px; 
	width: 400px;
	margin: 0; 
	padding: 0; 
}
	
.add_marker_control {
	background-image: url(https://jsbin-user-assets.s3.amazonaws.com/cjseeger/add_marker.png);
	width: 20px;
    height: 20px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    display: block;
    padding: 3px;
    margin-bottom: 5px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    box-shadow: 0 1px 7px rgba(0, 0, 0, 0.65);
    cursor: auto;
    text-align: center;
    background-color: #ffffff;
}

.add_marker_control:hover {
	background-color: #f4f4f4;
}

.del_marker_control {
	background-image: url(https://jsbin-user-assets.s3.amazonaws.com/cjseeger/del_marker.png);
	width: 20px;
    height: 20px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    display: block;
    padding: 3px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    box-shadow: 0 1px 7px rgba(0, 0, 0, 0.65);
    cursor: auto;
    text-align: center;
    background-color: #ffffff;
}

.del_marker_control:hover {
	background-color: #f4f4f4;
}
</style>
		
</head>
    
<body>
<div id="map"></div>
		
<script >
L.Control.SimpleMarkers = L.Control.extend({
    options: {
        position: 'topleft'
    },
    
    onAdd: function () {
        var marker_container = L.DomUtil.create('div', 'marker_controls');
        var add_marker_div = L.DomUtil.create('div', 'add_marker_control', marker_container);
        var del_marker_div = L.DomUtil.create('div', 'del_marker_control', marker_container);
        add_marker_div.title = 'Add a marker';
        del_marker_div.title = 'Delete a marker';
        
        L.DomEvent.addListener(add_marker_div, 'click', L.DomEvent.stopPropagation)
            .addListener(add_marker_div, 'click', L.DomEvent.preventDefault)
            .addListener(add_marker_div, 'click', (function () { this.enterAddMarkerMode(); }).bind(this));
     
        L.DomEvent.addListener(del_marker_div, 'click', L.DomEvent.stopPropagation)
            .addListener(del_marker_div, 'click', L.DomEvent.preventDefault)
            .addListener(del_marker_div, 'click', (function () { this.enterDelMarkerMode(); }).bind(this));
        
        return marker_container;
    },
    
    enterAddMarkerMode: function () {
        if (markerList !== '') {
            for (var marker = 0; marker < markerList.length; marker++) {
                if (typeof(markerList[marker]) !== 'undefined') {
                    markerList[marker].removeEventListener('click', this.onMarkerClickDelete);
                } 
            }
        }
        document.getElementById('map').style.cursor = 'crosshair';
        map.addEventListener('click', this.onMapClickAddMarker);
    },
    
    enterDelMarkerMode: function () {
        for (var marker = 0; marker < markerList.length; marker++) {
            if (typeof(markerList[marker]) !== 'undefined') {
                markerList[marker].addEventListener('click', this.onMarkerClickDelete);
            }
        }
    },
    
    onMapClickAddMarker: function (e) {
        map.removeEventListener('click'); 
        document.getElementById('map').style.cursor = 'auto';
        
        var popupContent =  "You clicked on the map at " + e.latlng.toString();
        var the_popup = L.popup({maxWidth: 160, closeButton: true});
        the_popup.setContent(popupContent);
		
   
        var marker = L.marker(e.latlng);
        marker.addTo(map);
        marker.bindPopup(the_popup).openPopup();
        markerList.push(marker);
		
			
      
        console.log("Total Markers Created: "+markerList.length);
		
		//I want to put in the console the index of this marker when it is later clicked
        
        return false;    
    },

    onMarkerClickDelete: function (e) {
        map.removeLayer(this);
        var marker_index = markerList.indexOf(this);
		console.log("deleted marker_index: "+marker_index);
        delete markerList[marker_index];
        
        for (var marker = 0; marker < markerList.length; marker++) {
            if (typeof(markerList[marker]) !== 'undefined') {
                markerList[marker].removeEventListener('click', arguments.callee);
            } 
        }
        return false;  
    }
});

var markerList = [];



/////////////Map///////////

var map = L.map('map').setView([43, -93], 10);

		  // add an OpenStreetMap tile layer
		  L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
		      attribution: 'The map contributors',
		      maxZoom: 18
		  }).addTo(map);


// Create the marker controls
        var marker_controls = new L.Control.SimpleMarkers();
        map.addControl(marker_controls);
</script>
		
</body>
</html>

Open in new window

need to access the index of leaflet marker

Premium Content

Premium Content

Why Experts Exchange?

Ask ANY Question

Did You Know?