#13, #14 on hover interaction

index.html

@@ -17,6 +17,20 @@
             bottom: 0;
             width: 100%;
         }
+
+        .info {
+            padding: 6px 8px;
+            font: 14px/16px Arial, Helvetica, sans-serif;
+            background: white;
+            background: rgba(255, 255, 255, 0.8);
+            box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
+            border-radius: 5px;
+        }
+
+        .info h4 {
+            margin: 0 0 5px;
+            color: #777;
+        }
     </style>
 </head>
 

resources/script/app.js

@@ -4,7 +4,78 @@ L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
   attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
   subdomains: ['a', 'b', 'c']
 }).addTo(map)
-$.getJSON("resources/data/bbmp-wards.json", function(data) {
-    L.geoJson(data).addTo(map)
-
+var data
+$.getJSON('resources/data/bbmp-wards.json', function (data) {
+  geojson = L.geoJson(data, {
+    style: style,
+    onEachFeature: onEachFeature
+  }).addTo(map)
+
+function style (feature) {
+    return {
+      weight: 2,
+      opacity: 1,
+      color: 'blue',
+      dashArray: '3',
+      fillOpacity: 0.1
+    }
+}
+
+  L.geoJson(data, {style: style}).addTo(map)
+
+function highlightFeature (e) {
+    var layer = e.target
+
+  layer.setStyle({
+      weight: 5,
+      color: '#666',
+      dashArray: '',
+      fillOpacity: 0.7
+    })
+
+  if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
+      layer.bringToFront()
+  }
+    info.update(layer.feature.properties)
+}
+
+  function resetHighlight (e) {
+    geojson.resetStyle(e.target)
+  info.update()
+}
+
+  function zoomToFeature (e) {
+    map.fitBounds(e.target.getBounds())
+}
+
+  function onEachFeature (feature, layer) {
+    layer.on({
+      mouseover: highlightFeature,
+      mouseout: resetHighlight,
+      click: zoomToFeature
+    })
+}
+
+  geojson = L.geoJson(data, {
+    style: style,
+    onEachFeature: onEachFeature
+  }).addTo(map)
+
+var info = L.control()
+
+info.onAdd = function (map) {
+    this._div = L.DomUtil.create('div', 'info') // create a div with a class "info"
+    this.update()
+    return this._div
+};
+
+  // method that we will use to update the control based on feature properties passed
+  info.update = function (props) {
+    this._div.innerHTML = '<h4>Bangalore BBMP wards</h4>' + (props
+        ? '<b>' + props.Name + '</b><br />'
+      : 'Hover over a ward')
+};
+
+  info.addTo(map)
+
 })