-
Notifications
You must be signed in to change notification settings - Fork 64
/
sample_shp.html
167 lines (144 loc) · 6.04 KB
/
sample_shp.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
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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!doctype html>
<html>
<head>
<title>geostats - js-shapefile-to-geojson integration sample</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/geostats.js"></script>
<script type="text/javascript" src="http://openlayers.org/api/2.11/OpenLayers.js"></script>
<link rel="stylesheet" href="lib/geostats.css" type="text/css" />
<style type="text/css">
<!--
body {
font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
color:#333;
font-size: 0.8em;
background-color: #F7F7F7;
}
#legend {display:inline-block;width:20%;margin:0 1em 2em 0;font-size:0.85em;vertical-align: top}
.legend-block {
border: 1px solid #555555;
display: block;
float: left;
height: 12px;
margin: 0.3em 0.8em 0 2em;
width: 20px;
}
.container {margin:0 auto;width:90%;}
.serie strong {color:#333;}
.serie {font-size: .9em;color:#555;}
.classes {margin:0em 4em 2em;}
.projectinfo {width:100%;text-align: center;margin:-3em 0 3em;}
a {color:#F47FE7;font-weight: bold;text-shadow: #fff 2px 2px 0px;text-decoration: none;}
a:hover {color:#514F51;}
#map {width:76%;height:500px;border: 1px solid #ccc;background-color: #eee;display:inline-block;}
h1 {color:#B5B1B1;text-shadow: #fff 2px 2px 0px;text-align: center;margin:2em 0;}
h2 {color:#A2A3F2;text-shadow: #fff 2px 2px 0px;margin:2em 0 1em 0;}
h3 {color:#555;font-size: .9em}
hr {
height: 1px;
margin: -0.5em 0;
padding: 0;
color: #ddd;
background-color: #ddd;
border: 0;
}
#footer {font-size:0.8em;text-align: center;color:#777;margin:2em 0 1em;padding:.3em}
-->
</style>
</head>
<body>
<div class="container" id="top">
<h1>geostats - <a href="http://github.com/wavded/js-shapefile-to-geojson"><em>js-shapefile-to-geojson</em></a> integration sample</h1>
<h2>Reading shapefile and creating choropleth map from attribute data</h2>
<div id="map"></div>
<script src="./tests/js-shapefile-to-geojson/stream.js"></script>
<script src="./tests/js-shapefile-to-geojson/shapefile.js"></script>
<script src="./tests/js-shapefile-to-geojson/dbf.js"></script>
<script type="text/javascript">
var host = "http://"+window.location.hostname;
var am = document.location.pathname.substring(1, document.location.pathname.lastIndexOf('/') + 1);
//get user defined class
// if equals value
function getClass(val, a) {
// return 2;
for ( var i = 0; i < a.length; i++) {
var item = a[i].split(/ - /);
if (val <= parseFloat(item[1])) {
return i;
}
}
}
var populationValues = []; // will store values
OpenLayers.ImgPath = "http://js.mapbox.com/theme/dark/";
var options = {
scales: [130000000, 65000000, 32500000, 17000000, 8500000, 4200000],
controls: [
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.ScaleLine({geodesic: true, maxWidth: 200, bottomOutUnits: "", bottomInUnits: ""}),
new OpenLayers.Control.MousePosition(),
new OpenLayers.Control.Navigation()
],
numZoomLevels: 1
};
// Create a new map with options defined above
map = new OpenLayers.Map( 'map', options );
parser = new OpenLayers.Format.GeoJSON();
shapefile = new Shapefile(
{
shp : host + '/' + am + "tests/js-shapefile-to-geojson/testdata/world.shp",
dbf : host + '/' + am + "tests/js-shapefile-to-geojson/testdata/world.dbf"
},
function(data) {
var features = parser.read(data.geojson);
var origin = features;
// we get the desired attribute
for (i = 0; i < features.length; i++) {
populationValues.push(features[i].attributes.POP2005);
}
// geostats settings
serie = new geostats(populationValues);
serie.getClassQuantile(5);
var ranges = serie.ranges;
console.log(ranges.join(', '));
var colors =new Array('#FEF0D9', '#FDCC8A','#FC8D59', '#E34A33','#B30000')
serie.setColors(colors);
var legend = serie.getHtmlLegend(null,'Population in 2005');
// openlayers settings
var context_x = {
getColour : function(feature) {
color = colors;
return color[getClass(feature.attributes["POP2005"],ranges)];
}
};
var template = {
fillOpacity : 0.9,
strokeColor : "#ffffff",
strokeWidth : 1,
fillColor : "${getColour}"
};
// Style
var style_x = new OpenLayers.Style(template, {
context : context_x
});
var styleMap_x = new OpenLayers.StyleMap(
{
'default' : style_x
});
var vector = new OpenLayers.Layer.Vector('Countries',
{
styleMap : styleMap_x,
isBaseLayer : true
});
vector.addFeatures(features);
map.addLayer(vector);
map.zoomToExtent(vector.getDataExtent());
// console.log(data);
// console.log(features);
$('#legend').html(legend);
})
</script>
<div id="legend"></div>
<div id="footer"><em>geostats.js</em> - Copyright (c) 2011 Simon Georget - released under MIT license - <a href="https://github.com/simogeo/geostats" title="geostats Github page">Github page</a> | <a href="#top">Go to top</a></div>
</div>
</body>
</html>