Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
117 lines (103 sloc) 4.19 KB
<html>
<head>
<title>pMap</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<!-- need a local copy of jquery-gmap3 -->
<script type="text/javascript" src="jquery-gmap3-3.4/gmap3.min.js"></script>
<style type="text/css">
#gmap{
height: 450px;
width: 450px;
margin: 20px auto;
}
#gmapnot{
width: 450px;
margin: 20px auto;
}
.no-postcode-list{
}
table.caseprogress .highlight {
border: 3px solid #088AB2;
}
</style>
</head>
<body>
<div id="gmap"></div>
<div align="center"><button>Toggle Unmapped Applications (No Postcode)</button></div>
<div id="gmapnot" style="display:none"></div>
<script type="text/javascript" charset="utf-8">
$("button").click(function () {
// enable the toggling of unmapped applications
$("#gmapnot").toggle("slow");
});
// initialise the map, center it by lat/lon coordinates in the centre of the borough
$().gmap3('setDefault', {init:{center:[51.4738989064778, 0.04119873046875],zoom:12}});
// create a date object
var regdate1 = new Date();
var regdate2 = new Date();
// set it to 7 days ago
regdate1.setDate(regdate1.getDate() - 28);
regdate2.setDate(regdate1.getDate() + 28 );
// get the planning data via yahoo pipes
$.getJSON('http://pipes.yahoo.com/selondon/planning?regdate1='+regdate1.getDate()+'%2F0'+(regdate1.getMonth()+1)+'%2F'+regdate1.getFullYear()+'&regdate2='+regdate2.getDate()+'%2F0'+(regdate2.getMonth()+1)+'%2F'+regdate2.getFullYear()+'&_render=json&_callback=?', function(apps) {
// loop through each application
$.each(apps.value.items, function(i, data) {
// container for html content extracted from the planning data
var items_loc = [];
// look for start the postcode
var start = data.content.search("[A-Z]{2}[0-9]{1,2} [0-9][A-Z][A-Z]{1} ");
// set postcode to string from that point
var postcode = data.content.substring(start);
// try to trim the postcode
var postcode = postcode.substring(0, postcode.search(" Statutory class"));
// if the postcode could not be trimmmed it was not there - can't be mapped, and is added as text only
if (postcode.length > 8) {
postcode = '';
items_loc.push('<li>' + data.stringtokenizer[0].content + '<hr />' + data.stringtokenizer[8].content + '<hr />' + data.stringtokenizer[10].content + '</li>');
$('<ul/>', {
'class': 'no-postcode-list',
html: items_loc.join(',')
}).appendTo('#gmapnot');
}
// or else the postcode could be trimmed correctly, and hence is in a usable form
else {
// request the geo data for the postcode from mapit
$.getJSON('http://mapit.mysociety.org/postcode/' + postcode + '?callback=?', function(locations) {
// merge retrieved locations into planning data
$.extend(data, locations);
// once DOM has loaded...
$(document).ready(function(){
// display the map, with a marker and infowindow for each geocoded planning application using the gmap3 jquery plugin
$("#gmap").gmap3(
{ action: 'addMarkers',
markers:[
{lat:data.wgs84_lat, lng:data.wgs84_lon, data:data.stringtokenizer[0].content + '<hr />' + data.stringtokenizer[8].content + '<hr />' + data.stringtokenizer[10].content}
],
marker:{
options:{
draggable: false
},
events:{
click: function(marker, event, data){
var map = $(this).gmap3('get'),
infowindow = $(this).gmap3({action:'get', name:'infowindow'});
if (infowindow){
infowindow.open(map, marker);
infowindow.setContent(data);
} else {
$(this).gmap3({action:'addinfowindow', anchor:marker, options:{content: data}});
}
}
}
}
}
); // end - gmap3
}); // end - document.ready
}); // end - getJSON locations from mapit
}
}); // end - each application
}); // end - getJSON apps from yahoo pipes
</script>
</body>
</html>