0

I have just started looking into OpenLayers and I can't seem to even get the example provided to work. I just get a blank screen.

Am I missing something really obvious? Here's the HTML I am trying to run.

<html>
<head>
  <title>OpenLayers Example</title>
  <script src="http://openlayers.org/api/OpenLayers.js"></script>
</head>
<body>
    <div style="width:100%; height:100%" id="map"></div>
    <script defer="defer" type="text/javascript">
        var map = new OpenLayers.Map('map');
        var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
            "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
        map.addLayer(wms);
        map.zoomToMaxExtent();
    </script>
</body>
</html>
Improve this question
2
  • 1
    I can't reproduce the issue. Using the code that you have posted, the map shows up as expected, without any issues.
    – Devdatta Tengshe
    Commented Nov 12, 2013 at 3:06
  • Do you get any error messages in the error console? In Firefox under Extras -> Web-designer -> Error console
    – AndreJ
    Commented Nov 12, 2013 at 11:08

3 Answers 3

Reset to default
1

Yes, it has something to do with the width/height of the container. In fact, you must define the container's dimension to 100%. But you must do it for the body but also for the html block.

<html style="height:100%; width:100%">
    <body style="height:100%; width:100%">
         <div id="map" style="height:100%;width:100%">

It works but it's not a good practice to add style directly in html : How adding CSS to HTML

Improve this answer
0

Download OpenLayers.js and just run it next to your html, and change the script source to just 'OpenLayers.js':

"script src="OpenLayers.js"/script"

That should work ( I removed the brackets to stop it from formating, BTW)

Improve this answer
2
  • Hi, firstly thanks for assisting so quickly. I referencing the OpenLayers.js file locally as well (got the latest version). But still nothing is showing up, just a blank page. I think it's got to do something with the width/height of the container being set to 100%, I have changed it to 500px for both, and I at least get an image back now.
    – user23873
    Commented Nov 12, 2013 at 1:15
  • You can get code block formatting in gis.SE (or any stackexchange, I think) if you indent the text (see my edit)
    – BradHards
    Commented Nov 12, 2013 at 1:20
0

The DIV height-width issue is probably browser dependent. Chrome, FF, IE10 should all be well behaved. This sounds like an issue I've seen in older browsers.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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