
<!DOCTYPE html>
<html>
<head>
	<title>Leaflet Layers Control Example</title>
	<meta charset="utf-8" />

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link rel="stylesheet" href="css/leaflet.css" />
    <link rel="stylesheet" href="css/bootstrap.css" />
    <link rel="stylesheet" href="css/MarkerCluster.css" />
    <link rel="stylesheet" href="css/MarkerCluster.Default.css" />
	<!--[if lte IE 8]><link rel="stylesheet" href="../dist/leaflet.ie.css" /><![endif]-->
	 <style>
      html, body,  
      #mapcontent {
        width : 99.6%;
        height : 99.5%;
      }
      .evac_person_20131111_swatch1 {padding-left: .5em;background:#fed976;height: 16px;margin-right: 5px;display: table-cell;vertical-align:middle;text-align: center;width: 16px;display: inline-block;}
      .evac_person_20131111_swatch2 {padding-left: .5em;background:#feb24c;height: 16px;margin-right: 5px;display: table-cell;vertical-align:middle;text-align: center;width: 16px;display: inline-block;}
      .evac_person_20131111_swatch3 {padding-left: .5em;background:#fd8d3c;height: 16px;margin-right: 5px;display: table-cell;vertical-align:middle;text-align: center;width: 16px;display: inline-block;}
      .evac_person_20131111_swatch4 {padding-left: .5em;background:#f03b20;height: 16px;margin-right: 5px;display: table-cell;vertical-align:middle;text-align: center;width: 16px;display: inline-block;}
      .evac_person_20131111_swatch5 {padding-left: .5em;background:#bd0026;height: 16px;margin-right: 5px;display: table-cell;vertical-align:middle;text-align: center;width: 16px;display: inline-block;}
      .legend-title{text-align:center;margin-bottom: 5px;font-family:"Cisalpin St LTD Regular";font-weight:bold;font-size:110%}


      .swatch1_pop {padding-left: .5em;background:#f1eccd;height: 16px;margin-right: 5px;display: table-cell;vertical-align:middle;text-align: center;width: 16px;display: inline-block;}
      .swatch2_pop {padding-left: .5em;background:#f6efa7;height: 16px;margin-right: 5px;display: table-cell;vertical-align:middle;text-align: center;width: 16px;display: inline-block;}
      .swatch3_pop {padding-left: .5em;background:#e2d791;height: 16px;margin-right: 5px;display: table-cell;vertical-align:middle;text-align: center;width: 16px;display: inline-block;}
      .swatch4_pop {padding-left: .5em;background:#e2b689;height: 16px;margin-right: 5px;display: table-cell;vertical-align:middle;text-align: center;width: 16px;display: inline-block;}
      .swatch5_pop {padding-left: .5em;background:#d29c52;height: 16px;margin-right: 5px;display: table-cell;vertical-align:middle;text-align: center;width: 16px;display: inline-block;}
      .swatch6_pop {padding-left: .5em;background:#bb751a;height: 16px;margin-right: 5px;display: table-cell;vertical-align:middle;text-align: center;width: 16px;display: inline-block;}
      .swatch7_pop {padding-left: .5em;background:#875d18;height: 16px;margin-right: 5px;display: table-cell;vertical-align:middle;text-align: center;width: 16px;display: inline-block;}
      .swatch8_pop {padding-left: .5em;background:#d5d5d5;height: 16px;margin-right: 5px;display: table-cell;vertical-align:middle;text-align: center;width: 16px;display: inline-block;}
      .legend-title_complete{text-align:center;margin-bottom: 5px;font-family:"Cisalpin St LTD Regular";font-weight:bold;font-size:110%}


     .swatch1_NGA {padding-left: .5em;background:#ff0000;height: 16px;margin-right: 5px;display: table-cell;vertical-align:middle;text-align: center;width: 16px;display: inline-block;}
     .swatch2_NGA {padding-left: .5em;background:#fd7216;height: 16px;margin-right: 5px;display: table-cell;vertical-align:middle;text-align: center;width: 16px;display: inline-block;}
     .swatch3_NGA {padding-left: .5em;background:#e3d70c;height: 16px;margin-right: 5px;display: table-cell;vertical-align:middle;text-align: center;width: 16px;display: inline-block;}
     .swatch4_NGA {padding-left: .5em;background:#d3f3b3;height: 16px;margin-right: 5px;display: table-cell;vertical-align:middle;text-align: center;width: 16px;display: inline-block;}
     .legend-title_NGA{text-align:center;margin-bottom: 5px;font-family:"Cisalpin St LTD Regular";font-weight:bold;font-size:110%}

	  	.leaflet-control-layers-base{
	      margin-bottom: .2em;
	      display: block;
	      padding-left: .5em;
	    }

	    .leaflet-control-layers-group-name {
	      font-weight: bold;
	      margin-bottom: .2em;
	      display: block;
        margin-left: 5px;
	    }

	    .leaflet-control-layers-group {
	      margin-bottom: .5em;
	    }

	    .leaflet-control-layers-group label {
	      padding-left: .5em;
	    }

	    hr {
		border-color: rgba(255, 255, 255, 0.38);
		}

		#municip {
			background: #FFF;
			box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
			position:absolute;top:40%;height: 400px;width:400px;left:15px;bottom: 10px;-webkit-border-radius: 5px;
            border-radius: 5px;

		}
        #municipopup {
            background: #FFF;
            box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
            position:absolute;top:10%;height: 400px;width:400px;left:15px;bottom: 10px;-webkit-border-radius: 5px;
            border-radius: 5px;

        }


        .overlay {
        position: absolute;
        padding: 6px 8px;
        font: 14px/16px Arial, Helvetica, sans-serif;
        color: #223;
        background-color: rgba(255, 255, 255, 0.8);
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
        border-radius: 5px;
        }

        .title {
          text-align: left;
          top: 10px;
          right: 20%;
          left: 20%;
          }

          .footer {
          bottom: 10px;
          left: 13px;
        }

            .button {
    display: block;
    z-index:20;
    top:100px;
    position: absolute;
    float: left;
    width: 22px;
    height: 22px;
    left:160px;
    background: url('http://labs.easyblog.it/maps/leaflet-search/images/search-icon.png') no-repeat 0 0;
    border-radius: 4px;
    }

    .search{
    border-radius: 7px;
    left:30px;
    z-index:20;
    top:98px;
    width: 150px;
    position: absolute;
    display: block;
    float: left;
    background: rgba(0, 0, 0, 0.25);
    height: 30px;}

/*		.leaflet-popup-content-wrapper {
			background: #FFF;
			box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
			position:absolute;top:60%;height: 400px;width:200px;left:10px;bottom: 10px;
		}*/



    </style>
</head>
<body>
  <div id="mapcontent" class="leaflet-container leaflet-fade-anim"></div>
  <div class="overlay footer">
    
</div>
 <!-- <div class="overlay title"> <h2>Haiyan Cross Data Map</h2> </div> -->


	<script src="js/jquery10.js"></script>
	<script src="js/leaflet.js"></script>
	<script src="js/lvector.js"></script>
	<script src="js/grouplayer.js"></script>
  <script src="js/leaflet.markercluster-src.js"></script>

	<script src="js/esri-leaflet.js"></script>
	<script src="js/geoservices.js"></script>
  <script src="js/clusterEsri.js"></script>
  <script src="js/OverPassLayer.js"></script>

	<script>
	var POIfood;
        

        lvector.Layer.prototype._checkLayerVisibility = function() {
            if (!this.options.map) {
                return; // The layer is not present on the map, so do nothing.
            }
            //
            // Store current visibility so we can see if it changed
            //
            var visibilityBefore = this.options.visibleAtScale;

            //
            // Check current map scale and see if it's in this layer's range
            //
            var z = this.options.map.getZoom();
            var sr = this.options.scaleRange;
            this.options.visibleAtScale = (z >= sr[0] && z <= sr[1]);

            //
            // Check to see if the visibility has changed
            //
            if (visibilityBefore !== this.options.visibleAtScale) {
                //
                // It did, hide or show vectors
                //
                this[this.options.visibleAtScale ? "_showVectors" : "_hideVectors"]();
            }

            //
            // Check to see if we need to set or clear any intervals for auto-updating layers
            //
            if (visibilityBefore && !this.options.visibleAtScale && this._autoUpdateInterval) {
                clearInterval(this._autoUpdateInterval);
            } else if (!visibilityBefore && this.options.autoUpdate && this.options.autoUpdateInterval) {
                var me = this;
                this._autoUpdateInterval = setInterval(function() {
                    me._getFeatures();
                }, this.options.autoUpdateInterval);
            }

        };
        lvector.AGS.prototype._getFeatures = function() {
            if (!this.options.map) {
                return; // The layer is not present on the map, so do nothing.
            }
            // Build URL
            var url = this.options.url + "query" + // Query this layer
                    "?returnGeometry=true" + // Of course we want geometry
                    "&outSR=4326" + // receive geometry in WGS 84 Lat/Lng.
                    "&f=json" + // Wish it were GeoJSON, but we'll take it
                    "&outFields=" + this.options.fields + // Please return the following fields
                    "&where=" + this.options.where + // By default return all feature (1=1) but could pass SQL statement (value<90)
                    "&callback=" + this._globalPointer + "._processFeatures"; // Need this for JSONP
            if (!this.options.showAll) {
                url += "&inSR=4326" + // request geometry in WGS 84 Lat/Lng.
                        "&spatialRel=esriSpatialRelIntersects" + // Find stuff that intersects this envelope
                        "&geometryType=esriGeometryEnvelope" + // Our "geometry" url param will be an envelope
                        "&geometry=" + this.options.map.getBounds().toBBoxString(); // Build envelope geometry
            }

            // JSONP request
            this._makeJsonpRequest(url);

        };
        // Lets implement ILayer.
        lvector.AGS.prototype.onAdd = function(map) {
            this.setMap(map)
        }
        lvector.AGS.prototype.onRemove = function(map) {
            this.setMap(null)
        }




		$(document).ready(function() {



            TMS1 = L.tileLayer('http://imagery.openstreetmap.fr/tms/1.0.0/haiyan_ls8/{z}/{x}/{y}.png');
            TMS2 = L.tileLayer('http://imagery.openstreetmap.fr/tms/1.0.0/haiyan_ls8_post/{z}/{x}/{y}.png');
            TMS3 = L.tileLayer('http://imagery.openstreetmap.fr/tms/1.0.0/haiyan_ls7_post/{z}/{x}/{y}.png');                              
            TMS4 = L.tileLayer('http://hiu-maps.net/hot/1.0.0/cebu-post-flipped/{z}/{x}/{y}.png'); 



            EvacuatedPersonsByProvince = new L.TileLayer("http://{s}.tiles.mapbox.com/v3/americanredcross.Haiyan_2013-11-11_EvacuatedPersonsByProvince/{z}/{x}/{y}.png", {
                    subdomains: ["a", "b", "c"],
                    attribution: 'Tiles Courtesy of <a href="http://www.mapquest.com/" target="_blank">MapQuest</a>. '
            });

            Population_by_Barangay = new L.TileLayer("http://{s}.tiles.mapbox.com/v3/americanredcross.HAIYAN_OCHA_Population_by_Barangay_2010/{z}/{x}/{y}.png", {
                    subdomains: ["a", "b", "c"],
                    attribution: 'Sources : <a href="http://reliefweb.int/" target="_blank">OCHA</a> Data from 2010 Census.'
            });

           NGA_Damage_Assessment = new L.TileLayer("http://{s}.tiles.mapbox.com/v3/americanredcross.Bridges_Haiyan/{z}/{x}/{y}.png", {
                    subdomains: ["a", "b", "c"],
                    attribution: 'Data from USG NGA, Updated November 14, 2013'
            });

            image = L.tileLayer.wms("https://services.digitalglobe.com/mapservice/wmsaccess?connectid=1ad41a7a-2a21-4221-b524-94aa6b63cdf4", {
              layers: 'DigitalGlobe:Imagery',
              format: 'image/png',
              transparent: true,
              attribution: "Digital Globe Imagery"
            });
         
          var getsearch = "hospital";
          var query = "http://overpass-api.de/api/interpreter?data=[out:json];node(BBOX)[amenity~'"+getsearch+"'];out;"





          //var opl = new L.TileLayer('http://{s}.tiles.mapbox.com/v3/examples.bc17bb2a/{z}/{x}/{y}.png', {opacity: 0.7});
          
          
          var opl = new L.OverPassLayer({
            _map:map,
            query: query,
            callback: function(data) {
              for(i=0;i<data.elements.length;i++) {
                e = data.elements[i];

                if (e.id in this.instance._ids) return;
                this.instance._ids[e.id] = true;
                var pos = new L.LatLng(e.lat, e.lon);
                var popup = this.instance._poiInfo(e.tags,e.id);
                var color = e.tags.collection_times ? 'green':'red';
                var circle = L.circle(pos, 50, {
                  color: color,
                  fillColor: '#fa3',
                  fillOpacity: 0.5
                })
                .bindPopup(popup);
                 this.instance.addLayer(circle);
              }
            },
          }); 


      

		    baseLayers = {"Humanitarian OpenStreetMap": new L.TileLayer("http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png", {
                    subdomains: ["a", "b", "c"],
                    attribution: ' Map data (c) <a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> contributors, CC-BY-SA.'
                }),
                "Mapbox Satelite (Pre-Disaster)": new L.TileLayer("http://{s}.tiles.mapbox.com/v3/icrc.ga4mf3lo/{z}/{x}/{y}.jpg",  {
                    subdomains: ["a", "b", "c"],
                    attribution: 'Map data (c) <a href="http://mapbox.com/" target="_blank">Mapbox</a>'
                })
            };


            overlays = {
              "<br>Overpass API": {
                "Hospitals" : opl,
              },
	            " <br>Imagery Post Disaster" : { 
                "Open StreetMapathon 1" : TMS1 , 
                "Open Street Mapathon 2" : TMS2 , 
                "Open Street Mapathon 3" : TMS3 , 
                "Nord Cevu" : TMS4,

                "Digital Globe Imagery <br>" : image,
              },
                "<br>Other Data" : { 
	            	"Evacuated Persons By Province" : EvacuatedPersonsByProvince,
	            	"Population by Barangay":Population_by_Barangay,
	            	"NGA Damage Assessment":NGA_Damage_Assessment 
                }
            };

			//var cities = new L.LayerGroup();


			var map = L.map('mapcontent', {
				center: [11.449069,123.293365],
				zoom: 8,
				layers: [baseLayers["Humanitarian OpenStreetMap"]]
			});



            //map.addLayer(markers);

			//L.control.layers(baseLayers, overlays,{collapsed:false}).addTo(map);
			L.control.groupedLayers(baseLayers, overlays,{collapsed:false}).addTo(map);


		    map.on('overlayadd', function(eventLayer) {
                //IRL use polymorphism not an ugly case statement.
                switch (eventLayer.name) {
                    case "Evacuated Persons By Province":
                        //map.setView([11.449069,125.293365], 8);
                         $(".overlay").append("<div class='evac'><br>Evacuated Persons By Province<br><br><div class='evacuatedpersons2013111'><span class='evac_person_20131111_swatch1'></span><span class='label'>95 - 1,249 persons</span><br><div class='evacuatedpersons2013111'><span class='evac_person_20131111_swatch2'></span><span class='label'>1,250 - 8,999 persons</span><br><span class='evac_person_20131111_swatch3'></span><span class='label'>9,000 - 24,999 persons</span><br> <span class='evac_person_20131111_swatch4'></span> <span class='label'>25,000 - 59,000 persons</span><br> <span class='evac_person_20131111_swatch5'></span> <span class='label'>60,000+ persons</span><br><br></div>")
                        break;
                    case "NGA Damage Assessment":
                        map.setView([10.900739,125.267487], 10);
                        $(".overlay").append("<div class='NGA'>NGA Damage Assessment<br><br><span class='swatch1_NGA'></span><span class='label'>Catastrophic Damages</span><br><span class='swatch2_NGA'></span><span class='label'>Extensive Damages</span><br><span class='swatch3_NGA'></span><span class='label'>Moderate Damages</span><br><span class='swatch4_NGA'></span><span class='label'>Limited Damages</span><br></div>");
                        break;
                     case "Population by Barangay":
                        $(".overlay").append("<div class='pop'>Population by Barangay<br><br><span class='swatch1_pop'></span> <span class='label'>0 - 499 Persons</span><br><span class='swatch2_pop'></span><span class='label'>500 - 4999 Persons</span><br><span class='swatch3_pop'></span> <span class='label'>10001 - 3499 Persons</span><br><span class='swatch4_pop'></span><span class='label'>3500 - 4999 Persons</span><br><span class='swatch5_pop'></span> <span class='label'>5000 - 10000 Persons</span><br><span class='swatch6_pop'></span><span class='label'>Greater than 10000 Persons</span><br><span class='swatch7_pop'></span><span class='label'>Greater than 15,000 Persons</span><br><span class='swatch8_pop'></span> <span class='label'>Data Missing</span><br><br></div>");
                        break;



                    //default :
                    //    map6.setView([39.6618, -104.8604], 18);
                    //    new L.Marker([39.6618, -104.8604]).addTo(map6);
                }
            });

            map.on('overlayremove', function(eventLayer) {
                //IRL use polymorphism not an ugly case statement.
                switch (eventLayer.name) {
                    case "NGA Damage Assessment":
                        $(".NGA").remove('');
                        break;
                    case "Evacuated Persons By Province":
                        $(".evac").remove('');
                        break;
                     case "Population by Barangay":
                        $(".pop").remove('');
                        break;
                    //default :
                    //    map6.setView([39.6618, -104.8604], 18);
                    //    new L.Marker([39.6618, -104.8604]).addTo(map6);
                }
            });
			//$ICRCsites = ICRCsites ; 
			
			//$('#municip').html(document.getElementsByClassName('iw-content'));


		});
	</script>
</body>
</html>
