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
|
var map, layer, styleMap;
OpenLayers.ProxyHost = "proxy.cgi?url=";
function init() {
map = new OpenLayers.Map({
div: "map",
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326")
});
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);
// create a vector layer using the canvas renderer (where available)
var wfs = new OpenLayers.Layer.Vector("States", {
strategies: [new OpenLayers.Strategy.BBOX()],
protocol: new OpenLayers.Protocol.WFS({
version: "1.1.0",
srsName: "EPSG:900913",
url: "http://v2.suite.opengeo.org/geoserver/wfs",
featureType: "states",
featureNS: "http://usa.opengeo.org"
}),
styleMap: styleMap,
renderers: ["Canvas", "SVG", "VML"]
});
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(map.displayProjection, map.getProjectionObject())
);
}
|
