timwaters/geoiq_leaflet.htm

## geoiq_leaflet.htm

<html><head><title>Geocommons and Leaflet JS</title>

    <!-- Leaflet CSS -->
    <link rel="stylesheet" href="CloudMade-Leaflet-404b097/dist/leaflet.css" />
    <!--[if lte IE 8]><link rel="stylesheet" href="CloudMade-Leaflet-404b097/dist>/leaflet.ie.css" /><![endif]-->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
    <!-- Leaflet JavaScript -->
    <script type="text/javascript" src="CloudMade-Leaflet-404b097/dist/leaflet.js"></script>

    <script type="text/javascript">
      function init(){
        // Leaflet map
        var myMap = new L.Map('map');

        // set up acetate tile layer
        var acetateUrl =  'http://{s}.acetate.geoiq.com/tiles/acetate/{z}/{x}/{y}.png';
        var acetateAttrib = '2011 GeoIQ & Stamen, Data from OSM and Natural Earth';
        var acetate = new L.TileLayer(acetateUrl, {maxZoom: 18, attribution: acetateAttrib, subdomains: ['a1', 'a2', 'a3']});

        var leeds = new L.LatLng(53.796, -1.551);

        // set view to leeds, and add layer. method chaining, yumm.
        myMap.setView(leeds, 14).addLayer(acetate);

        // Add empty geojson layer
        var geojsonLayer = new L.GeoJSON();

        // Listen to events: popup, click and set style. Do this before we add any features to it
        geojsonLayer.on("featureparse", function (e) {

          if (e.properties && e.properties.name){
            e.layer.bindPopup(e.properties.name +"<br />"+e.properties.type);
          }

          if (e.properties && e.properties.osm_id) {
            e.layer.on('click', function(ee){
              jQuery(".info").html("<a target='_new' href='http://www.openstreetmap.org/browse/way/" +
                e.properties.osm_id+"'>OSM ID: "+e.properties.osm_id + "</a><em> Name: </em>"+
                e.properties.name + "  (<em>type: </em>" +e.properties.type+")");
            });
          }

          if (e.properties && e.properties.type && e.layer.setStyle){
            var color = "#334DCC";
            var t = e.properties.type;
            var colormap = {
              "hospital":"#CC3399",
              "residential":"#CC6633",
              "house":"#CCB333",
              "school":"#99CC33",
              "retail":"#D864B1",
              "commercial":"#006600"};

            color = colormap[t] || color;

            e.layer.setStyle({"color":color,"weight": 2,"opacity": 1 });

          }else{ //default
            e.layer.setStyle({"color":"#663300","weight": 2,"opacity": 0.6 });
          }
        }); //end featureparse

        // Call GeoCommons to get json features we will use the filter feature api to get all features within 3 km of the lat and lon
        var url = "http://geocommons.com/datasets/168923/features.json?lat=53.796&lon=-1.551&radius=3&callback=?";

        jQuery.getJSON(url, function(data){
          jQuery(".info").html(data.length + " features shown.");
          jQuery.each(data, function(i,f) {

            // We need to massage the json a bit
            f.properties = {name: f.name, osm_id: f.osm_id, type: f.type};
            f.type = "Feature";

            // Now Push into geojson layer each feature
            geojsonLayer.addGeoJSON(f);

          });
        });

        myMap.addLayer(geojsonLayer);

      }
    </script>

  </head>
  <body onload="init();">

    <div id="map" style="height: 90%;"></div>
    <div id="info" class="info"></div>

  </body>
</html>

	<html><head><title>Geocommons and Leaflet JS</title>

	<!-- Leaflet CSS -->
	<link rel="stylesheet" href="CloudMade-Leaflet-404b097/dist/leaflet.css" />
	<!--[if lte IE 8]><link rel="stylesheet" href="CloudMade-Leaflet-404b097/dist>/leaflet.ie.css" /><![endif]-->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
	<!-- Leaflet JavaScript -->
	<script type="text/javascript" src="CloudMade-Leaflet-404b097/dist/leaflet.js"></script>

	<script type="text/javascript">
	function init(){
	// Leaflet map
	var myMap = new L.Map('map');

	// set up acetate tile layer
	var acetateUrl = 'http://{s}.acetate.geoiq.com/tiles/acetate/{z}/{x}/{y}.png';
	var acetateAttrib = '2011 GeoIQ & Stamen, Data from OSM and Natural Earth';
	var acetate = new L.TileLayer(acetateUrl, {maxZoom: 18, attribution: acetateAttrib, subdomains: ['a1', 'a2', 'a3']});

	var leeds = new L.LatLng(53.796, -1.551);

	// set view to leeds, and add layer. method chaining, yumm.
	myMap.setView(leeds, 14).addLayer(acetate);

	// Add empty geojson layer
	var geojsonLayer = new L.GeoJSON();

	// Listen to events: popup, click and set style. Do this before we add any features to it
	geojsonLayer.on("featureparse", function (e) {

	if (e.properties && e.properties.name){
	e.layer.bindPopup(e.properties.name +"<br />"+e.properties.type);
	}

	if (e.properties && e.properties.osm_id) {
	e.layer.on('click', function(ee){
	jQuery(".info").html("<a target='_new' href='http://www.openstreetmap.org/browse/way/" +
	e.properties.osm_id+"'>OSM ID: "+e.properties.osm_id + "</a><em> Name: </em>"+
	e.properties.name + " (<em>type: </em>" +e.properties.type+")");
	});
	}

	if (e.properties && e.properties.type && e.layer.setStyle){
	var color = "#334DCC";
	var t = e.properties.type;
	var colormap = {
	"hospital":"#CC3399",
	"residential":"#CC6633",
	"house":"#CCB333",
	"school":"#99CC33",
	"retail":"#D864B1",
	"commercial":"#006600"};

	color = colormap[t] \|\| color;

	e.layer.setStyle({"color":color,"weight": 2,"opacity": 1 });

	}else{ //default
	e.layer.setStyle({"color":"#663300","weight": 2,"opacity": 0.6 });
	}
	}); //end featureparse

	// Call GeoCommons to get json features we will use the filter feature api to get all features within 3 km of the lat and lon
	var url = "http://geocommons.com/datasets/168923/features.json?lat=53.796&lon=-1.551&radius=3&callback=?";

	jQuery.getJSON(url, function(data){
	jQuery(".info").html(data.length + " features shown.");
	jQuery.each(data, function(i,f) {

	// We need to massage the json a bit
	f.properties = {name: f.name, osm_id: f.osm_id, type: f.type};
	f.type = "Feature";

	// Now Push into geojson layer each feature
	geojsonLayer.addGeoJSON(f);

	});
	});

	myMap.addLayer(geojsonLayer);

	}
	</script>

	</head>
	<body onload="init();">

	<div id="map" style="height: 90%;"></div>
	<div id="info" class="info"></div>

	</body>
	</html>