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

    },
share|improve this question
add comment

1 Answer

up vote 4 down vote accepted

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...

share|improve this answer
    
I had the same defintion in an external js file. I have put it in the openlayers file to see if this makes a different, but still not transforming. –  Peter Campbell Jan 16 '13 at 14:30
    
However by changing my transform to the way you have done it, it is now working. I thought the transform changed the original point. –  Peter Campbell Jan 16 '13 at 14:38
add comment

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.