httemplate/misc/openmap.html

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