Assign ID to marker in leaflet

Question

So i try to achieve a result as on foursquare: https://foursquare.com/explore?cat=drinks&mode=url&near=Paris which is when you clik on a marker on the map, it scrolls through the listed of restaurants on the right -hand side of the screen to the ad hoc restaurant, and highlights it through CSS. Conversely, when you click on the restaurant on the list, it highlights it on the map.

I am using skobbler/leaflet. I think I can achieve this by amending dynamically CSS as shown in this example: http://jsfiddle.net/gU4sw/7/ + a scroll to destination script already in place in the page.

To achieve this however, it looks like I need to assign an ID within the markers (2 markers below):

var marker = L.marker([52.52112, 13.40554]).addTo(map);
marker.bindPopup("Hello world!<br>I am a popup1.", { offset: new L.Point(-1, -41) }).openPopup();

var marker = L.marker([52.53552, 13.41994]).addTo(map);
marker.bindPopup("Hello world!<br>I am a popup2.", { offset: new L.Point(-1, -41) }).openPopup();

Question is: How can I assign an marker ID to trigger css change in the corresponding element within my html page?

My knowledge of JS is very limited, but may be there's a nice and easy solution out there, thx

Solution 1

I've been looking for a nice way to do this and as far as I can tell there is still no built-in way (using leaflet) to give a marker an ID. I know I'm a bit late to answering this but hopefully it will help others who stumble upon this question. As far as I can tell there are two main issues here:

Problem #1: Unless you save your markers to an object or map, described below, there is no easy programmatic way of accessing them later on. For example - A user clicks something OUTSIDE the map that corresponds to a marker INSIDE the map.

Problem #2: When a user clicks on a marker INSIDE the map, there is no built in way to retrieve the ID of that marker and then use it to highlight a corresponding element or trigger an action OUTSIDE the map.

Solutions

Using a one or more of these options will help address the issues described above. I'll start with the one mentioned in the previous answer. Here is the working pen, which holds all the code found below.

Option #1: Save each marker, using a hardcoded or dynamic ID, inside an object -

// Create or retrieve the data
var data = [
    {
      name: 'Bob',
      latLng: [41.028, 28.975],
      id: '2342fc7'
    }, {...}, {...}
];

// Add an object to save markers
var markers = {};

// Loop through the data
for (var i = 0; i < data.length; i++) {
  var person = data[i];

  // Create and save a reference to each marker
  markers[person.id] = L.marker(person.latLng, {
    ...
  }).addTo(map);
}

Similar to the other answer you can now access a single marker by using -

var marker = markers.2342fc7; // or markers['2342fc7']

Option #2:

While leaflet doesn't provide a built-in 'id' option for markers, you can add the an ID to the element directly by accessing ._icon property:

// Create and save a reference to each marker
markers[person.id] = L.marker(person.latLng, {...}).addTo(map);

// Add the ID
markers[person.id]._icon.id = person.id;

Now when you handle click events, it's easy as pie to get that marker's ID:

$('.leaflet-marker-icon').on('click', function(e) {
   // Use the event to find the clicked element
   var el = $(e.srcElement || e.target),
       id = el.attr('id');

    alert('Here is the markers ID: ' + id + '. Use it as you wish.')
});

Option #3:

Another approach would be use the layerGroup interface. It provides a method, getLayer, that sounds like it would be perfect get our markers using an ID. However, at this time, Leaflet does not provide any way to specify a custom ID or name. This issue on Github discusses how this should be done. However you can get and save the auto-generated ID of any Marker (or iLayer for that matter) like so:

var group = L.layerGroup()

people.forEach(person => {
    // ... create marker
    group.addLayer( marker );
    person.marker_id = group.getLayerId(marker)
})

Now that we have every marker's ID saved with each backing object in our array of data we can easily get the marker later on like so:

group.getLayer(person.marker_id)

See this pen for a full example...

Option #4:

The cleanest way to do this, if you have the time, would be to extend the leaflet's marker class to handle your individual needs cleanly. You could either add an id to the options or insert custom HTML into the marker that has your id/class. See the documentation for more info on this.

You can also you use the circleMarker which, in the path options, you will see has an option for className which can be nice for styling groups of similar markers.

Styling:

Almost forgot that your original question was posed for the purpose of styling... simply use the ID to access individual elements:

.leaflet-marker-icon#2342fc7 { ... }

Conclusion

I'll also mention that layer and feature groups provide another great way to interface with markers. Here is a question that discusses this a bit. Feel free to tinker with, or fork either the first or second pen and comment if I've missed something.

Solution 2

An easy way to do this is to add all the markers to a list with a unique id.

var markersObject = {};
markersObject["id1"] = marker1;
markersObject["id2"] = marker2;
markersObject["id3"] = marker3;

If the list of restaurants have a property in the html element of a single restaurant that corresponds to the id of the added marker. Something like:

<a href="#" id="singleRestaurantItem" data-restaurantID="id1" data-foo="bar">Click</a>

Then add the click event where you will pass the id of the restaurant (in this case "data-restaurantID") and do something like:

markersObject["passedValueFromTheClickedElement"].openPopup();

This way once you click on the item in the list a markers popup will open indicating where on the map is the restaurant located.

Solution 3

var MarkerIcon = L.Icon.extend({
    options: {
        customId: "",
        shadowUrl: 'leaf-shadow.png',
        iconSize: [64, 64],
        shadowSize: [50, 64],
        iconAnchor: [22, 94],
        shadowAnchor: [4, 62],
        popupAnchor: [-3, -76]
    }
});

var greenIcon = new MarkerIcon({iconUrl: "/resources/images/marker-green.png"}),            
    redIcon = new MarkerIcon({iconUrl: "/resources/images/marker-red.png"}),
    orangeIcon = new MarkerIcon({iconUrl: "/resources/images/marker-orange.png"});

var mymap = L.map('mapid').setView([55.7522200, 37.6155600], 13);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
    maxZoom: 18,
    id: 'mapbox.streets'
}).addTo(mymap);

// добавить маркер
L.marker([55.7522200, 37.6155600], {customId:"010000006148", icon: greenIcon, title:setMarkerTitle("010000006148")}).addTo(mymap).on('click', markerOnClick);
L.marker([55.7622200, 37.6155600], {customId:"010053166625", icon: redIcon, title: setMarkerTitle("010053166625")}).addTo(mymap).on('click', markerOnClick);

function markerOnClick(e) {
    var customId = this.options.customId;
    document.location.href = "/view/abonents/" + customId;
}

function setMarkerTitle(customId){
    var result = customId;
    result += "\nline2 ";
    result += "\nline3 ";
    return result;
}

Solution 4

For my case, I found the best way was to generate and pass a unique ID to L.marker's Options object when I create it.

const newMarker = L.marker([lat, lng], { uniqueID })

You can then add this marker to a leaflet layerGroup.

const newLayerGroup = L.layerGroup().addTo(map);
newLayerGroup.addLayer(newMarker);

You can access the ID with layer.options.uniqueID This allows me to find and manipulate the marker later; all I need is Leaflet's .eachLayer() and the uniqueID.

My backend (Cloud Firestore) already generates unique document ID's, which makes it super easy to sync my Leaflet map and backend in real-time, rather than rebuilding and remounting the entire layerGroup or refreshing the page.

//e.g. a callback which fires whenever a doc has been removed from my db

newLayerGroup.eachLayer((layer) => {
  if (deletedDocID === layer.options.uniqueID) {
    newLayerGroup.removeLayer(layer);
  }
});

View more solutions

Comments

[lauWM]

Thanks marko, JS code I provided has two markers, how do i know which one is marker1 and marker2 ?

[Elad Benda]

but then, can you giver code to filter and select by className ?

[duhaime]

Sure, I updated the code above. Just use css selectors to target the given element, and use the class name you provided to target a particular element. Here's an example: earlyeuropeanbooks.github.io (on click of bars, we remove opacity from all markers that don't have the class associated with the given bar)

[Slava84]

The best way is to extend the base L. Icon class, adding a new field, in this example the field customId, then you can access this field something like this.options.customId