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.


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.

| improve this answer | |
  • 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 '13 at 17:57

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