httemplate/misc/openmap.html

   1 <html>
   2 <head>
   3   <title>Find Census Tract Map</title>
   4   <link rel="stylesheet" href="elements/leaflet/leaflet.css"/>
   5   <script src="elements/leaflet/leaflet.js"></script>
   6 </head>
   7 <body>
   8   <h1>Please select your location on the map</h1>
   9   <table>
  10    <tr>
  11    <td valign=top>
  12      <input type="button" value="Use below census track" onclick="changeMainDiv()">
  13      <P>
  14      Census Tract: <div id="mycensustract"></div>
  15      <input type=hidden id="censustract" value="">
  16    </td>
  17    <td>
  18      <div id="mapid" style="width: 600px; height: 600px;"></div>
  19    </td>
  20   </tr>
  21  </table>
  22
  23   <script>
  24     var mymap = L.map('mapid').setView(getLatLong('<%$loc%>'), 15);
  25     var popup = L.popup();
  26     var mainLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  27          maxZoom: 19,
  28          attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
  29     }).addTo(mymap);
  30     var markersLayer = new L.LayerGroup();
  31     mymap.addLayer(markersLayer);
  32
  33     function onMapClick(e) {
  34       markersLayer.clearLayers();
  35       var marker = L.marker([e.latlng.lat, e.latlng.lng]);
  36       marker.bindPopup("You selected (" + e.latlng.lat + " , " + e.latlng.lng + ")").openPopup();
  37       markersLayer.addLayer(marker);
  38       getCensusTract(e.latlng.lat, e.latlng.lng);
  39     }
  40
  41     mymap.on('click', onMapClick);
  42
  43     function Get(yourUrl){
  44       var Httpreq = new XMLHttpRequest(); // a new request
  45       Httpreq.open("GET",yourUrl,false);
  46       Httpreq.send();
  47       return Httpreq.responseText;
  48     }
  49
  50     function getLatLong(loc) {
  51          var url = 'http://nominatim.openstreetmap.org/search?format=json&limit=1&q=' + loc;
  52          var json_obj = JSON.parse(Get(url));
  53          return [json_obj[0].lat, json_obj[0].lon];
  54     }
  55
  56     function getCensusTract(lat, lon) {
  57          var url = 'xmlhttp-censustract.html?lat=' + lat + '&lon=' + lon + '&census_year=<%$census_year%>';
  58          var json_obj = JSON.parse(Get(url));
  59          var tract = (json_obj.Block.FIPS.substr(0, 11) / 100).toFixed(2);
  60          document.getElementById("mycensustract").innerHTML = tract;
  61     }
  62
  63     function changeMainDiv(lat,lng) {
  64           window.opener.document.getElementById("newcensustract").innerHTML = document.getElementById("mycensustract").innerHTML;
  65           window.opener.document.getElementById("new_tract").value = document.getElementById("mycensustract").innerHTML;
  66           window.opener.document.getElementById("setnewtractdiv").style.display = "block";
  67           window.opener.document.getElementById("cancelsubmissiontop").style.display = "none";
  68           window.opener.document.getElementById("cancelsubmissionbottom").style.display = "block";
  69           window.close();
  70     }
  71
  72   </script>
  73 </body>
  74 </html>
  75
  76 <%init>
  77
  78 local $SIG{__DIE__}; #disable Mason error trap
  79
  80 my $DEBUG = 0;
  81
  82 my $census_year = $cgi->param('census_year');
  83 my $pre         = $cgi->param('pre');
  84 my $zip_code    = $cgi->param('zip_code');
  85 my $address     = $cgi->param('address');
  86 my $loc = $zip_code ? $zip_code : $address;
  87
  88 </%init>