3d62b67172
ol.overlay.Overlay can be used to bind DOM elements to a coordinate on the map. It has positioning options to support e.g. popups or image markers that have an anchor at the bottom and an unknown size. The overlayContainer stops propagation on mousedown and touchstart events, so clicks and gestures on overlays don't trigger any MapBrowserEvent. To make this work reliably, we now only fire dblclick in mapbrowserevent.js when there was a previous mousedown or touchstart. The default container for controls is now the overlayContainer.
235 lines
5.0 KiB
CSS
235 lines
5.0 KiB
CSS
.ol-viewport .ol-unselectable {
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-khtml-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
|
}
|
|
|
|
.ol-dragbox {
|
|
position: absolute;
|
|
border: 2px solid red;
|
|
}
|
|
|
|
.ol-zoom {
|
|
position: absolute;
|
|
top: 8px;
|
|
left: 8px;
|
|
background: rgba(255,255,255,0.4);
|
|
border-radius: 4px;
|
|
padding: 2px;
|
|
}
|
|
.ol-zoom a {
|
|
display: block;
|
|
margin: 1px;
|
|
padding: 0;
|
|
color: white;
|
|
font-size: 18px;
|
|
font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
text-align: center;
|
|
height: 22px;
|
|
width:22px;
|
|
line-height: 19px;
|
|
background: #130085; /* fallback for IE - IE6 requires background shorthand*/
|
|
background: rgba(0, 60, 136, 0.5);
|
|
filter: alpha(opacity=80);
|
|
}
|
|
.ol-zoom a:hover {
|
|
background: #130085; /* fallback for IE */
|
|
background: rgba(0, 60, 136, 0.7);
|
|
filter: alpha(opacity=100);
|
|
}
|
|
@media only screen and (max-width: 600px) {
|
|
.ol-zoom a:hover {
|
|
background: rgba(0, 60, 136, 0.5);
|
|
}
|
|
}
|
|
.ol-zoom-in {
|
|
border-radius: 4px 4px 0 0;
|
|
}
|
|
.ol-zoom-out {
|
|
border-radius: 0 0 4px 4px;
|
|
}
|
|
|
|
.ol-renderer-webgl-canvas { width:100%; height:100%; }
|
|
|
|
.olTile {
|
|
-webkit-transition: opacity 0.2s linear;
|
|
-moz-transition: opacity 0.2s linear;
|
|
-o-transition: opacity 0.2s linear;
|
|
transition: opacity 0.2s linear;
|
|
}
|
|
|
|
/**
|
|
* arrow implementation from http://cssarrowplease.com/ for ol-popup
|
|
*/
|
|
|
|
.ol-popup {
|
|
position: absolute;
|
|
background: #88b7d5;
|
|
border: 4px solid #c2e1f5;
|
|
}
|
|
|
|
/**
|
|
* FIXME
|
|
*/
|
|
.ol-popup-close {
|
|
background: url("img/close.gif") no-repeat;
|
|
cursor: pointer;
|
|
position: absolute;
|
|
width: 17px;
|
|
height: 17px;
|
|
right: 0;
|
|
}
|
|
.ol-popup-top {}
|
|
.ol-popup-top:after, .ol-popup-top:before {
|
|
bottom: 100%;
|
|
border: solid transparent;
|
|
content: " ";
|
|
height: 0;
|
|
width: 0;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
}
|
|
.ol-popup-top:after {
|
|
border-bottom-color: #88b7d5;
|
|
border-width: 30px;
|
|
left: 50%;
|
|
margin-left: -30px;
|
|
}
|
|
.ol-popup-top:before {
|
|
border-bottom-color: #c2e1f5;
|
|
border-width: 36px;
|
|
left: 50%;
|
|
margin-left: -36px;
|
|
}
|
|
.ol-popup-bottom {}
|
|
.ol-popup-bottom:after, .ol-popup-bottom:before {
|
|
top: 100%;
|
|
border: solid transparent;
|
|
content: " ";
|
|
height: 0;
|
|
width: 0;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
}
|
|
.ol-popup-bottom:after {
|
|
border-top-color: #88b7d5;
|
|
border-width: 30px;
|
|
left: 50%;
|
|
margin-left: -30px;
|
|
}
|
|
.ol-popup-bottom:before {
|
|
border-top-color: #c2e1f5;
|
|
border-width: 36px;
|
|
left: 50%;
|
|
margin-left: -36px;
|
|
}
|
|
.ol-popup-right {}
|
|
.ol-popup-right:after, .ol-popup-right:before {
|
|
left: 100%;
|
|
border: solid transparent;
|
|
content: " ";
|
|
height: 0;
|
|
width: 0;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
}
|
|
.ol-popup-right:after {
|
|
border-left-color: #88b7d5;
|
|
border-width: 30px;
|
|
top: 50%;
|
|
margin-top: -30px;
|
|
}
|
|
.ol-popup-right:before {
|
|
border-left-color: #c2e1f5;
|
|
border-width: 36px;
|
|
top: 50%;
|
|
margin-top: -36px;
|
|
}
|
|
.ol-popup-left {}
|
|
.ol-popup-left:after, .ol-popup-left:before {
|
|
right: 100%;
|
|
border: solid transparent;
|
|
content: " ";
|
|
height: 0;
|
|
width: 0;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
}
|
|
.ol-popup-left:after {
|
|
border-right-color: #88b7d5;
|
|
border-width: 30px;
|
|
top: 50%;
|
|
margin-top: -30px;
|
|
}
|
|
.ol-popup-left:before {
|
|
border-right-color: #c2e1f5;
|
|
border-width: 36px;
|
|
top: 50%;
|
|
margin-top: -36px;
|
|
}
|
|
|
|
.ol-control-zoom {
|
|
position: absolute;
|
|
top: 8px;
|
|
left: 8px;
|
|
background: rgba(255,255,255,0.4);
|
|
border-radius: 4px;
|
|
padding: 2px;
|
|
}
|
|
.ol-control-zoom a {
|
|
display: block;
|
|
margin: 1px;
|
|
padding: 0;
|
|
color: white;
|
|
font-size: 18px;
|
|
font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
text-align: center;
|
|
height: 22px;
|
|
width:22px;
|
|
line-height: 19px;
|
|
background: #130085; /* fallback for IE - IE6 requires background shorthand*/
|
|
background: rgba(0, 60, 136, 0.5);
|
|
filter: alpha(opacity=80);
|
|
}
|
|
.ol-control-zoom a:hover {
|
|
background: #130085; /* fallback for IE */
|
|
background: rgba(0, 60, 136, 0.7);
|
|
filter: alpha(opacity=100);
|
|
}
|
|
@media only screen and (max-width: 600px) {
|
|
.ol-control-zoom a:hover {
|
|
background: rgba(0, 60, 136, 0.5);
|
|
}
|
|
}
|
|
.ol-control-zoom-in {
|
|
border-radius: 4px 4px 0 0;
|
|
}
|
|
.ol-control-zoom-out {
|
|
border-radius: 0 0 4px 4px;
|
|
}
|
|
.ol-control-attribution {
|
|
position: absolute;
|
|
font-size: 10px;
|
|
text-align: right;
|
|
color: #eeeeee;
|
|
bottom: 0;
|
|
right: 0;
|
|
background: #130085; /* fallback for IE - IE6 requires background shorthand*/
|
|
background: rgba(0, 60, 136, 0.3);
|
|
filter: alpha(opacity=30);
|
|
font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
|
|
padding: 2px 4px;
|
|
}
|
|
.ol-control-attribution a {
|
|
color: white;
|
|
text-decoration: none;
|
|
}
|