angular-mapboxgl-directive icon indicating copy to clipboard operation
angular-mapboxgl-directive copied to clipboard

click event for custom markers

Open mg1075 opened this issue 6 years ago • 0 comments

Thanks for writing this directive. My question is about adding a click event to custom markers, where the array of markers gets attached to the gl-markers attribute.

A mapbox tutorial shows that they manually add event listeners to custom markers. https://www.mapbox.com/help/tutorials/building-a-store-locator/#add-new-event-listeners

I am able to do similar inside an angularjs controller using the "element" property of the markers api.

My concerns here are: (1) Is there a different or recommended way of adding a click event using your plugin? (It seems the answer here is "no"). (2) If I have a function in the angular controller to add an event listener to each marker, do I have to worry about somehow destroying these event listeners in the angular controller's $destroy event? If yes, then how best to remove the listeners added to the custom markers?

function createElementForDivMarker(m_marker, m_index) {
     var el = document.createElement('div');
    el.id = "marker-" + m_index;
    el.className = 'marker marker-' + m_marker.properties.map_marker_class;  
        el.addEventListener('click', function(e) {
            console.log(m_marker.properties);
        }); 
    return el;
 }

mg1075 avatar Jan 18 '19 00:01 mg1075