[OpenLayers-Users] WFS reprojection on Google Maps

Wed May 4 05:51:25 EDT 2011

Dear all,

I've been trying to reproject WFS layers on Google Maps without
success. After reading several threads here and elsewhere it became
apparent that WFS 1.1.0 takes care of reprojections by itself, without any
processing needed client side. Hence I tried simply to reproject the
Tazmania shapes from Geoserver on a Google Maps base layer; while the
WFS layers are indeed there, they do not seem to have been reprojected:

http://www.flickr.com/photos/46630302@N04/5686739802/in/set-72157626519940667/

Below goes the code, note that I'm using a local version of Geoserver
on port 8090. I'd thank if anyone could hint at what I'm missing.

Thanks,

Luís

-----

<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
       <style type="text/css">
           #map {
               width: 560px;
               height: 460px;
               border: 1px solid black;
           }
       </style>

       <script src="http://localhost:8090/geoserver/www/OpenLayers-2.9/OpenLayers.js"
type="text/javascript"></script>

       <!-- Google API-->
       <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>

       <script defer="defer" type="text/javascript">

       function init(){

           var map = new OpenLayers.Map("map", {
               projection: new OpenLayers.Projection("EPSG:900913")
           });

           var gphy = new OpenLayers.Layer.Google(
               "Google Physical",
               {type: G_PHYSICAL_MAP}
           );

           var roads = new OpenLayers.Layer.WFS(
               "Roads",
               "http://localhost:8090/geoserver/wfs",
               {typename: 'topp:tasmania_roads'},
               {
                   typename: 'tasmania_roads',
                   featureNS: 'http://www.openplans.org/topp',
                   extractAttributes: false,
                   version: "1.1.0",
                   srsName: "EPSG:900913"
               }
           );
           roads.style = OpenLayers.Util.applyDefaults(
               {strokeWidth: 2, strokeColor: "#ff0000"},
               OpenLayers.Feature.Vector.style["default"]);

           var states = new OpenLayers.Layer.WFS(
               "States",
               "http://localhost:8090/geoserver/wfs",
               {typename: 'topp:tasmania_state_boundaries'},
               {
                   typename: 'tasmania_state_boundaries',
                   featureNS: 'http://www.openplans.org/topp',
                   extractAttributes: false,
                   version: "1.1.0",
                   srsName: "EPSG:900913"
               }
           );
           states.style = OpenLayers.Util.applyDefaults(
               {strokeWidth: 3, strokeColor: "#333333"},
               OpenLayers.Feature.Vector.style["default"]);

           map.addLayers([gphy, roads, states]);

           map.addControl(new OpenLayers.Control.Navigation());
           map.addControl(new OpenLayers.Control.LayerSwitcher());

           map.setCenter(new OpenLayers.LonLat(147, -42), 7);

       }
       </script>

   </head>
   <body onload="init()">
       <h5>This is a reprojection test on Google Maps.</h5>
       <div id="map"> </div>
   </body>
</html>