Commit 16e74f28 authored by S Anand's avatar S Anand

ENH: mapviewer tooltip & popup support. Fixes #90

parent aea74d78
Pipeline #64976 passed with stage
in 2 minutes and 6 seconds
......@@ -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
......
......@@ -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)
})
}
......
......@@ -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) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment