fire hover and click events on geo maps

Author: etpinard

src/plots/geo/geo.js

@@ -33,6 +33,7 @@ var topojsonFeature = require('topojson').feature;
 function Geo(options, fullLayout) {
 
     this.id = options.id;
+    this.graphDiv = options.graphDiv;
     this.container = options.container;
     this.topojsonURL = options.topojsonURL;
 

src/plots/geo/index.js

@@ -52,6 +52,7 @@ exports.plot = function plotGeo(gd) {
         if(geo === undefined) {
             geo = new Geo({
                 id: geoId,
+                graphDiv: gd,
                 container: fullLayout._geocontainer.node(),
                 topojsonURL: gd._context.topojsonURL
             },

src/traces/choropleth/plot.js

@@ -79,7 +79,8 @@ plotChoropleth.plot = function(geo, choroplethData, geoLayout) {
             if(trace.visible !== true) return;
 
             var cdi = plotChoropleth.calcGeoJSON(trace, geo.topojson),
-                cleanHoverLabelsFunc = makeCleanHoverLabelsFunc(geo, trace);
+                cleanHoverLabelsFunc = makeCleanHoverLabelsFunc(geo, trace),
+                eventDataFunc = makeEventDataFunc(trace);
 
             function handleMouseOver(pt, ptIndex) {
                 if(!geo.showHover) return;
@@ -95,6 +96,12 @@ plotChoropleth.plot = function(geo, choroplethData, geoLayout) {
                 }, {
                     container: geo.hoverContainer.node()
                 });
+
+                geo.graphDiv.emit('plotly_hover', eventDataFunc(pt, ptIndex));
+            }
+
+            function handleClick(pt, ptIndex) {
+                geo.graphDiv.emit('plotly_click', eventDataFunc(pt, ptIndex));
             }
 
             d3.select(this)
@@ -103,6 +110,7 @@ plotChoropleth.plot = function(geo, choroplethData, geoLayout) {
                 .enter().append('path')
                     .attr('class', 'choroplethlocation')
                     .on('mouseover', handleMouseOver)
+                    .on('click', handleClick)
                     .on('mouseout', function() {
                         Plotly.Fx.loneUnhover(geo.hoverContainer);
                     })
@@ -187,6 +195,18 @@ function makeCleanHoverLabelsFunc(geo, trace) {
         if(hasText) thisText.push(pt.tx);
 
         pt.textLabel = thisText.join('<br>');
+    };
+}
 
+function makeEventDataFunc(trace) {
+    return function(pt, ptIndex) {
+        return {points: [{
+            data: trace._input,
+            fullData: trace,
+            curveNumber: trace.index,
+            pointNumber: ptIndex,
+            location: pt.id,
+            z: pt.z
+        }]};
     };
 }

src/traces/scattergeo/plot.js

@@ -148,7 +148,8 @@ plotScatterGeo.plot = function(geo, scattergeoData) {
             }
 
             var cdi = plotScatterGeo.calcGeoJSON(trace, geo.topojson),
-                cleanHoverLabelsFunc = makeCleanHoverLabelsFunc(geo, trace);
+                cleanHoverLabelsFunc = makeCleanHoverLabelsFunc(geo, trace),
+                eventDataFunc = makeEventDataFunc(trace);
 
             var hoverinfo = trace.hoverinfo,
                 hasNameLabel = (
@@ -171,6 +172,12 @@ plotScatterGeo.plot = function(geo, scattergeoData) {
                 }, {
                     container: geo.hoverContainer.node()
                 });
+
+                geo.graphDiv.emit('plotly_hover', eventDataFunc(pt, ptIndex));
+            }
+
+            function handleClick(pt, ptIndex) {
+                geo.graphDiv.emit('plotly_click', eventDataFunc(pt, ptIndex));
             }
 
             if(showMarkers) {
@@ -179,6 +186,7 @@ plotScatterGeo.plot = function(geo, scattergeoData) {
                     .enter().append('path')
                         .attr('class', 'point')
                         .on('mouseover', handleMouseOver)
+                        .on('click', handleClick)
                         .on('mouseout', function() {
                             Fx.loneUnhover(geo.hoverContainer);
                         })
@@ -263,6 +271,21 @@ function makeCleanHoverLabelsFunc(geo, trace) {
         if(hasText) thisText.push(pt.tx || trace.text);
 
         pt.textLabel = thisText.join('<br>');
+    };
+}
 
+function makeEventDataFunc(trace) {
+    var hasLocation = Array.isArray(trace.locations);
+
+    return function(pt, ptIndex) {
+        return {points: [{
+            data: trace._input,
+            fullData: trace,
+            curveNumber: trace.index,
+            pointNumber: ptIndex,
+            lon: pt.lon,
+            lat: pt.lat,
+            location: hasLocation ? pt.location : null
+        }]};
     };
 }