diff --git a/dc.leaflet.js b/dc.leaflet.js
index c548c2ee..948d76ca 100644
--- a/dc.leaflet.js
+++ b/dc.leaflet.js
@@ -49,6 +49,25 @@ dc_leaflet.leafletBase = function(_chart) {
return L.map(child_div.node(),_mapOptions);
};
+ //---------------------------------------------------------------------------------------
+ // Adapted from http://leafletjs.com/examples/choropleth.html
+ //---------------------------------------------------------------------------------------
+ var _info = L.control();
+
+ _info.onAdd = function (map) {
+ this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
+ this.update();
+ return this._div;
+ };
+
+ // method that we will use to update the control based on feature properties passed
+ _info.update = function (properties) {
+ this._div.innerHTML = (properties ? '' + properties.key
+ + '
' + properties.value : 'Hover over a map region');
+ };
+
+ //----------------------------------------------------------------------------------------
+
var _tiles=function(map) {
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
@@ -74,11 +93,19 @@ dc_leaflet.leafletBase = function(_chart) {
_chart.tiles()(_map);
+ _chart.info().addTo(_map);
+
_chart._postRender();
return _chart._doRedraw();
};
+ _chart.info = function(_) {
+ if (!arguments.length) return _info;
+ _info = _;
+ return _chart;
+ }
+
_chart._postRender = function() {
//abstract
};
@@ -533,6 +560,40 @@ dc_leaflet.choroplethChart = function(parent, chartGroup) {
layer.key=v.d.key;
if (_chart.renderPopup())
layer.bindPopup(_chart.popup()(v.d,feature));
+
+ //Define mouse events
+ layer.on({
+ "mouseover": function (e) {
+ //gis.stackexchange.com/questions/31951/how-to-show-a-popup-on-mouse-over-not-on-click
+ //this.openPopup(); //built-in leaflet popup window
+
+ //Custom Control with Leaflet
+ //http://leafletjs.com/examples/choropleth.html
+ //highlight region borders
+ var layer = e.target;
+
+ layer.setStyle({
+ weight: 3,
+ color: "#422703",
+ //dashArray: '',
+ //fillOpacity: 0.7 //changes colour upon hover
+ });
+
+ if (!L.Browser.ie && !L.Browser.opera) {
+ layer.bringToFront();
+ }
+
+ //apply border highlight
+ _chart.info().update(v.d);
+ },
+
+ //reset borders on mouseout
+ "mouseout": function (e) {
+ _geojsonLayer.resetStyle(e.target);
+ }
+ });
+
+
if (_chart.brushOn())
layer.on("click",selectFilter);
}
diff --git a/web/index.html b/web/index.html
index 20f55de3..9ef23801 100644
--- a/web/index.html
+++ b/web/index.html
@@ -29,6 +29,20 @@
.pie {
margin-left:30px;
}
+ /*For map display window*/
+ .info {
+ padding: 6px 8px;
+ font: 14px/16px Arial, Helvetica, sans-serif;
+ background: white;
+ background: rgba(255,255,255,0.8);
+ box-shadow: 0 0 15px rgba(0,0,0,0.2);
+ border-radius: 5px;
+ }
+ .info h4 {
+ margin: 0 0 5px;
+ color: #777;
+ }
+ /* --*/
diff --git a/web/js/dc.leaflet.js b/web/js/dc.leaflet.js
index c548c2ee..948d76ca 100644
--- a/web/js/dc.leaflet.js
+++ b/web/js/dc.leaflet.js
@@ -49,6 +49,25 @@ dc_leaflet.leafletBase = function(_chart) {
return L.map(child_div.node(),_mapOptions);
};
+ //---------------------------------------------------------------------------------------
+ // Adapted from http://leafletjs.com/examples/choropleth.html
+ //---------------------------------------------------------------------------------------
+ var _info = L.control();
+
+ _info.onAdd = function (map) {
+ this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
+ this.update();
+ return this._div;
+ };
+
+ // method that we will use to update the control based on feature properties passed
+ _info.update = function (properties) {
+ this._div.innerHTML = (properties ? '' + properties.key
+ + '
' + properties.value : 'Hover over a map region');
+ };
+
+ //----------------------------------------------------------------------------------------
+
var _tiles=function(map) {
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
@@ -74,11 +93,19 @@ dc_leaflet.leafletBase = function(_chart) {
_chart.tiles()(_map);
+ _chart.info().addTo(_map);
+
_chart._postRender();
return _chart._doRedraw();
};
+ _chart.info = function(_) {
+ if (!arguments.length) return _info;
+ _info = _;
+ return _chart;
+ }
+
_chart._postRender = function() {
//abstract
};
@@ -533,6 +560,40 @@ dc_leaflet.choroplethChart = function(parent, chartGroup) {
layer.key=v.d.key;
if (_chart.renderPopup())
layer.bindPopup(_chart.popup()(v.d,feature));
+
+ //Define mouse events
+ layer.on({
+ "mouseover": function (e) {
+ //gis.stackexchange.com/questions/31951/how-to-show-a-popup-on-mouse-over-not-on-click
+ //this.openPopup(); //built-in leaflet popup window
+
+ //Custom Control with Leaflet
+ //http://leafletjs.com/examples/choropleth.html
+ //highlight region borders
+ var layer = e.target;
+
+ layer.setStyle({
+ weight: 3,
+ color: "#422703",
+ //dashArray: '',
+ //fillOpacity: 0.7 //changes colour upon hover
+ });
+
+ if (!L.Browser.ie && !L.Browser.opera) {
+ layer.bringToFront();
+ }
+
+ //apply border highlight
+ _chart.info().update(v.d);
+ },
+
+ //reset borders on mouseout
+ "mouseout": function (e) {
+ _geojsonLayer.resetStyle(e.target);
+ }
+ });
+
+
if (_chart.brushOn())
layer.on("click",selectFilter);
}