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.
105 lines
2.8 KiB
HTML
105 lines
2.8 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;
|
|
}
|
|
}
|
|
.overlay {
|
|
display: none;
|
|
font-size: 10pt;
|
|
}
|
|
.ol-overlaycontainer .overlay {
|
|
display: block;
|
|
}
|
|
#vienna {
|
|
text-decoration: none;
|
|
color: white;
|
|
font-size: 11pt;
|
|
font-weight: bold;
|
|
text-shadow: black 0.1em 0.1em 0.2em;
|
|
}
|
|
#popup {
|
|
width: 200px;
|
|
margin-left: -107px;
|
|
margin-bottom: 12px;
|
|
border-radius: 5px;
|
|
padding: 5px;
|
|
}
|
|
|
|
/* Popup CSS generated with http://cssarrowplease.com/ */
|
|
|
|
.arrow_box {
|
|
position: relative;
|
|
background: #88b7d5;
|
|
border: 2px solid #c2e1f5;
|
|
}
|
|
.arrow_box:after, .arrow_box:before {
|
|
top: 100%;
|
|
border: solid transparent;
|
|
content: " ";
|
|
height: 0;
|
|
width: 0;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.arrow_box:after {
|
|
border-color: rgba(136, 183, 213, 0);
|
|
border-top-color: #88b7d5;
|
|
border-width: 10px;
|
|
left: 50%;
|
|
margin-left: -10px;
|
|
}
|
|
.arrow_box:before {
|
|
border-color: rgba(194, 225, 245, 0);
|
|
border-top-color: #c2e1f5;
|
|
border-width: 13px;
|
|
left: 50%;
|
|
margin-left: -13px;
|
|
}
|
|
</style>
|
|
<title>Overlay example</title>
|
|
</head>
|
|
<body>
|
|
<div id="map">
|
|
<!-- Clickable label for Vienna -->
|
|
<a class="overlay" id="vienna" target="_blank" href="http://en.wikipedia.org/wiki/Vienna">Vienna</a>
|
|
<!-- Popup -->
|
|
<div class="overlay arrow_box" id="popup"></div>
|
|
<div id="text">
|
|
<h1 id="title">Overlay example</h1>
|
|
<div id="shortdesc">Demonstrates Overlays.</div>
|
|
<div id="docs">
|
|
<p>See the
|
|
<a href="overlay-and-popup.js" target="_blank">overlay-and-popup.js source</a>
|
|
to see how this is done.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="tags">overlay, popup, mapquest, openaerial</div>
|
|
<script src="loader.js?id=overlay-and-popup" type="text/javascript"></script>
|
|
</body>
|
|
</html>
|