Possible Duplicate:
Openlayers and Geoserver: OSM/Google Maps and WMS Overlay

I am writing a code using OpenLayers. In this code, I want to display different layers in different zoom levels. Up until here, everything works. my problem began when I tried to add Google Maps as baselayers. My layers' projection system is not consistent with Google layers, so they should be reprojected. I tried to use Proj4js.transform method but it didn't work. My layers are in EPSG:3006(Sweden) and Google layers are in EPSG:900913. The following code results in a projected layer shifted to right. It means that the re-projection did not work properly. Please let me know what is wrong with my code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

    <title>OpenLayers map preview</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <!-- Import OL CSS, auto import does not work with our minified OL.js build -->
    <link rel="stylesheet" type="text/css" href="http://gisl.nateko.lu.se:8080/geoserver/openlayers/theme/default/style.css">
    <!-- add here more css definition libraries-->

     <!-- Basic CSS definitions -->
    <style type="text/css">
        body {
            font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
            font-size: small;
        /* Toolbar styles */
        #toolbar {
            position: relative;
            padding-bottom: 0.5em;
            display: none;
        /* The map and the location bar */
        #map {
            clear: both;
            position: relative;
            width: 337px;
            height: 512px;
            border: 2px solid black;
        #wrapper {
            width: 337px;
            height: 50px;                           
        #location {
            float: right;
            font-family: Arial, Verdana, sans-serif; 
            font-size: 12px; 
            color: #483D8B;
            background-color: white;
        #scale {
            font-family: Arial, Verdana, sans-serif; 
            font-size: 12px; 
            color: #483D8B;
            background-color: white;
            font-family: Arial, Verdana, sans-serif; 
            font-size: 14px; 
            color: #000000;
            font-style: normal;
            background-color: white;
    <!-- Import OpenLayers, reduced, wms read only version -->
    <script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>      
    <!-- add here more js libraries -->

    <script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
    <script src ='proj4js/lib/deprecated.js'></script>
    <script src="proj4js/lib/proj4js-compressed.js"></script>
    <script type="text/javascript" src="http://spatialreference.org/ref/epsg/31467/proj4js/"></script>
    <script src="proj4js/lib/google-v3.js"></script>
    <script defer="defer" type="text/javascript">
        var map;
        var untiled;
        var tiled;
        var pureCoverage = false;

        OpenLayers.DOTS_PER_INCH = 25.4 / 0.28;

        function init(){
            format = 'image/png';
            var options = {
                controls: [],
                projection: new OpenLayers.Projection("EPSG:900913"),
                //displayProjection: new OpenLayers.Projection('EPSG:900913'),
                maxExtent:new OpenLayers.Bounds(365975,6164432,399608,6186031),
                maxResolution: 78271.51695,
                units: 'm'
            map = new OpenLayers.Map('map', options);
            // setup tiled layer

                var gsat = new OpenLayers.Layer.Google(
                    "Google Satellite",
                    type: google.maps.MapTypeId.SATELLITE, 

                map.addControl(new OpenLayers.Control.LayerSwitcher());
                map.addControl(new OpenLayers.Control.LayerSwitcher());
                map.addControl(new OpenLayers.Control.PanZoomBar());
                zf= new OpenLayers.Control.ZoomToMaxExtent({title:"Zoom to max extent"});
                var panel= new OpenLayers.Control.Panel({defaultControl:zf});       
                map.addControl(new OpenLayers.Control.Navigation());
                map.addControl(new OpenLayers.Control.Scale($('scale')));

            layer2 = new OpenLayers.Layer.WMS( 

                    height: '600',
                    width: '800',
                    layers: 'Gr2LundKom:districts',
                    //srs: 'EPSG:3006',
                    styles: '',
                    format: format,
                    tiled: 'true',
                    transparent: 'true',                            
                    buffer: 0,
                    displayOutsideMaxExtent: true,
                    isBaseLayer: false

                map.setCenter(new OpenLayers.LonLat(386532, 6174701));
                map.zoomToExtent(new OpenLayers.Bounds(365975,6164432,399608,6186031));

<body onload="init()">
    Map viewer using Geoserver and MapLayers

        <div id="map">
        <div id="wrapper">
            <div id="location">location</div>
            <div id="scale">

        <div id="nodelist" >
            --> Click on the map to get feature info

this code is buggy, since I tried to test every possible solution. So maybe it is necessary to remove some parts. for instance, remove the Zoom levels part which is not really my problem.


1 Answer 1


You don't need to use Proj4js as OpenLayers will handle the re-projection for you. If you set the projection attribute of your layer to EPSG:3006, and set the map display projection to EPSG:900913 then it should all match up ok...fingers crossed.

This example might help.

  • I cleaned up my code and changed the projections as you suggested, but it does not work yet. the Google maps layer is not displayed anymore.
    – msc87
    Jan 17, 2013 at 17:57

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