contoh menu control pada leaflet

1.http://jsfiddle.net/BPuQ9/5/
2.http://jsfiddle.net/BPuQ9/8/

var markers = new Array();
var map = L.map('map', {
    center: [48,14],
    zoom: 7
});

L.tileLayer('http://{s}.wien.gv.at/basemap/geolandbasemap/normal/google3857/{z}/{y}/{x}.jpeg', {
    attribution: 'http://www.basemap.at/',
    subdomains: ['maps', 'maps1', 'maps2', 'maps3', 'maps4'],
    maxZoom: 19
}).addTo(map);

map.on('click', onMapClick);

function onMarkerClick(e) {
    $('div').removeClass('active');
    $('div #' + e.target._leaflet_id).addClass('active');
    map.panTo(e.target.getLatLng());
}

function onMapClick(e) {

    var marker = new L.Marker(e.latlng);

    marker.on('click', onMarkerClick);
    map.addLayer(marker);
    markers[marker._leaflet_id] = marker;
    console.log(markers);
    $('#overlay > ul').append(
        '<div class="item" id="' + marker._leaflet_id + '">Marker ' + marker._leaflet_id + ' - <a href="#" class="remove" id="' + marker._leaflet_id + '">remove</a></div>');

    // Remove a marker
    $('.remove').on("click", function () {
        // Remove the marker
        map.removeLayer(markers[$(this).attr('id')]);

        // Remove the link
        $(this).parent('div').remove();
    });
}

HTML:

 html, body, #map {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
#overlay {
    position:absolute;
    width:30%;
    height:100%;
    left:0;
    top:0;
    background-color:rgba(255, 255, 255, 0.8);
}
.item {
    border:1px, solid;
    padding:2px;
    margin:2px;
    background-color:rgba(100, 100, 255, 0.5);
}
.active {
    background-color:rgba(100, 100, 255, 0.9);
}

 <div id="map"></div>
<div id="overlay">
    <ul></ul>
</div>