+ Demonstrates the use of the canvas renderer with a vector layer.
+
+
+
+
+ This example shows a vector layer that uses the Canvas renderer
+ where available. The order of the renderers given in the layer
+ options is used to locate the first available renderer.
+
+
+
diff --git a/examples/canvas.js b/examples/canvas.js
new file mode 100644
index 0000000000..1434ff9e3d
--- /dev/null
+++ b/examples/canvas.js
@@ -0,0 +1,62 @@
+var map, layer, styleMap;
+OpenLayers.ProxyHost = "/proxy/?url=";
+
+function init() {
+ map = new OpenLayers.Map({
+ div: "map",
+ projection: new OpenLayers.Projection("EPSG:900913"),
+ displayProjection: new OpenLayers.Projection("EPSG:4326"),
+ units: "m",
+ maxResolution: 156543.0339,
+ maxExtent: new OpenLayers.Bounds(
+ -20037508, -20037508, 20037508, 20037508
+ )
+ });
+
+ 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://demo.opengeo.org/geoserver/wfs",
+ featureType: "states",
+ featureNS: "http://www.openplans.org/topp"
+ }),
+ 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())
+ );
+}
diff --git a/examples/style.css b/examples/style.css
index 60875fe823..d1da62ec8c 100644
--- a/examples/style.css
+++ b/examples/style.css
@@ -79,4 +79,8 @@ h6 {
}
#tags {
display: none;
-}
\ No newline at end of file
+}
+
+#docs p {
+ margin-bottom: 0.5em;
+}
diff --git a/examples/wfs-reprojection.html b/examples/wfs-reprojection.html
index ef45be0848..da87c8846b 100644
--- a/examples/wfs-reprojection.html
+++ b/examples/wfs-reprojection.html
@@ -1,114 +1,37 @@
-
- WFS Reprojection + Canvas Renderer Example
-
-
-
-
-
-
-
-
-
WFS Reprojection + Canvas Renderer Example
-
-
-
-
- Shows the use of the WFS layer reprojection support
-
-
+
+ WFS Reprojection Example
+
+
+
+
+
+
+
+
WFS Reprojection Example
+
+
+
+ Shows the use of the client side reprojection support.
+
-
-
-
This example shows automatic WFS reprojection, displaying an 'unprojected'
- WFS layer projected on the client side over Google Maps. The key configuration
- here is the 'projection' option on the WFS layer.
-
Also shown is styleMap for the layer with unique value rules. Colors
- are assigned based on the STATE_FIPS attribute.
-
Additionally, this map demonstrates the Canvas/SVG renderers in browsers
- which support both. See the two different layers in the
- LayerSwitcher.
-
-
-
-
-
+
+
+ This example shows client side reprojection. In the case where
+ the projection of a vector layer differs from the projection of
+ the map, features are requested in the layer projection and
+ transformed during parsing. It is assumed that the layer
+ projection is "native" projection of the data (the coordinate
+ reference system of the data on the server).
+
+
+ Also shown is styleMap for the layer with unique value rules.
+ Colors are assigned based on the STATE_FIPS attribute.
+