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;">Retrieving Map.</div>
  15    </td>
  16   </tr>
  17  </table>
  18
  19   <script>
  20
  21     var url = 'xmlhttp-openstreetmap.html?loc=<%$loc%>';
  22     $.getJSON(url,function(data){
  23       var latlong = [data[0].lat, data[0].lon];
  24       var mymap = L.map('mapid').setView(latlong, 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        document.getElementById("mycensustract").innerHTML = "Retrieving census tract...";
  39        getCensusTract(e.latlng.lat, e.latlng.lng);
  40       }
  41
  42       mymap.on('click', onMapClick);
  43
  44       function getCensusTract(lat, lon) {
  45        var url = 'xmlhttp-censustract.html?lat=' + lat + '&lon=' + lon + '&census_year=<%$census_year%>';
  46        $.getJSON(url,function(data){
  47          var tract = (data.Block.FIPS.substr(0, 11) / 100).toFixed(2);
  48          document.getElementById("mycensustract").innerHTML = tract;
  49        });
  50       }
  51
  52     });
  53
  54     function changeMainDiv(lat,lng) {
  55           window.opener.document.getElementById("newcensustract").innerHTML = document.getElementById("mycensustract").innerHTML;
  56           window.opener.document.getElementById("new_tract").value = document.getElementById("mycensustract").innerHTML;
  57           window.opener.document.getElementById("setnewtractdiv").style.display = "block";
  58           window.opener.document.getElementById("cancelsubmissiontop").style.display = "none";
  59           window.opener.document.getElementById("cancelsubmissionbottom").style.display = "block";
  60           window.close();
  61     }
  62
  63   </script>
  64 </body>
  65 </html>
  66
  67 <%init>
  68
  69 local $SIG{__DIE__}; #disable Mason error trap
  70
  71 my $DEBUG = 0;
  72
  73 my $head = '
  74   <link rel="stylesheet" href="elements/leaflet/leaflet.css"/>
  75   <script src="elements/leaflet/leaflet.js"></script>
  76 ';
  77
  78 my $census_year = $cgi->param('census_year');
  79 my $pre         = $cgi->param('pre');
  80 my $zip_code    = $cgi->param('zip_code');
  81 my $address     = $cgi->param('address');
  82 my $loc = $zip_code ? $zip_code : $address;
  83
  84 </%init>