I have a value in array like this

"officer_id": "T001",
"officer_name": "Michael",
"type_id": "1122",
"address": "12th Elm Street",
"address_description": "Chloe Toy Shop",
"description": "there's car accident in front of the shop",
"location": {
  "lat": -6.2613226,
  "lon": 106.7966812

And I have included that value into map marker. I want to ask how to insert two values in markers.bindPopup so when user click the icon, they can see two values, like description, address and officer who take responsibility.

I have insert 2 marker.bindPopup but it's not working. It's only one value that user can see when the icon has clicked.

Here's the script I have tried

    url: api_host+'reports',
    type: 'GET',
    success: function(response) {
        for(var i = 0; i < response.length; i++)
            var latitude = response[i].location.lat;
            var longitude = response[i].location.lon;
            var marker = L.marker([latitude,longitude]).addTo(map);



Do you know how user can see more values when they click the icon?


If you look at description if bindPopup() method in docs https://leafletjs.com/reference-1.5.0.html#layer (see section Popup methods), you will se that it takes as argument any HTML formated text.

In your case to show info in two lines, you could simply do something like this:

marker.bindPopup(response[i].officer_name + '</br>' + response[i].description).openPopup();

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.