OpenLayers Hello World Example Doesn't Work With HTML5?
Question
I am trying to get started with using a map API on my website. I originally was looking openstreetmap but quickly realized apparently I need to be using openlayers if I want a map displayed. I am still fuzzy on the relationship between these two so I will tag them both. I am simply trying to get a hello world example going.
OpenLayers has this page to walk you through your first implementation. The getting started page states to use the following code for your first example:
<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>
This code doesn't work if you declare your page as html5. As soon as you add this header the example stops working:
<!DOCTYPE html>
<meta charset='utf-8'>
I don't understand why this would be. The page is pretty simplistic and unfortunately I don't know enough about html5 and openlayers to know what the issue might be but have narrowed down what the problem is. Can anyone explain what the solution is and why?
1 answers
solution1
7 ACCPTED 2013-04-23 16:17:05
Just add this to the <head> section:
<style>html, head, body { width: 100%; height: 100% }</style>
The problem is that in standards mode, the elements default to being only as big as the elements that they contain. The <div> with width and height 100% winds up being 100% of nothing; so the map has no size. Ensuring that all of the elements back up to the <html> element are 100% of their containers means that they will actually fill the display, rather than having no size.
Note that technically, it's only the height that is 0; the width of the elements defaults the width of the containing element (and the viewport for the top-level <html> element), while the height of the elements depends on the height of their children. A height of 100%, when the parents don't have a height specified, instead winds up just being treated as a height of auto , which means base it on the height of its children. Since it has no children, the height winds up being 0.
If you want way more details, check out the CSS Visual Formatting Model specification. Adding the HTML5 doctype (or any of a number of other doctypes, though the precise list varies between browsers), puts the browser into standards mode, in which they attempt to follow the CSS specification as closely as possible. Without it, you are working in quirks mode, in which various browsers implement various non-standard behaviors (mostly based on how older browsers, like Netscape 4 or IE 5.5 worked). Here's a description of how percentage heights work in quirks mode, based on how Netscape 4 implemented them. Here's a list of various behaviors that change in quirks mode on various browsers, and here's Mozilla's list of how quirks mode varies in Gecko (the engine behind Firefox).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.