adding feature in on hover with ex

Author: VasavanThiru

examples/Choropleth.ipynb

@@ -45,7 +45,7 @@
    "cell_type": "code",
    "execution_count": null,
    "metadata": {
-    "scrolled": true
+    "scrolled": false
    },
    "outputs": [],
    "source": [
@@ -109,6 +109,48 @@
    "source": [
     "layer.border_color = 'white'"
    ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from ipywidgets import Text, HTML\n",
+    "from ipyleaflet import WidgetControl, GeoJSON \n",
+    "\n",
+    "\n",
+    "html = HTML('''\n",
+    "    <h4> Name </h4>\n",
+    "    Hover over a state\n",
+    "''')\n",
+    "html.layout.margin = '0px 10px 10px 10px'\n",
+    "control = WidgetControl(widget=html, position='topright')\n",
+    "m.add_control(control)\n",
+    "\n",
+    "def update_html(feature, id, **kwargs):\n",
+    "    html.value = '''\n",
+    "        State name:  \n",
+    "        <b>{}\\n</b>\n",
+    "        {} \n",
+    "    '''.format(id, feature['properties']['name'])\n",
+    "\n",
+    "layer.on_hover(update_html)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
   }
  ],
  "metadata": {
@@ -127,7 +169,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.7.0"
+   "version": "3.7.3"
   }
  },
  "nbformat": 4,

examples/GeoJson_EU_on_hover.ipynb

@@ -0,0 +1,79 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from ipyleaflet import Map, GeoJSON\n",
+    "import json\n",
+    "import os\n",
+    "import requests\n",
+    "\n",
+    "if not os.path.exists('europe_110.geo.json'):\n",
+    "  url = 'https://github.com/jupyter-widgets/ipyleaflet/raw/master/examples/europe_110.geo.json'\n",
+    "  r = requests.get(url)\n",
+    "  with open('europe_110.geo.json', 'w') as f:\n",
+    "    f.write(r.content.decode(\"utf-8\"))\n",
+    "\n",
+    "with open('europe_110.geo.json', 'r') as f:\n",
+    "  data = json.load(f)\n",
+    "\n",
+    "m = Map(center=(50.6252978589571, 0.34580993652344), zoom=3)\n",
+    "geo_json = GeoJSON(data=data, style = {'color': 'green', 'opacity':1, 'weight':1.9, 'dashArray':'9', 'fillOpacity':0.1})\n",
+    "m.add_layer(geo_json)\n",
+    "\n",
+    "m"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from ipywidgets import Text, HTML\n",
+    "from ipyleaflet import WidgetControl, GeoJSON \n",
+    "\n",
+    "html1 = HTML('''\n",
+    "    <h4>EU population density</h4>\n",
+    "    Hover over a state\n",
+    "''')\n",
+    "html1.layout.margin = '0px 20px 20px 20px'\n",
+    "control1 = WidgetControl(widget=html1, position='bottomright')\n",
+    "m.add_control(control1)\n",
+    "\n",
+    "def update_html(feature, **kwargs):\n",
+    "    html1.value = '''\n",
+    "        <h4>EU population density</h4>\n",
+    "        <h4><b>{}</b></h4>\n",
+    "        {} people / mi^2\n",
+    "    '''.format(feature['properties']['name'], feature['properties']['pop_est'])\n",
+    "\n",
+    "geo_json.on_hover(update_html)"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.7.3"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}

js/src/layers/GeoJSON.js

@@ -32,6 +32,7 @@ var LeafletGeoJSONView = featuregroup.LeafletFeatureGroupView.extend({
                     }
                     that.send({
                         event: e.type,
+                        feature: feature,
                         properties: feature.properties,
                         id: feature.id
                     });