initial import

2013-02-05 21:42:45 +00:00 · 2013-02-05 21:42:45 +00:00 · 2d06a3e71a
commit 2d06a3e71a
parent 7d4c841702
662 changed files with 3950 additions and 0 deletions
--- a/c4em-map.html
+++ b/c4em-map.html
@ -0,0 +1,138 @@
+<!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 &copy; 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>