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.

I'm trying to acesses with OpenLayers code an example of the embedded GeoServer map (the map of tasmania), which acts as a local server on my machine. However, every time I open the .html, the map appears blank.

Below is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <link rel="stylesheet" href="/theme/default/style.css" type="text/css" />
    <style type="text/css">
        body {
            margin: 1em;
        }
        #map {
            width: 500px;
            height: 375px;
            border: 1px solid black;
        }
    </style>
  <script src="openlayers/OpenLayers.js"></script>
  <script type="text/javascript">
        var lon = 5;
        var lat = 40;
        var zoom = 5;
        var map, layer;

        function init()
        {
            map = new OpenLayers.Map( 'map' );
            layer = new OpenLayers.Layer.WMS("State", 
                "http://localhost:8080/geoserver/wms",
                {
                    workspace: 'topp',
                    layers: 'tasmania_state_boundaries',
                    format: 'image/png'
                }
            );

            map.addLayer(layer);

            map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
            map.addControl(new OpenLayers.Control.LayerSwitcher() );
        }
    </script>
  </head>
<body onload="init()">
    <h1 id="title">WMS Example</h1>

    <div id="tags">
        wms, layer, singletile
    </div>
    <p id="shortdesc">
        Shows the basic use of openlayers using a WMS layer
    </p>

    <div id="map" class="smallmap"></div>

    <div id="docs">
        <p>This is an example of how to add an WMS layer to the OpenLayers
        window. The images are tiled in this instance. If you wanted to not use
        a tiled WMS, "singleTile" option to true like shown in this example.</p>
    </div>
  </body>
</html>

Did I forget any detail? The form of access to GeoServer is correct?

share|improve this question
    
Though you are using mapping technology here, I think at heart, your question is more programming related. Would it be more appropriate to have it at Stackoverflow? –  Get Spatial Sep 19 '13 at 9:06
2  
This question appears to be off-topic because it is about programming as opposed to actual GIS methods or concepts. –  Get Spatial Sep 19 '13 at 9:08
1  
The 'programming' problem appears to be an issue with the bounding box / map center coordinates--appropriate for this site. –  mkennedy Sep 19 '13 at 20:40
    
Yes, this was the problem! :) –  Islon Sep 25 '13 at 14:22
add comment

1 Answer

I found the answer! :D

Below is the javascript code:

<script type="text/javascript">
        var map, layer;

        function init()
        {
            map = new OpenLayers.Map( 'map' );
            layer = new OpenLayers.Layer.WMS("State", 
                "http://localhost:8080/geoserver/topp/wms?",
                {
                    workspace: 'topp',
                    layers: 'tasmania_state_boundaries', 
                    format: 'image/png'
                },
                {
                    buffer: 0,
                    ratio: 1.9,
                    displayOutsideMaxExtent: true
                }
            );

            map.addLayer(layer);
            map.addControl(new OpenLayers.Control.LayerSwitcher());
            map.zoomToExtent(
                new OpenLayers.Bounds(145.51045,-44.0,149.0,-40.5)
            );
        }
    </script>

I hope this can help people with the same question as me. :)

share|improve this answer
    
I was about to comment on the Q that the lon and lat values didn't make sense for Tasmania! –  mkennedy Sep 19 '13 at 20:39
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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