           dashArray: '3'
           fillOpacity: 0.65
 
-      onEachFeature = (feature, layer) ->
-        layer.on(
-          mouseover: regionMouseOver,
-          mouseout: regionMouseOut,
+      onEachRegionFeature = (feature, layer) ->
+        layer.on
+          mouseover: mouseOver
+          mouseout: regionMouseOut
           click: regionClick
-        )
+
+      onEachWardFeature = (feature, layer) ->
+        layer.on
+          mouseover: mouseOver
+          mouseout: wardMouseOut
 
       regLayer = L.geoJson(regions,
         style: style
-        onEachFeature: onEachFeature
+        onEachFeature: onEachRegionFeature
+      )
+
+      wardLayer = L.geoJson(wards,
+        style: style
+        onEachFeature: onEachWardFeature
       )
 
       categoryMap =


    $scope.hoverText = ""
    $scope.choroChoice = "percFun"

    getRegItem = (feature) ->
      regname = feature.properties.REGNAME.toLowerCase()
      regitem = $scope.regionMap[regname]

    initMap = (regions, waterpoints) ->

      osmLayer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        attribution: '(c) OpenStreetMap'

          color: '#666'
          fillOpacity: 0.8

      wardMouseOut = (e) ->
        wardLayer.resetStyle(e.target)
        $scope.$apply (scope) ->
          scope.hoverText = ""

      regionMouseOut = (e) ->
        regLayer.resetStyle(e.target)
