ENH: mapviewer tooltip & popup support. Fixes #90

README.md

@@ -1297,6 +1297,17 @@ Drilldown feature example:
       - `url` is url (String) to fetch data
       - `mapKey` is attribute name in geojson/topojson to match
       - `dataKey` is column name in input dataset that matches with geojson/topojson `mapKey`
+    - `popup`: string / function that returns formatted value
+    - `popupOptions`: An object with properties and values from [leaflet popup options](https://leafletjs.com/reference-1.3.4.html#popup-l-popup)
+    - `tooltip`: string / function that returns formatted value.
+      - function(properties) must return a string. feature properties are passed as argument.
+    - `tooltipOptions`: An object with properties and values from [leaflet tooltip options](https://leafletjs.com/reference-1.3.0.html#tooltip-option)
+      - `direction` property can be a string or function. function is passed the following arguments.
+        - `centerPoint` is center coordinates of map view
+        - `tooltipPoint` is center coordinates of tooltip
+        - `properties` are feature properties
+
+    NOTE: `tooltip` and `tooltipOptions` are previously (till v0.9.l) are inside `attrs`. This spec breaking change is mage to maintain consistency with `popup` and `popupOptions`
     - `attrs` Data driven styles. same as `options`. (`attrs` take priority over `options`)
       - For `color`, `weight`, `opacity`, `fillColor`, `fillOpacity` properties, the options are:.
         - `metric` string / function
@@ -1309,7 +1320,7 @@ Drilldown feature example:
       - `tooltip`: string / function that returns formatted value.
         - function(properties) must return a string. feature properties are passed as argument.
         - TODO: the properties currently include only geoJSON properties. link properties must be added
-      - `tooltipOptions`: An object with properties and values from [leaflet tooltip options](https://leafletjs.com/reference-1.3.0.html#tooltip-option) 
+      - `tooltipOptions`: An object with properties and values from [leaflet tooltip options](https://leafletjs.com/reference-1.3.0.html#tooltip-option)
   - `topojson` - same as `geojson`
   - `marker` layer MUST have a data as an array of objects or else MUST have a url (string).
     - `url`: String

src/mapviewer.js

@@ -61,7 +61,7 @@ export var MapViewer = class MapViewer {
       for (let layerName in self.options.layers) {
         self.buildLayer(layerName, self.options.layers[layerName])
       }
-      self.setupTooltip()
+      self.initTooltipPopup()
       self.drilldown()
       self.current_level = 0
       self.drilldown_stack = []
@@ -389,25 +389,46 @@ MapViewer.prototype.drillup = function () {
   self.gLayers[current_level_layer].addTo(self.map)
   self.drilldown_recursive(current_level_layer)
 }
-MapViewer.prototype.setupTooltip = function () {
+MapViewer.prototype.initTooltipPopup = function () {
   var self = this
   self.on('layersloaded', function () {
     for (let layerName in self.options.layers) {
-      if (self.options.layers[layerName].attrs && self.options.layers[layerName].attrs.tooltip) {
+      if (self.options.layers[layerName].tooltip) {
         self.renderTooltip(layerName, self.options.layers[layerName])
       }
+      if (self.options.layers[layerName].popup) {
+        self.renderPopup(layerName, self.options.layers[layerName])
+      }
     }
     self.fire('mapviewerloaded')
   })
 }
+MapViewer.prototype.renderPopup = function(layerName, layerConfig) {
+  var self = this
+  var options = layerConfig.popupOptions ? layerConfig.popupOptions : {}
+  self.gLayers[layerName].eachLayer(function (sublayer) {
+    var popupContent = typeof layerConfig.popup == 'function' ?
+      layerConfig.popup(sublayer.feature.properties) : layerConfig.popup
+    sublayer.bindPopup(popupContent, options)
+  })
+}
 MapViewer.prototype.renderTooltip = function (layerName, layerConfig) {
-  this.gLayers[layerName].eachLayer(function (sublayer) {
-    var tooltipContent = layerConfig.attrs.tooltip
-    if (typeof (layerConfig.attrs.tooltip) === 'function') {
-      tooltipContent = layerConfig.attrs.tooltip(sublayer.feature.properties)
+  var self = this
+  var options = layerConfig.tooltipOptions ? layerConfig.tooltipOptions : {}
+  var centerPoint  = self.map.latLngToContainerPoint(self.gLayers[layerName].getBounds().getCenter())
+  self.gLayers[layerName].eachLayer(function (sublayer) {
+    var tooltipContent = typeof layerConfig.tooltip === 'function' ?
+      layerConfig.tooltip(sublayer.feature.properties) : layerConfig.tooltip
+
+    var optionsClone = Object.assign({}, options)
+    if (typeof(options['direction']) == 'function')  {
+      var center = layerConfig.type.toLowerCase() == 'marker' ? [sublayer.getLatLng()['lat'], sublayer.getLatLng()['lng']] : sublayer.getBounds().getCenter()
+      var tooltipPoint = self.map.latLngToContainerPoint(center)
+      optionsClone['direction'] = options['direction']({
+        centerPoint: centerPoint, tooltipPoint: tooltipPoint, properties: sublayer.feature.properties
+      })
     }
-    var options = 'tooltipOptions' in layerConfig.attrs ? layerConfig.attrs.tooltipOptions: {}
-    sublayer.bindTooltip(tooltipContent, options)
+    sublayer.bindTooltip(tooltipContent, optionsClone)
   })
 }
 

test/test-mapviewer-tooltip.html

@@ -19,11 +19,55 @@
   <script>
     tape.onFinish(function () { window.renderComplete = true })
   </script>
+  <div id="popup-map" style="height:300px"></div>
+  <script>
+
+    tape("g1.mapviewer test if popup is added to the circle marker", function (test) {
+      var popup_map = g1.mapviewer({
+        id: 'popup-map',
+        layers: {
+          worldMap: { type: 'tile', url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' },
+          cityMarkers: {
+            type: 'marker',
+            url: 'cities.json',
+            latitude: 'lat',
+            longitude: 'long',
+            popup: function (d) {
+              return d.name
+            },
+            popupOptions: {
+              closeButton: false
+            }
+          },
+          indiaGeojson: {
+            type: 'geojson',
+            url: 'india-states.geojson',
+            link: {
+              url: 'state_score.json',
+              dataKey: 'name',
+              mapKey: 'ST_NM'
+            },
+            attrs: {
+              fillColor: {
+                metric: 'score',
+                scheme: 'Viridis'
+              }
+            }
+          }
+        }
+      })
+
+      test.end()
+    })
+
+  </script>
+
+
   <div id="tooltip-map" style="height:300px"></div>
   <script>
 
     tape("g1.mapviewer test if tooltip is added to the circle marker", function (test) {
-        var tooltip_map = g1.mapviewer({
+      var tooltip_map = g1.mapviewer({
         id: 'tooltip-map',
         layers: {
           // worldMap: { type: 'tile', url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' },
@@ -37,14 +81,15 @@
                 className: 'anything'
               })
             },
-            attrs: {
-              tooltip:function (d) {
-                return d.name
+
+            tooltip: function (d) {
+              return d.name
+            },
+            tooltipOptions: {
+              direction: function (args) {
+                return args.centerPoint[1] > args.tooltipPoint.x[1] ? 'top' : 'bottom'
               },
-              tooltipOptions:{
-                direction: 'center',
-                permanent: true
-              }
+              permanent: true
             }
           },
 
@@ -79,67 +124,65 @@
   <div id="tooltipFunction-map" style="height:300px"></div>
   <script>
 
-    tape("g1.mapviewer test if tooltip is added to the marker", function (test) {
-
-    var tooltipFunction_map = g1.mapviewer({
-      id: 'tooltipFunction-map',
-      layers: {
-        worldMap: { type: 'tile', url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' },
-        indiaGeojson: {
-          type: 'geojson',
-          url: 'india-states.geojson',
-          link: {
-            url: 'state_score.json',
-            dataKey: 'name',
-            mapKey: 'ST_NM'
-          },
-          attrs: {
-            fillColor: {
-              metric: 'score',
-              scheme: 'Viridis'
+    tape("g1.mapviewer test if popup is added to the marker", function (test) {
+
+      var tooltipFunction_map = g1.mapviewer({
+        id: 'tooltipFunction-map',
+        layers: {
+          worldMap: { type: 'tile', url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' },
+          indiaGeojson: {
+            type: 'geojson',
+            url: 'india-states.geojson',
+            link: {
+              url: 'state_score.json',
+              dataKey: 'name',
+              mapKey: 'ST_NM'
             },
             tooltip: function (d) {
               return d.ST_NM + ' : ' + d.score
+            },
+            attrs: {
+              fillColor: {
+                metric: 'score',
+                scheme: 'Viridis'
+              }
             }
-          }
-        },
-        cityMarkers: {
-          type: 'marker',
-          url: 'cities.json',
-          latitude: 'lat',
-          longitude: 'long',
-          options: {
-            title: 'column-name',
           },
-          attrs: {
+          cityMarkers: {
+            type: 'marker',
+            url: 'cities.json',
+            latitude: 'lat',
+            longitude: 'long',
+            options: {
+              title: 'column-name',
+            },
             tooltip: 'just some tooltip text test'
-          }
-        },
-        cityCircleMarkers: {
-          type: 'circleMarker',
-          url: 'cities.json',
-          latitude: 'lat',
-          longitude: 'long',
-          options: {
-            title: 'column-name'
-          },
-          link: {
-            url: 'state_score.json',
-            dataKey: 'name',
-            mapKey: 'name'
           },
-          attrs: {
-            fillColor: {
-              metric: function (row) { return row['pollution'] + row['crimes'] },
-              scheme: 'Viridis'
+          cityCircleMarkers: {
+            type: 'circleMarker',
+            url: 'cities.json',
+            latitude: 'lat',
+            longitude: 'long',
+            options: {
+              title: 'column-name'
+            },
+            link: {
+              url: 'state_score.json',
+              dataKey: 'name',
+              mapKey: 'name'
             },
             tooltip: function (d) {
               return 'just some tooltip text test' + d.name
+            },
+            attrs: {
+              fillColor: {
+                metric: function (row) { return row['pollution'] + row['crimes'] },
+                scheme: 'Viridis'
+              }
             }
           }
         }
-      }
-    })
+      })
 
       tooltipFunction_map.on('mapviewerloaded', function () {
         tooltipFunction_map.gLayers['cityMarkers'].eachLayer(function (sublayer) {