Assign ID to marker in leaflet - Javascript Leaflet

Javascript examples for Leaflet:Marker

  1. HOME
  2. Javascript
  3. Leaflet
  4. Marker

Description

Assign ID to marker in leaflet

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head> 
      <title>Leaflet Example with LayerGroup</title> 
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 
      <link rel="stylesheet" href="https://d19vzq90twjlae.cloudfront.net/leaflet-0.7.3/leaflet.css"> 
      <style>

.container {/*from ww w.jav a2  s. com*/
   display: flex;
   height: 100vh;
   align-content: stretch;
   background: #333;
}
.container #list {
   flex: 0 0 25%;
   padding: 0 1em;
   box-sizing: border-box;
   background: #dedede;
   list-style: none;
}
.container #list li {
   margin-bottom: 0.5em;
}
.container #map {
   flex: 0 0 75%;
   margin: 0 auto;
   background: lightgrey;
}


      </style> 
   </head> 
   <body translate="no"> 
      <div class="container"> 
         <div id="list"> 
            <h3>People</h3> 
         </div> 
         <div id="map"></div> 
      </div> 
      <script src="https://d19vzq90twjlae.cloudfront.net/leaflet-0.7.3/leaflet.js"></script> 
      <script>
       // Create or retrieve the data
var people = [
{
  name: 'Bob',
  latLng: [41.028, 28.975],
  id: '2342fc7' },
{
  name: 'John',
  latLng: [41.019, 29.02],
  id: 'djf3892' },
{
  name: 'Karen',
  latLng: [41.011, 28.986],
  id: '2837hf3' }];
var group = L.layerGroup(),
list = document.getElementById('list');
var map = new L.map('map', {
  center: new L.LatLng(41.019829, 28.989864),
  zoom: 14,
  maxZoom: 18,
  layers: new L.TileLayer('http://{s}.tiles.mapbox.com/v3/gvenech.m13knc8e/{z}/{x}/{y}.png') });
people.forEach(function (person) {
  var marker = L.marker(person.latLng, {
    title: person.name,
    riseOnHover: true });
  group.addLayer(marker);
  person.marker_id = group.getLayerId(marker);
});
group.addTo(map);
function onClick(data) {
  var marker_id = data.marker_id,
  marker = group.getLayer(marker_id);
  map.panTo(marker.getLatLng());
}
people.forEach(function (person) {
  var item = document.createElement('li');
  item.innerHTML = '<a href="#">' + person.name + '</a>';
  item.addEventListener('click', onClick.bind(null, person));
  list.appendChild(item);
});
      </script>  
   </body>
</html>

Related Tutorials