7ce79207e3
The text div is now placed in the top-right corner of the page. This is to avoid overlapping with the attribution div. On screens that are smaller that 600px the text div is not deplayed at all.
48 lines
1.4 KiB
HTML
48 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
|
<link rel="stylesheet" href="style.css" type="text/css">
|
|
<style type="text/css">
|
|
html, body, #map {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
#text {
|
|
position: absolute;
|
|
top: 8px;
|
|
right: 8px;
|
|
z-index: 20000;
|
|
background-color: white;
|
|
padding: 0 0.5em 0.5em 0.5em;
|
|
border-radius: 4px;
|
|
}
|
|
@media only screen and (max-width: 600px) {
|
|
#text {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|
|
<title>Full-screen example</title>
|
|
</head>
|
|
<body>
|
|
<div id="map">
|
|
<div id="text">
|
|
<h1 id="title">Full-screen example</h1>
|
|
<div id="shortdesc">Example of a full-screen map.</div>
|
|
<div id="docs">
|
|
<p>See the
|
|
<a href="full-screen.js" target="_blank">full-screen.js source</a>
|
|
to see how this is done.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="tags">fullscreen, mapquest, openaerial, tile, tilelayer</div>
|
|
<script src="loader.js?id=full-screen" type="text/javascript"></script>
|
|
</body>
|
|
</html>
|