constituency-map/c4em-map.html at master · bcc/constituency-map · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
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>