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.

  <title>OpenLayers Example</title>
  <script src="http://openlayers.org/api/OpenLayers.js"></script>
    <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'} );
  • 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 Nov 12 '13 at 3:06
  • Do you get any error messages in the error console? In Firefox under Extras -> Web-designer -> Error console – AndreJ Nov 12 '13 at 11:08

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


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)

  • 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 Nov 12 '13 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 Nov 12 '13 at 1:20

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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