2

I am trying to display Ordnance Survey Grid references (ESPG:27700) on a set of BaseMaps with the MousePosition control.

From looking through the OpenLayers samples, and this forum, samples I have managed to figure out most of the code that is needed. I understand that you need to reference the projection and include the proj4.js reference library. But I think I am missing something as I can get coordinates in ESPG: 4326 and 900913, but not 27700, if I set the "displayProjection:" option accordingly.

Please see my code:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Sample Map</title>
    <script src="http://openlayers.org/api/OpenLayers.js"></script>
   <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/proj4js/2.2.1/proj4.js"></script>

<script> 
proj4.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');

OpenLayers.Projection.get('EPSG:27700').setExtent([0, 0, 800000, 1400000]);
OpenLayers.Projection.get('EPSG:27700').setWorldExtent([-10, 49, 6, 63]);
OpenLayers.Projection.get('EPSG:27700').setGlobal(false);
OpenLayers.Projection.get('EPSG:27700').setGetPointResolution(function
(resolution) { return resolution; });

    var map;

    function init(){
        var geographic = new OpenLayers.Projection('EPSG:4326');
        var mercator = new OpenLayers.Projection('EPSG:900913');
        var osgb = new OpenLayers.Projection('ESPG:27700');

        map = new OpenLayers.Map("map",{projection: mercator} );

// Add The layer swticher     
        map.addControl(new OpenLayers.Control.LayerSwitcher());

// Add A Scale Bar

       map.addControl(new OpenLayers.Control.ScaleLine());

    // Add Mouse Cursor Posistion
            map.addControl(
                        new OpenLayers.Control.MousePosition({
                        prefix: '<a target="_blank" ' +
                        'href="http://spatialreference.org/ref/epsg/27700/">' +
                        'EPSG:27700</a> coordinates: ',
                        separator: ' | ',
                        numDigits: 2,
                        displayProjection: 'EPSG:27700',
                        emptyString: 'Mouse is not over map.'
                        })
                        );
        // Add the Open StreetMaps Layer
        var OSM = new OpenLayers.Layer.OSM( "Simple OSM Map");


        //Add the Google Hybird Layer
        var ghyb = new OpenLayers.Layer.Google(
        "Google Hybrid",
        {type: google.maps.MapTypeId.HYBRID,  visibility: false}
        );

       // Add the Google Satellite Layer
        var gsat = new OpenLayers.Layer.Google(
        "Google Satellite",
        {type: google.maps.MapTypeId.SATELLITE}
        );

        // Add The Layers into the Map
        map.addLayers([OSM, ghyb, gsat]);

        //Use a converter to convert LonLat
        var locationCentre= new OpenLayers.LonLat(-2, 49).transform( new OpenLayers.Projection('EPSG:4326'), new OpenLayers.Projection('EPSG:900913') );

        // Pan the Map to the locationCentre Variable with the zoom level at 5
        map.setCenter(locationCentre, 5);
        }

</script>
Improve this question
2
  • Does this Q&A help?
    – mkennedy
    Commented Sep 4, 2015 at 17:03
  • Hi thanks for this, but unfortunately this has not worked!
    – spatialapp
    Commented Sep 5, 2015 at 12:59

1 Answer 1

Reset to default
1

According to an answer from Andreas Hocevar you have to add a wrapper before you load projections from spatialreference.org:

<script>
    window.Proj4js = {
        Proj: function(code) { return proj4(Proj4js.defs[code]); },
        defs: proj4.defs,
        transform: proj4
    };
</script>

http://osgeo-org.1560.x6.nabble.com/OL-2-13-1-latest-Proj4js-td5081636.html

I gave it a try in jsfiddle and it seems to work:

http://jsfiddle.net/expedio/9tmq4auk/

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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