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>