[GIS] Openlayers Transform not transforming a point from EPSG 27700 to EPSG 4326

coordinate systemgoogle-maps-apiopenlayers-2

I am trying to add Google street view functionality to a Openlayers Map. I have started by using 3 divs to hold the Openlayers Map (which uses a local tilecached base map), a google api map and another for street view.

If I try to transform the lonlat from EPSG:27700 to EPSG:4326 so that they can be passed to the google map object as the center location, the coordinates are not transformed.

I have the following scripts included in the html:

    <script src="script/openlayers/proj4js-compressed.js"></script>
    <script src="script/openlayers/OpenLayers.js"></script>
    <script src="script/openlayers/defs/EPSG27700.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.1.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
   <script src="script/map.js"></script>

If I alert the lonlat variable after transforming it I get the original EPSG 27700 value of lon = 311711, lat = 530372, rather than the converted EPSG 4326 value.

The Openlayers map is set up here:

    //private variables
    var map = null;
    var streetview = null;
    var osgrid = new OpenLayers.Projection("EPSG:27700");
    var googlegrid = new OpenLayers.Projection("GOOGLE");
    var mapextent = new OpenLayers.Bounds(295000.0,505000.0,340000,565000.0);

    var options = {
         projection: osgrid, 
    displayProjection: osgrid,
    maxExtent: mapextent,
    restrictedExtent: mapextent,
    units: 'm'
    }
    var osoptions = {
    scales: [
        250000,
        107716.5936,
        70866.18,
        47243.9527,
        22677.1776,
        15000.236,
        10000.9708,
        6000.309,
        3000.91484,
        2000,
        500
    ]
};

    //allow testing of specific renderers via "?renderer=Canvas", etc
    var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
    renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;

    //Set mapping this object for use in internal functions
    var that = this;

    var addControls = function() {
           var nav = new OpenLayers.Control.Navigation();   
           var zoomBox = new OpenLayers.Control.ZoomBox();
           var layerSwitch = new OpenLayers.Control.LayerSwitcher();
           map.addControls([nav, zoomBox, layerSwitch]);
    };

    //Public Objects
    this.tmsurl = ["http://servername1/tilecache/",
                    "http://servername2/tilecache/",
                    "http://servername3/tilecache/",
                    "http://servername4/tilecache/"
                ];

    this.popup = null;

    this.init = function() {

        map = new OpenLayers.Map("map_canvas", options);

        var osmap = new OpenLayers.Layer.TileCache(
            "OS Map",
             that.tmsurl,
            'base_StandardMap',
            {
                 options: osoptions,
                format: 'image/jpeg',
                isBaseLayer: true
            }
        );


        addControls();   

         map.addLayers([aerialmap, osmap]);

        var lon = 311711;
        var lat = 530372;
        var zoom = 0;

        map.zoomToExtent(mapextent);

        that.centreMap(lon, lat, zoom);

The Google Map and Street view is set up here 

var lonlat = new OpenLayers.LonLat(lon, lat);
lonlat.transform(osgrid,new OpenLayers.Projection("EPSG:4326"));
        var location = new google.maps.LatLng(lonlat.lat, lonlat.lon);
        var mapOptions = {
          center: location,
          zoom: 14,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var gmap = new google.maps.Map(
            document.getElementById('gmap'), mapOptions);
        var panoramaOptions = {
          position: location,
          pov: {
            heading: 34,
            pitch: 10,
            zoom: 1
          }
        };
        var panorama = new  google.maps.StreetViewPanorama(document.getElementById('streetview'),panoramaOptions);
        gmap.setStreetView(panorama);

    },

Best Answer

i dont know how do you define your proj4js defination in EPSG27700.js but you have to define it in openlayers as following:

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";

then you can transform it by this way:

var ll = new OpenLayers.LonLat(lonlat.lon, lonlat.lat).transform(
         new OpenLayers.Projection("EPSG:27700"), new OpenLayers.Projection("EPSG:4326"));

i hope it helps you...

Related Question