forked from RandomEtc/shapefile-js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
naturalearthdata.html
93 lines (87 loc) · 4.11 KB
/
naturalearthdata.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
<html>
<head>
<title>Natural Earth - Javascript Shapefile and DBF Loader</title>
<script type="text/javascript" src="lib/binaryajax.js"></script>
<script type="text/javascript" src="src/binarywrapper.js"></script>
<script type="text/javascript" src="src/shapefile.js"></script>
<script type="text/javascript" src="src/dbf.js"></script>
<script type="text/javascript" src="src/map.js"></script>
<script type="text/javascript" src="src/layer.js"></script>
<!--[if IE]><script src="lib/excanvas.js"></script><![endif]-->
<script type="text/javascript">
window.onload = function() {
// currently styling works like this:
// - if there's a fillStyle then it will be filled
// - if there's a strokeStyle then it will be stroked
// - points are always 3px rectangles
// - polylines can't be filled
var map1 = new Map('physical', [
new Layer("naturalearthdata/physical/110m-ocean", { fillStyle: '#9dc3e0', strokeStyle: '#8db3d0', lineWidth: '5' }),
new Layer("naturalearthdata/physical/110m-geography-marine-polys", { strokeStyle: '#ffff80', lineWidth: '0.5' }),
new Layer("naturalearthdata/physical/110m-land", { fillStyle: '#202020' }),
new Layer("naturalearthdata/physical/110m-geography-regions-polys", { strokeStyle: 'rgba(100,100,100,0.5)', lineWidth: '0.5' }),
new Layer("naturalearthdata/physical/110m-glaciated-areas", { fillStyle: 'rgb(40,40,70)' }),
new Layer("naturalearthdata/physical/110m-coastline", { strokeStyle: '#ffffff', lineWidth: '2.0' }),
new Layer("naturalearthdata/physical/110m-lakes", { fillStyle: '#9dc3e0', strokeStyle: 'white', lineWidth: '0.5' }),
new Layer("naturalearthdata/physical/110m-physical-geographic-lines", { strokeStyle: 'white', lineWidth: '0.5' }),
new Layer("naturalearthdata/physical/110m-rivers-lake-centerlines", { strokeStyle: '#9dc3e0', lineWidth: '0.5' }),
new Layer("naturalearthdata/physical/110m-geography-regions-points", { fillStyle: 'red', strokeStyle: 'white', lineWidth: '0.5', textStroke: 'black', textHalo: '3', textFill: 'white', textProp: 'Name' })
]);
var map2 = new Map('cultural', [
// country shapes
new Layer('naturalearthdata/cultural/110m-admin-0-countries', { fillStyle: '#fadfa8', strokeStyle: '#5c3d1f', lineWidth: '0.5' }),
// mainly USA state shapes
new Layer('naturalearthdata/cultural/110m-admin-1-states-provinces-poly-shp', { fillStyle: '#fadfa8', strokeStyle: '#5c3d1f', lineWidth: '1' }),
// mainly USA state boundaries
new Layer('naturalearthdata/cultural/110m-admin-1-states-provinces-lines-shp', { strokeStyle: '#9b5c3d', lineWidth: '0.5' }),
// internal country borders:
new Layer('naturalearthdata/cultural/110m-admin-0-boundary-lines', { strokeStyle: '#9b5c3d', lineWidth: '1' }),
// mainly the lines around the pacific islands
new Layer('naturalearthdata/cultural/110m-admin-0-pacific-groupings', { strokeStyle: '#3993c7', lineWidth: '0.5' }),
// dots for small countries?
new Layer('naturalearthdata/cultural/110m-admin-0-tiny-countries', { fillStyle: 'rgb(0,0,0)' }),
// dots for cities
new Layer('naturalearthdata/cultural/110m-populated-places', { fillStyle: 'rgb(0,0,0)' })
]);
}
</script>
<style type="text/css">
body {
background-color: #eee;
color: #000;
font: 12px sans-serif;
margin: 20px;
}
.map {
width: 1024px;
height: 512px;
margin: 0;
padding: 0;
border: 0;
}
#cultural {
background-color: #9dc3e0;
}
#physical {
background-color: #9dc3e0;
}
canvas {
margin: 0;
padding: 0;
}
a img {
border: 0;
}
</style>
</head>
<body>
<h1>Natural Earth</h1>
<p>This is an experimental javascript shapefile viewer. For no reason in particular it doesn't really work in IE, sorry. Elsewhere, uninformative errors may appear in the dark crevices of your browser.</p>
<p>See <a href="http://github.com/RandomEtc/shapefile-js">http://github.com/RandomEtc/shapefile-js</a> for more details.</p>
<h2>110m Physical Vectors (10 layers)</h2>
<div class="map" id="physical"></div>
<h2>110m Cultural Vectors (7 layers)</h2>
<div class="map" id="cultural"></div>
<p><a href="http://www.naturalearthdata.com/"><img src="naturalearthdata/NEV-Logo-Black_sm.png"></a></p>
</body>
</html>