ipyleaflet icon indicating copy to clipboard operation
ipyleaflet copied to clipboard

GeoJSON mouseout from hover

Open tsutterley opened this issue 2 years ago • 0 comments

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)

tsutterley avatar Feb 24 '22 01:02 tsutterley