138 lines
4.4 KiB
HTML
138 lines
4.4 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|
<link rel="stylesheet" href="leaflet.css" />
|
|
<!--[if lte IE 8]>
|
|
<link rel="stylesheet" href="leaflet.ie.css" />
|
|
<![endif]-->
|
|
|
|
<script src="leaflet.js"></script>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
|
|
|
|
|
|
<script src='combined.js'></script>
|
|
|
|
<title> map </title>
|
|
</head>
|
|
<body>
|
|
<h1>Support for Equal Marriage Map</h1>
|
|
<p>This is a simple visualisation of the predicted vote data from the <a href='http://www.c4em.org.uk/'>Coalition for Equal Marriage</a>. You can click on each constituency for information about the MP and the supporting evidence.</p>
|
|
<p>A green area is expected to vote for equal marriage, and a red area is expected the vote against. Dark grey shaded areas are expected not to vote, and light grey are currently unknown. </p>
|
|
<div style='width:600px; height:600px; float:left' id="map"></div>
|
|
<div id="info" style='float:clear; overflow:auto;';><h4>Equal Marriage Vote</h4> Click on a constituency for information</div>
|
|
<div id='about' style='width:100%; float:left'>
|
|
<h2> About </h2>
|
|
<ul>
|
|
<li>MP Information from the <a href='http://www.c4em.org.uk/support-for-equal-marriage/'>Coalition for Equal Marriage</a></li>
|
|
<li>Constituency Boundaries from <a href='http://mapit.mysociety.org/'>MySociety MapIt</a></li>
|
|
<li>Map data from <a href='http://www.openstreetmap.org/'>OpenStreetMap</a>, rendered with <a href='http://leafletjs.com/'>Leaflet</a></li>
|
|
<li>Glued together by <a href="http://spod.cx">Ben</a> (<a href="http://twitter.com/bencc">@bencc</a> )</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<script>
|
|
var map;
|
|
var ajaxRequest;
|
|
var plotlist;
|
|
var plotlayers=[];
|
|
var geojson;
|
|
var info;
|
|
var mptable = 'http://www.c4em.org.uk/mps-table/?format=json';
|
|
|
|
function initmap() {
|
|
map = new L.Map('map');
|
|
|
|
// create the tile layer with correct attribution
|
|
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
|
|
var osmAttrib='Map data © OpenStreetMap contributors, mysociety, c4em.org.uk';
|
|
var osm = new L.TileLayer(osmUrl, {minZoom: 5, maxZoom: 12, attribution: osmAttrib});
|
|
map.setView(new L.LatLng(54.3, -1.7),6);
|
|
map.addLayer(osm);
|
|
geojson = L.geoJson(statesData, {style: style, onEachFeature: onEachFeature}).addTo(map);
|
|
}
|
|
|
|
function getColor(d) {
|
|
return d == '1' ? '#00FF00' :
|
|
d == '-1' ? '#666666' :
|
|
d == '0' ? '#FF0000' :
|
|
'#cccccc';
|
|
}
|
|
|
|
function style(feature) {
|
|
return {
|
|
fillColor: getColor(feature.properties.likelyvote),
|
|
weight: 1,
|
|
opacity: 1,
|
|
color: 'white',
|
|
dashArray: '3',
|
|
fillOpacity: 0.7
|
|
};
|
|
}
|
|
|
|
function highlightFeature(e) {
|
|
var layer = e.target;
|
|
|
|
layer.setStyle({
|
|
weight: 5,
|
|
color: '#666',
|
|
dashArray: '',
|
|
fillOpacity: 0.7
|
|
});
|
|
|
|
if (!L.Browser.ie && !L.Browser.opera) {
|
|
layer.bringToFront();
|
|
}
|
|
}
|
|
|
|
function resetHighlight(e) {
|
|
geojson.resetStyle(e.target);
|
|
}
|
|
|
|
function zoomToFeature(e) {
|
|
var layer = e.target;
|
|
infoupdate(layer.feature.properties);
|
|
map.fitBounds(e.target.getBounds());
|
|
|
|
}
|
|
|
|
function onEachFeature(feature, layer) {
|
|
layer.on({
|
|
mouseover: highlightFeature,
|
|
mouseout: resetHighlight,
|
|
click: zoomToFeature
|
|
});
|
|
}
|
|
|
|
initmap();
|
|
|
|
// method that we will use to update the control based on feature properties passed
|
|
function infoupdate (props) {
|
|
var _div=document.getElementById('info');
|
|
var infotext;
|
|
|
|
if (props) {
|
|
var evidence = '<h4>Evidence</h4><ol>';
|
|
var c = 0;
|
|
$.each(props.evidence, function(i, item) {
|
|
c++;
|
|
if (item.substring(0,5) == 'http:') {
|
|
item = '<a href="' + item + '">' + item + '</a>';
|
|
}
|
|
evidence = evidence + '<li>' + item + '</li>';
|
|
})
|
|
infotext = '<b>' + props.name + '</b><br />' + props.firstname + ' ' + props.secondname + '<br />' + props.party + '<br />' +
|
|
(props.url ? '<a href="' + props.url + '"</a>' + props.url + '</a><br />' : '') +
|
|
(props.twitter ? '<a href="http://twitter.com/' + props.twitter + '"</a>twitter.com/' + props.twitter + '</a><br />' : '') +
|
|
'<br /><blockquote>' + props.quote + '</blockquote>' +
|
|
evidence ;
|
|
|
|
} else {
|
|
infotext = 'Click on a constituency';
|
|
}
|
|
_div.innerHTML = '<h4>Equal Marriage Vote</h4>' + infotext;
|
|
};
|
|
|
|
//info.addTo(map);
|
|
|
|
</script>
|