forked from interactivethings/swiss-maps
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexample.html
109 lines (90 loc) · 3.67 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Swiss Maps</title>
<script src="http://d3js.org/d3.v2.min.js"></script>
<script src="lib/topojson.js"></script>
<style type="text/css">
path {
fill: #fff;
stroke: #000;
stroke-width: 1;
}
</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: 800,
height: 500
},
mapDataSources = [
{name: 'Cantons – GeoJSON', type: 'geojson', src: 'geojson/swiss-cantons.geojson'},
{name: 'Cantons – Simplified GeoJSON', type: 'geojson', src: 'geojson/swiss-cantons-simplified.geojson'},
{name: 'Cantons – TopoJSON', type: 'topojson', src: 'topojson/swiss-cantons.topojson'},
{name: 'Cantons – Simplified TopoJSON', type: 'topojson', src: 'topojson/swiss-cantons-simplified.topojson'},
{name: 'Municipalities – GeoJSON', type: 'geojson', src: 'geojson/swiss-municipalities.geojson'},
{name: 'Municipalities – Simplified GeoJSON', type: 'geojson', src: 'geojson/swiss-municipalities-simplified.geojson'},
{name: 'Municipalities – TopoJSON', type: 'topojson', src: 'topojson/swiss-municipalities.topojson'},
{name: 'Municipalities – Simplified TopoJSON', type: 'topojson', src: 'topojson/swiss-municipalities-simplified.topojson'}
],
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 swissLonLat = [8.231726, 46.798473],
scale = 60000,
projection = d3.geo.mercator().scale(scale),
center = projection(swissLonLat);
projection.translate([dimensions.width/2 + 480 - center[0], dimensions.height/2 + 250 - center[1]])
var geoPath = d3.geo.path()
.projection(projection)
// Kickstart
updateMap(mapDataSelect.property('value'));
function updateMap(mapDataSource) {
d3.json(mapDataSource, function(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.geojson"] || mapData.objects["swiss-municipalities.geojson"]; // FIXME
mapShapes = map.selectAll('path')
.data(topojson.object(mapData, objects).geometries)
mapShapes.enter().append('path')
.attr('d', geoPath);
mapShapes.exit().remove();
// map.append('path')
// .datum(topojson.mesh(mapData))
// .attr('d', geoPath)
}
</script>
</body>
</html>