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
|
var map, layer, styleMap;
OpenLayers.ProxyHost = "proxy.cgi?url=";
function init() {
var geographic = new OpenLayers.Projection("EPSG:4326");
var mercator = new OpenLayers.Projection("EPSG:900913");
map = new OpenLayers.Map('map', {
projection: mercator
});
var g = new OpenLayers.Layer.Google("Google Layer", {
sphericalMercator: true
});
map.addLayers([g]);
// prepare to style the data
styleMap = new OpenLayers.StyleMap({
strokeColor: "black",
strokeWidth: 2,
strokeOpacity: 0.5,
fillOpacity: 0.2
});
// create a color table for state FIPS code
var colors = ["red", "orange", "yellow", "green", "blue", "purple"];
var code, fips = {};
for(var i=1; i<=66; ++i) {
code = "0" + i;
code = code.substring(code.length - 2);
fips[code] = {fillColor: colors[i % colors.length]};
}
// add unique value rules with your color lookup
styleMap.addUniqueValueRules("default", "STATE_FIPS", fips);
// This server supports server-side reprojection, but we're using WFS 1.0
// here (which doesn't support reprojection) to illustrate client-side
// reprojection.
var wfs = new OpenLayers.Layer.Vector("States", {
strategies: [new OpenLayers.Strategy.BBOX()],
protocol: new OpenLayers.Protocol.WFS({
version: "1.0.0",
srsName: "EPSG:4326", // this is the default
url: "http://demo.opengeo.org/geoserver/wfs",
featureType: "states",
featureNS: "http://www.openplans.org/topp"
}),
projection: geographic, // specified because it is different than the map
styleMap: styleMap
});
map.addLayer(wfs);
// if you want to use Geographic coords, transform to ESPG:900913
var ddBounds = new OpenLayers.Bounds(
-73.839111,40.287907,-68.214111,44.441624
);
map.zoomToExtent(
ddBounds.transform(geographic, mercator)
);
}
|
