forked from interactivethings/swiss-maps
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexample.html
113 lines (95 loc) · 3.72 KB
/
example.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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Swiss Maps</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>
<style type="text/css">
path {
fill: #fff;
stroke: #000;
stroke-width: 1px;
}
</style>
</head>
<body>
<h1>Swiss Maps</h1>
<select id="map-data-select"></select>
<div id="map-container"></div>
<script type="text/javascript">
var dimensions = {
width: 960,
height: 500
},
mapDataSources = [
{name: 'Cantons – GeoJSON', type: 'geojson', src: 'geojson/swiss-cantons.json'},
{name: 'Cantons – Simplified GeoJSON', type: 'geojson', src: 'geojson/swiss-cantons-simplified.json'},
{name: 'Cantons – TopoJSON', type: 'topojson', src: 'topojson/swiss-cantons.json'},
{name: 'Cantons – Simplified TopoJSON', type: 'topojson', src: 'topojson/swiss-cantons-simplified.json'},
{name: 'Municipalities – GeoJSON', type: 'geojson', src: 'geojson/swiss-municipalities.json'},
{name: 'Municipalities – Simplified GeoJSON', type: 'geojson', src: 'geojson/swiss-municipalities-simplified.json'},
{name: 'Municipalities – TopoJSON', type: 'topojson', src: 'topojson/swiss-municipalities.json'},
{name: 'Municipalities – Simplified TopoJSON', type: 'topojson', src: 'topojson/swiss-municipalities-simplified.json'}
],
mapDataSelect = d3.select('#map-data-select'),
map = d3.select('#map-container').append('svg')
.attr(dimensions);
mapDataSelect.on('change', function() {
updateMap(d3.select(this).property('value'));
});
mapDataSelect.selectAll('option')
.data(mapDataSources, function(d) { return d.name })
.enter().append('option')
.text(function(d) { return d.name })
.property('value', function(d) { return d.src });
// Create geo path generator with Switzerland centered and zoomed in
var projection = d3.geo.albers()
.rotate([0, 0])
.center([8.43, 46.8])
.scale(13600);
var geoPath = d3.geo.path()
.projection(projection)
// Kickstart
updateMap(mapDataSelect.property('value'));
function updateMap(mapDataSource) {
d3.json(mapDataSource, function(error, mapData) {
switch(mapData.type) {
case 'FeatureCollection':
renderGeoJSON(mapData);
break;
case 'Topology':
renderTopoJSON(mapData);
break;
}
});
}
function renderGeoJSON(mapData) {
map.selectAll('path').remove() // FIXME! Rather use a data key function which differentiates between municipality and canton IDs.
mapShapes = map.selectAll('path')
.data(mapData.features);
mapShapes.enter().append('path')
.attr('d', geoPath);
mapShapes.exit().remove();
}
function renderTopoJSON(mapData) {
map.selectAll('path').remove();
var objects = mapData.objects["swiss-cantons"] || mapData.objects["swiss-municipalities"]; // FIXME
mapShapes = map.selectAll('path')
.data(topojson.object(mapData, objects).geometries)
mapShapes.enter().append('path')
.attr('d', geoPath)
.on('click', function(d) {
var centroid = d3.geo.centroid(d);
projection.center(centroid).scale(18000);
mapShapes.transition()
.attr('d', geoPath);
});
mapShapes.exit().remove();
// map.append('path')
// .datum(topojson.mesh(mapData))
// .attr('d', geoPath)
}
</script>
</body>
</html>