Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

I have the following HTML-javascript code and i have problems reprojecting the vector layer (WFS) from EPSG:27700 (British National Grid) to EPSG:900913 (googlemaps).

I managed to project the WMS layer but i have difficulties with the WFS.

With what i have read so far, to perform this reprojection you need "GeoJSON" and "Proj4js". There is no much documentation and examples using these 2 features.

One more thing to add is that using the existing WFS coding i managed to project the "tasmanian" layers that already exist in Geoserver. But these are on a different projecting system (EPSG:4326)

Any help would be much appreciated.

George

Code is the following:

html,body { height: 99%; width: 99%; } #map { width: 80%; height: 80%; border: 1px solid black; }

<title>OpenLayers: Google Layer Example</title>
<link rel="stylesheet" href="http://openlayers.org/api/theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css" type="text/css" />

<script src="http://openlayers.org/api/OpenLayers.js"></script>
    <script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<script src="http://maps.google.com/maps/api/js?v=3.2&amp;sensor=false"></script>
    <script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2 mkt=en-us"></script>
    <script src="http://developers.cloudmade.com/attachments/download/58/cloudmade.js"></script>

<script src="http://proj4js.org/lib/proj4js-compressed.js"></script>

<script type="text/javascript">

    Proj4js.defs["EPSG:900913"] = "+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +no_defs";
    Proj4js.defs["EPSG:27700"] = "+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +datum=OSGB36 +units=m +no_defs";
    Proj4js.defs["EPSG:4326"] = "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs";

  function init() {

    //set up projections

    // World Geodetic System 1984 projection
            var WGS84 = new OpenLayers.Projection("EPSG:4326");

            // WGS84 Google Mercator projection
    var WGS84_google_mercator = new OpenLayers.Projection("EPSG:900913");

    // OS British National Grid
    var os = new OpenLayers.Projection("EPSG:27700");

            //Initialize the map
            var map = new OpenLayers.Map ("map", {
                    controls:[
                            //allows the user pan ability
                            new OpenLayers.Control.Navigation(),
                            //displays the pan/zoom tools
                            new OpenLayers.Control.PanZoomBar(),
                            //displays a layer switcher
                            new OpenLayers.Control.LayerSwitcher(),

                    ],
                            projection: WGS84_google_mercator,
                        displayProjection: WGS84
            } );

            //base layers
            var openstreetmap = new OpenLayers.Layer.OSM();

            var cloudmade = new OpenLayers.Layer.CloudMade("CloudMade", {
                key: 'BC9A493B41014CAABB98F0471D759707'}
            );

            var google_maps = new OpenLayers.Layer.Google("Google Maps", {
        numZoomLevels: 20}
    );
            var google_satellite = new OpenLayers.Layer.Google("Google Satellite", 
                    {
                    type: google.maps.MapTypeId.SATELLITE,
                    'sphericalMercator': true,
                    buffer:0,
                    numZoomLevels: 20}
            );
            var bing_shaded = new OpenLayers.Layer.VirtualEarth("Bing Maps", 
            {
                     type: VEMapStyle.Shaded,
                    'sphericalMercator': true,
                     numZoomLevels: 20}
            );
    var bing_hybrid = new OpenLayers.Layer.VirtualEarth("Bing Satellite", {
        type: VEMapStyle.Hybrid,
               'sphericalMercator': true,
        numZoomLevels: 20}
        );
    var bing_aerial = new OpenLayers.Layer.VirtualEarth("Bing Aerial", {
        type: VEMapStyle.Aerial,
                    'sphericalMercator': true,
        numZoomLevels: 20}
        );

            // WMS Layers for the projection of the shapefiles
            var layer1 = new OpenLayers.Layer.WMS( "National Parks",
                        "http://localhost:8080/geoserver/wms",
                      {
                        srs: 'EPSG:4326',
                            layers: 'National_Parks',
                            transparent: 'true',
                            format: 'image/png',
                            buffer:0
                      },
                      {
                            'singleTile': true, 'ratio': 1, 'opacity': 0.75, 'isBaseLayer': false, 'wrapDateLine': false,'transitionEffect':'resize', displayInLayerSwitcher : true, 'alwaysInRange': true, 'displayOutsideMaxExtent':true
                      }
                      );

            // WFS Layers for the projection of the shapefiles
            var wfslayer = new OpenLayers.Layer.Vector("National Parks in GB",
            {
            strategies: [new OpenLayers.Strategy.BBOX()],
            protocol: new OpenLayers.Protocol.WFS({
          url:  "http://localhost:8080/geoserver/wfs",
                      //featureType: "tasmania_state_boundaries",
                      featureType: "National_Parks",
                      //featureNS: "http://www.openplans.org/topp",
                      featureNS: "http://opengeo.org/protec_are",
                      version: "1.1.0",
          srsName: "EPSG:900913",
          })
                    });

                            //transformation between coordinate systems (27700 to 900913)
                            var format = new OpenLayers.Format.GeoJSON({
                            'internalProjection': new OpenLayers.Projection("EPSG:900913"),
                            'externalProjection': new OpenLayers.Projection("EPSG:27700")
                            });


                            var newfeatures = format.write(wfslayer.features);
                            var newlayer = new OpenLayers.Layer.Vector("newlayer");
                        newlayer.addFeatures(format.read(newfeatures));


            // Display the layers on the map
            map.addLayers([openstreetmap, cloudmade, google_maps, google_satellite,bing_shaded, bing_hybrid, bing_aerial, layer1, newlayer]);

            var mapextent = new OpenLayers.Bounds(-16.08,49.06,6.76,58.74).transform(map.displayProjection, map.baseLayer.projection);
    map.zoomToExtent(mapextent);

    }

</script>

OpenLayers: Google Layer Example


Thanks a lot for the information guys.

Senthil i made the changes that you suggested and i managed to get the layer on the screen.

As quite lots of people might have the same problem i would like to summarise some important things.

--> If the web page(HTML) containing the map (comment from 'iant') that you are creating exists on the same server as WFS/Geoserver (e.g when you use the same PC) then you dont need to use proxy.

--> For conversion between projection systems (e.g. from EPSG:27700 to EPSG:900913) you dont need Proj4Js or GeoJson. WFS Version 1.1.0 will do the trick.

--> Do not run the HTML web page as a file by double clicking on it (e.g file:///E:/GISWork/GISApplication/Geoserver-2.0.3/data_dir/www/GIS.html) but run it through the server (e.g http://localhost:8080/geoserver/www/GIS.html) otherwise you wont be able to see the layer on the screen.

G

share|improve this question

1 Answer 1

I have done EPSG:2193 to EPSG:900913 for WMS and WFS with Geoserver - Google layers through Openlayers. You donot need to have Proj4Js or GeoJson (it can be used to set the format, but GML format is fine too).

Remove all unnecessary javascripts inlcuded and create Openlayer Map as below:

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

// Add controller as needed.

   var wfslayer = new OpenLayers.Layer.Vector(layerName, {
        strategies: [new OpenLayers.Strategy.BBOX()],
        reportError: true,
        visibility: true,           
        protocol: new OpenLayers.Protocol.WFS({
                           url:  "http://localhost:8080/geoserver/wfs",
                           featureType: "National_Parks",
                           featureNS: "http://opengeo.org/protec_are",
                           version: "1.1.0",
                           srsName: "EPSG:900913",
                })
    });

    this.map.addLayer(wfslayer);

Make sure GeoServer has workspace 'Namespace URI' as http://opengeo.org/protec_are

Try to debug with Firebug and check the response for WFS call.

share|improve this answer
    
Thanks a lot for the information Senthil. I will try to make the necessary changes today and see if i get any results. One more question that i would like to ask is whether i need to install an application like apache (proxy.cgi) to connect to geoserver ... or this is not necessary?? –  Geo Apr 7 '11 at 11:32
    
You only need a proxy if you are serving the web page containing the map from a different server than the WFS. –  iant Apr 7 '11 at 17:04
    
You don't need to have proxy unless your application access to geoserver only possible through proxy. As long as you stated you were able to connect WMS from Geoserver then, you don't need it. –  Senthil Apr 7 '11 at 21:26

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.