unescomap

<?php

?>
<!DOCTYPE html>
<html lang="it">
  <head>
  <title>List of World Heritage Sites</title>
  <link rel="stylesheet" href="http://necolas.github.io/normalize.css/2.1.3/normalize.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />
        <link rel="stylesheet" href="MarkerCluster.css" />
        <link rel="stylesheet" href="MarkerCluster.Default.css" />
  <script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
   <script src="leaflet.markercluster.js"></script>
<script type="text/javascript">
function microAjax(B,A){this.bindFunction=function(E,D){return function(){return E.apply(D,[D])}};this.stateChange=function(D){if(this.request.readyState==4){this.callbackFunction(this.request.responseText)}};this.getRequest=function(){if(window.ActiveXObject){return new ActiveXObject("Microsoft.XMLHTTP")}else{if(window.XMLHttpRequest){return new XMLHttpRequest()}}return false};this.postBody=(arguments[2]||"");this.callbackFunction=A;this.url=B;this.request=this.getRequest();if(this.request){var C=this.request;C.onreadystatechange=this.bindFunction(this.stateChange,this);if(this.postBody!==""){C.open("POST",B,true);C.setRequestHeader("X-Requested-With","XMLHttpRequest"); C.setRequestHeader("Content-type","application/x-www-form-urlencoded");C.setRequestHeader("Connection","close")}else{C.open("GET",B,true)}C.send(this.postBody)}};
</script>
  <style>
  #mapdiv{
        position:fixed;
        top:0;
        right:0;
        left:0;
        bottom:0;
}
#loading {
			position:fixed;
			top:0;
			left:0;
			width:100%;
			height:100%;
			background-color:#666;
			color:#fff;
			font-size:1em;
			padding:10% 40px;
			z-index:10;
			text-align:center;
		}
#infodiv{
        background-color: rgba(255, 255, 255, 0.95);

  border-width: 2px;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.8);

  border-radius: 9px;

  padding: 10px;

  //width: 90%;
  font-size: 11px;
  botton: 2px;
  left: 2px;

  bottom: 20px;
  max-height: 50px;

  position: fixed;

  overflow-y: auto;
  overflow-x: hidden;
}
</style>
  </head>

<body>

<div id="mapdiv"></div>
  <script type="text/javascript">
		var lat=40.662617,
        lon=16.6191,
        zoom=2;
        var osm = new L.TileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {maxZoom: 19, attribution: 'Map Data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors | @Piersoft from <a href="http://whc.unesco.org/en/list/">UNESCO</a> list (25.01.14)'});
		var mapquest = new L.TileLayer('http://otile{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png', {subdomains: '1234', maxZoom: 18, attribution: 'Map Data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors | @Piersoft from <a href="http://whc.unesco.org/en/list/">UNESCO</a> list (25.01.14)'});

        var map = new L.Map('mapdiv', {
                    editInOSMControl: true,
            editInOSMControlOptions: {
                position: "topright"
            },
            center: new L.LatLng(lat, lon),
            zoom: zoom,
            layers: [osm]
        });

        var baseMaps = {
    "Mapnik": osm,
    "Mapquest Open": mapquest
        };
        L.control.layers(baseMaps).addTo(map);


microAjax('unesco.json',function (res) {
var feat=JSON.parse(res);
loadLayer(feat);

 } );
    var ico=L.icon({iconUrl:'logo_unesco.png', iconSize:[20,20],iconAnchor:[10,0]});
    var markers = L.markerClusterGroup();


 function loadLayer(url)
        {

                var myLayer = L.geoJson(url,{
                        onEachFeature:function onEachFeature(feature, layer) {

                             if (feature.properties) {
var string='<div align="center"><img src="http://whc.unesco.org/uploads/sites/site_'+feature.properties.id_no+'.jpg"></div></br><b>';
string +='Name:</b> '+feature.properties.name_en+'</br><b>Short description:</b> '+feature.properties.short_description_en+'<br/><b>Date inscribed:</b> '+feature.properties.date_inscribed+"<br/>";
string +='<b>Category:</b> '+feature.properties.category+"<br/>"+'<b>State:</b> '+feature.properties.states_name_en;


				layer.bindPopup(string, {
                                maxWidth: "200",
				 maxHeight: "200",
                                closeButton: false
                            });
                                }
                        },

                        pointToLayer: function (feature, latlng) {
              	        var marker = new L.marker(latlng, { icon: ico });
                        markers[feature.properties.id] = marker;
                        return marker;

                        }
                }).addTo(markers);

      markers.addLayer(myLayer);

        }


     map.addLayer(markers);
map.fitBounds(markers.getBounds());
</script>

</body>
</html>