dc.leafletMarkerChart - capture events on markers

[PBrockmann]

My transition from dc.js + leaflet.js to dc.leafletMarkerChart puzzles me on how to handle events on the markers that are created.

d3.selectAll('.leaflet-marker-icon').on('click', function() {
        console.log("click");
}

does not work. Is there a function to do that and be able to get id of the markers as well ?

The marker() function seems promissing but unusable (get message: marker is not a function) while doc says:

.marker() - set function (d,map) to build the marker object. Default: standard Leaflet marker is built

[Tim-Intellipharm]

You cannot do any normal d3 functionality on leaflet or google maps. Doing something on click sounds like a good feature for the map, so I might add that as another option.

The .marker() function can be used to overwrite what is called when creating the marker. So you could use it to create custom markers.

You could try .markerGroup() to get the layer and then the markers should be inside of that.

If you want greater control then a custom map might be a better fit for you. You have to handle creating the markers and crossfiltering.

[PBrockmann]

Ok I have figure out this problem. No need for extra functions. Use of the marker() is very convenient once understanding its principles. So here is a piece of code that let you control events on markers: highlight corresponding row in a dc-table for exemple. Note that I have use L.Marker.extend to host my own id of marker.

Hope that will help (this code is visible from https://github.com/PBrockmann/ClimateProxiesFinder)

  customMarker = L.Marker.extend({
    options: { 
      Id: 'Custom data!'
   }
  });
  iconSize = [32,32];
  iconAnchor = [16,32];
  popupAnchor = [0,-20];
  mapChart  = dc.leafletMarkerChart("#chart-map");
  mapChart
      .width(1000)
      .height(300)
      .dimension(mapDim)
      .group(mapGroup)
      .center([45, -19])    // slightly different than zoomHome to have a info updated when triggered
      .zoom(2)         
      .tiles(function(map) {            // overwrite default baselayer
       return L.tileLayer(
                'http://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/{z}/{y}/{x}',
                { attribution: 'LSCE © 2016 | Baselayer © ArcGis' }).addTo(map); 
      })
      .mapOptions({maxZoom: mapMaxZoom, zoomControl: false})
      .fitOnRender(false)
      .filterByArea(true)
      .cluster(true) 
      .clusterOptions({maxClusterRadius: 50, showCoverageOnHover: false, spiderfyOnMaxZoom: true})
      .title(function() {})  
      .popup(function(d,marker) {
        id = d.key[2] -1;
            return  "Id: " + "" + data[id].Id + "
"
                + "Position: " + "" + data[id].Longitude.toFixed(2) + "°E, " + data[id].Latitude.toFixed(2) + "°N
"
                + "Depth (m): " + "" +  data[id].Depth.toFixed(2) + "
"
                + "Date (ka): " + "" + "from " + data[id].RecentDate.toFixed(2) + " to " + data[id].OldestDate.toFixed(2) + "
"
                + "Archive: " + "" + data[id].Archive + "
"
                + "Material: " + "" + data[id].Material + "
";
      })
      .popupOnHover(true)
      .marker(function(d,map) {
               id = d.key[2] -1;
               if (data[id].Archive == "Ice") 
                        icon = L.icon({ iconSize: iconSize, iconAnchor: iconAnchor, popupAnchor: popupAnchor, iconUrl: 'marker_Ice.png' });
               else if (data[id].Archive == "Lake") 
                        icon = L.icon({ iconSize: iconSize, iconAnchor: iconAnchor, popupAnchor: popupAnchor, iconUrl: 'marker_Lake.png' });
               else if (data[id].Archive == "Ocean") 
                        icon = L.icon({ iconSize: iconSize, iconAnchor: iconAnchor, popupAnchor: popupAnchor, iconUrl: 'marker_Ocean.png' });
               else if (data[id].Archive == "Speleothem") 
                        icon = L.icon({ iconSize: iconSize, iconAnchor: iconAnchor, popupAnchor: popupAnchor, iconUrl: 'marker_Speleothem.png' });
               else if (data[id].Archive == "Tree") 
                        icon = L.icon({ iconSize: iconSize, iconAnchor: iconAnchor, popupAnchor: popupAnchor, iconUrl: 'marker_Tree.png' });
                marker = new customMarker([data[id].Latitude, data[id].Longitude], {Id: (id+1).toString(), icon: icon});
                marker.on('mouseover', function(e) {
                        iconUrlNew = "highlight_" + e.target.options.icon.options.iconUrl;
                        iconNew = L.icon({ iconSize: iconSize, iconAnchor: iconAnchor, popupAnchor: popupAnchor, iconUrl: iconUrlNew });
                       e.target.setIcon(iconNew);
                       d3.selectAll(".dc-table-column._0")
                                .text(function (d, i) {
                           if (parseInt(d.Id) == e.target.options.Id) {
                               this.parentNode.scrollIntoView();
                                   d3.select(this.parentNode).style("font-weight", "bold");
                            }
                            return d.Id;
                        });
                });
                marker.on('mouseout', function(e) {
                        iconUrlNew = e.target.options.icon.options.iconUrl.replace("highlight_", "");
                        iconNew = L.icon({ iconSize: iconSize, iconAnchor: iconAnchor, popupAnchor: popupAnchor, iconUrl: iconUrlNew });
                        e.target.setIcon(iconNew);
                        d3.selectAll(".dc-table-column._0")
                .text(function (d, i) {
                        if (parseInt(d.Id) == e.target.options.Id) {
                                d3.select(this.parentNode).style("font-weight", "normal");
                            }
                        return d.Id;
                        });
                });
                marker.on('click', function(e) {
                        console.log("click event");
                        //window.open(...
                })
                return marker;
      });

[Tim-Intellipharm]

That is an awesome website! :+1: