ipyleaflet
ipyleaflet copied to clipboard
GeoJSON mouseout from hover
As far as I can tell, mouseout
events aren't tracked for GeoJSON objects. I have a point cloud explorer where I added basically a "tooltip" displaying a few variables within a hovered feature. My current workaround is to use on_msg
to track if there were mouseout
events to clear the HTML widget and remove it from the map. I am wondering if we could put in an actual fix so that on_hover
also gets mouseout
events.
# leaflet map point style
point_style = {key:kwargs[key] for key in ['radius','fillOpacity','weight']}
# convert to GeoJSON object
self.geojson = ipyleaflet.GeoJSON(data=geodataframe.__geo_interface__,
point_style=point_style, style_callback=self.style_callback)
# add hover tooltips
self.tooltip = ipywidgets.HTML()
self.tooltip.layout.margin = "0px 20px 20px 20px"
self.tooltip.layout.visibility = 'hidden'
# create widget for hover tooltips
self.hover_control = ipyleaflet.WidgetControl(widget=self.tooltip,
position='bottomright')
self.geojson.on_hover(self.handle_hover)
self.geojson.on_msg(self.handle_mouseout)
# functional call for setting colors of each point
def style_callback(self, feature):
return {
"fillColor": feature["properties"]["color"],
"color": feature["properties"]["color"],
}
# functional calls for hover events
def handle_hover(self, feature, **kwargs):
self.tooltip.value = '<br>'.join(['<b>{0}:</b> {1}'.format(field,
feature["properties"][field]) for field in self.fields])
self.tooltip.layout.width = "220px"
self.tooltip.layout.height = "260px"
self.tooltip.layout.visibility = 'visible'
self.map.add_control(self.hover_control)
def handle_mouseout(self, _, content, buffers):
event_type = content.get('type', '')
if event_type == 'mouseout':
self.tooltip.value = ''
self.tooltip.layout.width = "0px"
self.tooltip.layout.height = "0px"
self.tooltip.layout.visibility = 'hidden'
self.map.remove_control(self.hover_control)