Untitled

<!DOCTYPE html>
<html>
<head>
  <title>Population Density</title>
  <meta charset="utf-8" />
  <script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
  <link rel="stylesheet" href="leaflet.css" />
  <link rel="stylesheet" href="POPCEN/Popcen.css" />
  <script src="leaflet.js"></script>
  <script src="leaflet-google.js"></script>
  <script src="leaflet.groupedlayercontrol.js"></script>
  <script src="COMMON/nepalar.js"></script>
  <script src="ADMINISTRATIVE/vdcar.js"></script>

</head>
<body>
   <div id="map" style="position: absolute; top: 5; bottom: 5; left: 5;
            right: 5; z-index: 9999; width: 99%; height: 98%">
      </div>
  <script>
    var map = L.map('map', {zoomControl: false, maxZoom: 12}).setView([28.1,84.1], 7);
      new L.Control.Zoom({ position: 'bottomright' }).addTo(map);
      var noneAttrib='Nepal Map &copy <a href="http://www.dos.gov.np/" target="_blank">Survey Department</a>, Census Data &copy <a  href="http://www.cbs.gov.np/" target="_blank">CBS</a>, Nepal';
      var none = new L.tileLayer('', {attribution: noneAttrib});
      var googleAttrib='Reference Map Data &copy; <a href="http://google.org">GoogleRoadMap</a>';
      none.addTo(map);

    var infonep = L.control({position: 'bottomleft'});
    infonep.onAdd = function (map) {
        this._div = L.DomUtil.create('div', 'infonep'); // create a div with a class "infonep"
       this.update();
        return this._div;
    };

    infonep.update = function (props) {
        this._div.innerHTML = '<h4>Nepal Population Information:</h4>' + '<hr>' +  (props ?
          '<b>' + 'NEPAL' + '</b>'
             +  '<br/>' + 'Population: ' + props.POP68 + '</b>'
             +  '<br/>' + 'Male Population: ' + props.MALE68 + '</b>'
           +  '<br/>' + 'Female Population: ' + props.FEMALE68 + '</b>'
             +  '<br/>' + 'Area (Sq. Km.): ' + props.AREA_SQKM + '</b>'
           +  '<br/>' + '<b>' + 'Population Density: ' + props.POPDEN68 + ' people / Sq.Km.<sup>2</sup>' + '</b>'
            : 'Move mouse over the country');
    };
    infonep.addTo(map);
   function getColor(d) {
        return d > 1000  ? '#662506' :
             d > 800  ? '#993404' :
              d > 600  ? '#CC4C02' :
             d > 400  ? '#EC7014' :
             d > 200   ? '#FE9929' :
            d > 100   ? '#FEC44F' :
            d > 50   ? '#FEE391' :
                          '#FFFFE5';
    }

    function stylenep(feature) {
        return {
            fillColor: getColor(feature.properties.POPDEN68),
           weight: 1,
           opacity: 1,
         color: 'white',
            dashArray: '2',
            fillOpacity: 0.7
        };
 }

        var popNep = new L.geoJson(nepalar, {
            style: stylenep,
           onEachFeature: function (feature, layer) {
           var defaultStyle = layer.style,
               that = this;//NEW
          layer.on('mouseover', function (e) {
              this.setStyle({
              weight: 3,
             color: '#666',
                dashArray: '',
                fillOpacity: 0.7
              });
                infonep.update(layer.feature.properties);
          });
            layer.on('mouseout', function (e) {
              popNep.resetStyle(e.target); //NEW
                infonep.update();
          });
            }
          });
            map.addLayer(popNep);

    function stylevdc(feature) {
        return {
          fillColor: 'transparent',
           weight: 0.1,
           opacity: 1,
         color: '#000000',
         fillOpacity: 0.7
      };
   }

       var popVdc = L.geoJson(vdcar, {
            style: stylevdc,
              onEachFeature: function (feature, layer) {
                layer.bindPopup("Zone:  " + feature.properties.ZNAME
               + '<br>' + "District:  " + feature.properties.DNAME
               + '<br>' + "VDC:  " + feature.properties.GAZETTE);
             }
           });

     var googleLayer = new L.Google('ROADMAP', {attribution: googleAttrib + ' ' + noneAttrib});
     var none   = new L.tileLayer('', {attribution: noneAttrib});
     var baseMaps = {
      "Google Base Map": googleLayer,
      "Turn Off Base Map": none,
     };

    var groupedOverlays = {
        "AdminDivisions": {
         "Nepal Population": popNep,
         "VDCs(Click to display name)": popVdc
      }
     };

     L.control.groupedLayers(baseMaps, groupedOverlays, {collapsed: false}).addTo(map);

    map.on ('overlayadd', function (eventLayer) {
     if (eventLayer.name === 'Nepal Population') {
         infonep.addTo(map);
     } else if (eventLayer.name === 'VDCs(Click to display name)') {
             map.addLayer(popVdc);
      } else {
     }
    });
    map.on ('overlayremove', function (eventLayer) {
      if (eventLayer.name === 'Nepal Population') {
         map.removeControl(infonep);
      } else if (eventLayer.name === 'VDCs(Click to display name)') {
             map.removeLayer(popVdc);
    } else {
    }
    });
 </script>
</body>
</html>