1 <html xmlns="http://www.w3.org/1999/xhtml">
3 <title>WFS Reprojection + Canvas Renderer Example</title>
4 <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
5 <link rel="stylesheet" href="style.css" type="text/css" />
6 <script src="../lib/OpenLayers.js"></script>
7 <script src='http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>
8 <script type="text/javascript">
10 var map, layer, styleMap;
11 OpenLayers.ProxyHost = "/proxy/?url=";
14 map = new OpenLayers.Map('map', {
15 projection: new OpenLayers.Projection("EPSG:900913"),
16 displayProjection: new OpenLayers.Projection("EPSG:4326"),
18 maxResolution: 156543.0339,
19 maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34,
20 20037508.34, 20037508.34)
23 var g = new OpenLayers.Layer.Google("G", {sphericalMercator: true});
26 // prepare to style the data
27 styleMap = new OpenLayers.StyleMap({
33 // create a color table for state FIPS code
34 var colors = ["red", "orange", "yellow", "green", "blue", "purple"];
36 for(var i=1; i<=66; ++i) {
38 code = code.substring(code.length - 2);
39 fips[code] = {fillColor: colors[i % colors.length]};
41 // add unique value rules with your color lookup
42 styleMap.addUniqueValueRules("default", "STATE_FIPS", fips);
44 // create a wfs layer with a projection different than the map
45 // (only if your wfs doens't support your map projection)
46 var wfs = layer = new OpenLayers.Layer.WFS(
48 "http://sigma.openplans.org/geoserver/ows",
49 {typename: 'topp:states'},
52 featureNS: 'http://www.openplans.org/topp',
53 projection: new OpenLayers.Projection("EPSG:4326"),
54 extractAttributes: true,
61 var wfs = layer = new OpenLayers.Layer.WFS(
63 "http://sigma.openplans.org/geoserver/ows",
64 {typename: 'topp:states'},
67 featureNS: 'http://www.openplans.org/topp',
68 projection: new OpenLayers.Projection("EPSG:4326"),
69 extractAttributes: true,
72 renderers: ['Canvas', 'SVG', 'VML']
76 map.addControl(new OpenLayers.Control.LayerSwitcher());
78 // if you want to use Geographic coords, transform to ESPG:900913
79 var ddBounds = new OpenLayers.Bounds(
80 -73.839111,40.287907,-68.214111,44.441624
83 ddBounds.transform(map.displayProjection, map.getProjectionObject())
88 <body onload="init()">
90 <h1 id="title">WFS Reprojection + Canvas Renderer Example</h1>
95 Shows the use of the WFS layer reprojection support
98 <div id="map" class="smallmap"></div>
101 <p>This example shows automatic WFS reprojection, displaying an 'unprojected'
102 WFS layer projected on the client side over Google Maps. The key configuration
103 here is the 'projection' option on the WFS layer.</p>
104 <p>Also shown is styleMap for the layer with unique value rules. Colors
105 are assigned based on the STATE_FIPS attribute.</p>
106 <p>Additionally, this map demonstrates the Canvas/SVG renderers in browsers
107 which support both. See the two different layers in the