-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
80 lines (73 loc) · 2.73 KB
/
index.html
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
<!DOCTYPE HTML>
<html>
<head>
<title>Housing App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.1/angular-route.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.1/angular-animate.js"></script>
<!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link href="src/css/main.css" rel="stylesheet" type="text/css">
</head>
<body ng-app="vision">
<div class="">
<div ng-view></div>
</div>
</body>
<script src="src/app.module.js"></script>
<script src="src/main.controller.js"></script>
<script src="src/route-config.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="http://rawgithub.com/markmarkoh/datamaps/master/dist/datamaps.none.min.js"></script>
<script>
setTimeout(function() {
var map = new Datamap({
element: document.getElementById('subunits'),
geographyConfig: {
dataUrl: '/customlondon.topo.json'
},
scope: 'subunits',
fills: {
defaultFill: '#bada55',
someKey: '#fa0fa0'
},
setProjection: function(element) {
var projection = d3.geo.mercator()
.center([0, 51.4])
.scale(30000)
.translate([element.offsetWidth / 2, element.offsetHeight / 2]);
var path = d3.geo.path().projection(projection);
return {path: path, projection: projection};
},
done: function(datamap) {
var that = this;
datamap.svg.selectAll('.datamaps-subunit').on('click', function(geography) {
toggleInLocalstorage(geography);
//that.data[geography.id.toString()] = {fillKey: 'someKey'};
//console.log(that.data);
var n = {};
datamap.updateChoropleth(n);
n[geography.id] = {fillKey: 'someKey'};
datamap.updateChoropleth(n);
console.log(n);
datamap.updateChoropleth(n);
console.log(datamap);
});
}
});
var selected = [];
var toggleInLocalstorage = function(geography) {
var index = selected.indexOf(geography);
if(index === -1) {
selected.push(geography);
} else {
selected.splice(index, 1);
}
console.log(selected);
window.localStorage.setItem('selectedGeographies', JSON.stringify(selected));
}
}, 3000);
</script>
</html>