Search code examples
javascripthtmlcssthymeleafopenlayers

OpenLayers with HTML <!DOCTYPE> Declaration NOT WORKING

I have this Thymeleaf template that does not show the map. It only show the map when I delete <!DOCTYPE HTML>

  <!DOCTYPE HTML>
<html>
<head>
  <title>OpenLayers 2 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>
Solution

  • Make sure your body has a dimension, e.g. by adding the following css:

    html, body: {
  width: 100%;
  height: 100%;
  margin: 0;
}