Getting click on Mapbox markers

Question

I have been able to integrate markers to the mapbox we are using, but still wonder if we can get a click on them. If so how?

Following is my code:

<style>
/*
 * Unlike other icons, you can style `L.divIcon` with CSS.
 * These styles make each marker a circle with a border and centered text.
 */
.count-icon1 {
  background:url(images/redpin.png);  
  color:#000;
  font-weight:600;
  text-align:center; 
  padding:19px 0 0 0px; font-size:180%;
 }
.count-icon2 {
  background:url(images/greenpin.png);  
  color:#000;
  font-weight:600;
  text-align:center; 
  padding:19px 0 0 0px; font-size:180%;
 }
</style>

js code:

var defaultLat = 39.12367;
        var defaultLon = -76.81229;

        if($scope.currentLocDetails != null){
            if($scope.currentLocDetails.Lat != null && $scope.currentLocDetails.Lon != null){
                defaultLat  = $scope.currentLocDetails.Lat;
                defaultLon  = $scope.currentLocDetails.Lon;
            }
        }

        var x = 0;
        if(map != null)
            map.remove();
        map = L.mapbox.map('map_view', 'your key here').setView([defaultLat, defaultLon], 9);
        for (var i = 0; i < responseData.JobLocation.length; i++) {

            var eachObj  = responseData.JobLocation[i];
            if(eachObj.Lat != null && eachObj.Lon != null){
                x++;
                // Use a little math to position markers.
                // Replace this with your own code.
                L.marker([
                    eachObj.Lat,
                    eachObj.Lon
                ], {
                    icon: L.divIcon({
                        // Specify a class name we can refer to in CSS.
                        className: ((currentSelectedIndex + 1) == i + 1)?'count-icon1':'count-icon2',
                        // Define what HTML goes in each marker.
                        html: i + 1,
                        // Set a markers width and height.
                        iconSize: [65, 94]
                    })
                }).addTo(map);
            }
        }   

I tried doing a bit R & D, but get to no where: We need to use featureLayer , but dunno how.

For the click feature we need to follow this code, but how?

// Listen for individual marker clicks.
myLayer.on('click',function(e) {
    // Force the popup closed.
    e.layer.closePopup();

    var feature = e.layer.feature;
    var content = '<div><strong>' + feature.properties.title + '</strong>' +
                  '<p>' + feature.properties.description + '</p></div>';

    info.innerHTML = content;
});

Any help with this is really appreciated.

Thanks

Answer 1

I believe there are various ways of doing this with Mapbox, unfortunately I don't have access to my project where I use it right now so I'm just going off the Mapbox documentation.

Following your example this looks the simplest - if you have added marker, for example:

var marker = L.marker([43.6475, -79.3838], {
  icon: L.mapbox.marker.icon({
    'marker-color': '#9c89cc'
  })
})
.bindPopup('<p>Your html code here</p>')
.addTo(map);

You can pass whatever HTML you want in the bindPopup argument. https://www.mapbox.com/mapbox.js/example/v1.0.0/clicks-in-popups/

Then it should be be pretty simple via 'addEventListener('click', function)' on that marker variable.

Or alternatively -

myLayer.on('click', function(e) {
    resetColors();
    e.layer.feature.properties['old-color'] = e.layer.feature.properties['marker-color'];
    e.layer.feature.properties['marker-color'] = '#ff8888';
    myLayer.setGeoJSON(geoJson);
});

map.on('click', resetColors);

Effectively add an event listener on the map variable - and then listen to what you've clicked on via the event argument passed to the event listener.

This may be useful: https://www.mapbox.com/mapbox.js/example/v1.0.0/change-marker-color-click/

Good luck!