OpenLayers GeoServer WMS EPSG:27700

A sample page demonstrating an OpenLayers application loading a GeoServer WMS with data in British National Grid (EPSG:27700).

<html>
    <head>
        <title>OpenLayers GeoServer WMS</title>
        <script type="text/javascript" src="openlayers/OpenLayers.js"></script>
        <script>
        var map;
        var bounds = new OpenLayers.Bounds (300000, 700000, 400000, 800000);
        var attr = "Contains Ordnance Survey data. (c) Crown copyright and database right 2013.";
        var os_options = {
                format: "image/jpeg",
                layers: "opendata:OSVMD"
        };

        function init() {

            map = new OpenLayers.Map('map', { 
            projection: new OpenLayers.Projection("EPSG:27700"), 
            units: "m", 
            maxExtent: bounds, 
            resolutions: [2800,1400,700,350,175,84,42,21,11.5,5.6,2.8,1.4,0.7]} );

            os25k = new OpenLayers.Layer.WMS( "OS 25K",
                "http://localhost:8080/geoserver/GISLIVE/wms", {'layers':'GISLIVE:OS25K'}, {attribution: attr}, {gutter: 15}, {'isBaseLayer': true});

            os50k = new OpenLayers.Layer.WMS( "OS 50K",
                "http://localhost:8080/geoserver/GISLIVE/wms", {'layers':'GISLIVE:OS50K'}, {attribution: attr}, {gutter: 15}, {'isBaseLayer': true});

            map.addLayers([os50k, os25k]);
            map.addControl(new OpenLayers.Control.LayerSwitcher());
            map.addControl(new OpenLayers.Control.Scale());
            map.addControl(new OpenLayers.Control.MousePosition());
            map.setCenter(new OpenLayers.LonLat(-3.1, 56.5), 8);
            //map.zoomToMaxExtent();
        }
        </script>
        <style>
            /* round corners of layer switcher, and make it transparent */
            .olControlLayerSwitcher .layersDiv {
                border-radius: 10px 0 0 10px;
                opacity: 0.75;
                filter: alpha(opacity=75);
            }
        </style>
    </head>
    <body onload="init()">
        <div id="map" style="width:1024px; height:768px; border: 1px green dashed;"></div>
        <h2>OpenLayers 2 + GeoServer WMS</h2>
    </body>
</html>

Customised from the Edina example and, in this case, loading the OS 25k and 50k raster layers.

2 thoughts on “OpenLayers GeoServer WMS EPSG:27700”

  1. Thank you for this help. I am new to Geoserver and have started using leaflet, please can you assist me to load maps from geoserver on my local pc into leaflet js

    thank you

Leave a Reply

Your email address will not be published. Required fields are marked *