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.

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"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
    <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 {
            float:left;
            font-family: Arial, Verdana, sans-serif; 
            font-size: 12px; 
            color: #483D8B;
            background-color: white;
        }
        #nodelist{
            font-family: Arial, Verdana, sans-serif; 
            font-size: 14px; 
            color: #000000;
            font-style: normal;
            background-color: white;
        }
    </style>
    <!-- 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,
                numZoomLevels:15,
                units: 'm'
            };
            map = new OpenLayers.Map('map', options);
            // setup tiled layer

                var gsat = new OpenLayers.Layer.Google(
                    "Google Satellite",
                    {
                    type: google.maps.MapTypeId.SATELLITE, 
                    numZoomLevels:15, 
                    sphericalMercator:true

                    }
                );
                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});       
                panel.addControls([zf]);
                map.addControl(panel);
                map.addControl(new OpenLayers.Control.Navigation());
                map.addControl(new OpenLayers.Control.Scale($('scale')));


            layer2 = new OpenLayers.Layer.WMS( 
                "Gr2LundKom:districts","http://gisl.nateko.lu.se:8080/geoserver/wms", 
                {

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

                map.addLayers([gsat,layer2]);
                map.setCenter(new OpenLayers.LonLat(386532, 6174701));
                map.zoomToExtent(new OpenLayers.Bounds(365975,6164432,399608,6186031));
        }

    </script>
    </head>     
<body onload="init()">
    Map viewer using Geoserver and MapLayers
    <br><br>


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

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

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.

share|improve this question

marked as duplicate by iant, Aragon, Devdatta Tengshe, R.K., MappaGnosis Feb 5 '13 at 8:07

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

add comment

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.

share|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
add comment

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