419cb272c7
Using the new defaults, we don't need to pass options to the Navigation control anymore. As a side effect, we get ZoomBox, but need to add css for it to work properly. For users outside Vienna, an OSM fallback layer was added which gets activated when the viewport does not intersect Vienna.
203 lines
5.0 KiB
CSS
203 lines
5.0 KiB
CSS
html, body, #map {
|
||
margin: 0;
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
#map {
|
||
cursor: move;
|
||
background-color: #CCCCCC;
|
||
/* no highlighting of the map area when tapping the map on touch devices */
|
||
-webkit-tap-highlight-color: transparent;
|
||
}
|
||
#title, #tags, #shortdesc {
|
||
display: none;
|
||
}
|
||
|
||
/* Turn on GPU support where available */
|
||
.olTileImage {
|
||
-webkit-transform: translateZ(0);
|
||
-moz-transform: translateZ(0);
|
||
-o-transform: translateZ(0);
|
||
-ms-transform: translateZ(0);
|
||
transform: translateZ(0);
|
||
-webkit-backface-visibility: hidden;
|
||
-moz-backface-visibility: hidden;
|
||
-ms-backface-visibility: hidden;
|
||
backface-visibility: hidden;
|
||
-webkit-perspective: 1000;
|
||
-moz-perspective: 1000;
|
||
-ms-perspective: 1000;
|
||
perspective: 1000;
|
||
}
|
||
|
||
/* Tile fade animation */
|
||
.olLayerGrid .olTileImage {
|
||
-webkit-transition: opacity 0.2s linear;
|
||
-moz-transition: opacity 0.2s linear;
|
||
-o-transition: opacity 0.2s linear;
|
||
transition: opacity 0.2s linear;
|
||
}
|
||
|
||
/* Zoom Box */
|
||
.olHandlerBoxZoomBox {
|
||
border: 2px solid red;
|
||
position: absolute;
|
||
background-color: white;
|
||
opacity: 0.50;
|
||
font-size: 1px;
|
||
filter: alpha(opacity=50);
|
||
}
|
||
.olDrawBox {
|
||
cursor: crosshair;
|
||
}
|
||
|
||
div.olControlAttribution {
|
||
position: absolute;
|
||
font-size: 10px;
|
||
text-align: right;
|
||
color: #BFEFFF;
|
||
bottom: 0;
|
||
right: 0;
|
||
background: rgba(0,0,100,0.2);
|
||
font-family: Arial, Helvetica, sans-serif;
|
||
font-weight: bold;
|
||
padding: 2px 4px;
|
||
border-radius: 5px 0 0 0;
|
||
}
|
||
.olControlAttribution a {
|
||
font-weight: bold;
|
||
color: #BFEFFF;
|
||
text-decoration: none;
|
||
}
|
||
div.olControlZoomPanel {
|
||
height: 108px;
|
||
width: 36px;
|
||
position: absolute;
|
||
top: 20px;
|
||
left: inherit;
|
||
right: 20px;
|
||
}
|
||
div.olControlZoomPanel div {
|
||
cursor: pointer;
|
||
width: 36px;
|
||
height: 36px;
|
||
left: 0;
|
||
background-color: #ccc;
|
||
background-image: none;
|
||
}
|
||
div.olControlZoomPanel .olControlZoomInItemInactive,
|
||
div.olControlZoomPanel .olControlZoomOutItemInactive {
|
||
top: 0;
|
||
background: rgba(0,0,100,0.4);
|
||
position: absolute;
|
||
}
|
||
div.olControlZoomPanel .olControlZoomInItemInactive {
|
||
border-radius: 5px 5px 0 0;
|
||
}
|
||
div.olControlZoomPanel .olControlZoomOutItemInactive {
|
||
border-radius: 0 0 5px 5px;
|
||
top: 37px;
|
||
}
|
||
div.olControlZoomPanel .olControlZoomOutItemInactive:after,
|
||
div.olControlZoomPanel .olControlZoomInItemInactive:after {
|
||
font-weight: bold;
|
||
content: '+';
|
||
font-size: 36px;
|
||
padding: 7px;
|
||
z-index: 2000;
|
||
color: #BFEFFF;
|
||
line-height: 1em;
|
||
}
|
||
div.olControlZoomPanel .olControlZoomOutItemInactive:after {
|
||
content: '–';
|
||
line-height: 0.9em;
|
||
padding: 0 8px;
|
||
}
|
||
div.olControlZoomPanel .olControlZoomToMaxExtentItemInactive {
|
||
display: none;
|
||
}
|
||
div.olControlZoomPanel div.olControlGeolocateItemInactive,
|
||
div.olControlZoomPanel div.olControlGeolocateItemActive {
|
||
position: absolute;
|
||
right: 20px;
|
||
top: 98px;
|
||
border-radius: 5px 5px 5px 5px;
|
||
background: #ccc url(img/locate.png) center no-repeat;
|
||
background-color: rgba(0,0,100,0.4);
|
||
}
|
||
div.olControlZoomPanel div.olControlGeolocateItemActive {
|
||
background-color: rgba(0,0,100,0.2);
|
||
}
|
||
div.olControlGeolocateItemInactive:after {
|
||
font-weight: bold;
|
||
font-size: 36px;
|
||
padding: 7px;
|
||
z-index: 2000;
|
||
color: #BFEFFF;
|
||
line-height: 1em;
|
||
background: none;
|
||
}
|
||
.layerPanel {
|
||
position: absolute;
|
||
top: 20px;
|
||
right: 82px;
|
||
}
|
||
div.layerPanel div {
|
||
display: inline;
|
||
margin-left: 5px;
|
||
cursor: pointer;
|
||
}
|
||
div.layerPanel div:after {
|
||
font-weight: bold;
|
||
font-size: 18px;
|
||
font-family: arial;
|
||
padding: 8px;
|
||
color: #BFEFFF;
|
||
line-height: 36px;
|
||
border-radius: 5px 5px 5px 5px;
|
||
background-color: #ccc;
|
||
background: rgba(0,0,100,0.4);
|
||
}
|
||
div.layerPanel div.labelButtonItemInactive:after,
|
||
div.layerPanel div.labelButtonItemActive:after {
|
||
content: 'Labels';
|
||
}
|
||
:lang(de) div.layerPanel div.labelButtonItemInactive:after,
|
||
:lang(de) div.layerPanel div.labelButtonItemActive:after {
|
||
content: 'Text';
|
||
}
|
||
div.layerPanel div.labelButtonItemActive:after {
|
||
text-decoration: underline;
|
||
background: rgba(0,0,100,0.2);
|
||
}
|
||
div.layerPanel div.aerialButtonItemInactive:after,
|
||
div.layerPanel div.aerialButtonItemActive:after {
|
||
content: 'Aerial';
|
||
border-radius: 5px 0 0 5px;
|
||
}
|
||
:lang(de) div.layerPanel div.aerialButtonItemInactive:after,
|
||
:lang(de) div.layerPanel div.aerialButtonItemActive:after {
|
||
content: 'Luftbild';
|
||
}
|
||
div.layerPanel div.aerialButtonItemActive:after {
|
||
text-decoration: underline;
|
||
background: rgba(0,0,100,0.2);
|
||
}
|
||
div.layerPanel div.mapButtonItemInactive:after,
|
||
div.layerPanel div.mapButtonItemActive:after {
|
||
content: 'Map';
|
||
border-radius: 0 5px 5px 0;
|
||
}
|
||
:lang(de) div.layerPanel div.mapButtonItemInactive:after,
|
||
:lang(de) div.layerPanel div.mapButtonItemActive:after {
|
||
content: 'Karte';
|
||
}
|
||
div.layerPanel div.mapButtonItemActive:after {
|
||
text-decoration: underline;
|
||
background: rgba(0,0,100,0.2);
|
||
}
|
||
div.layerPanel div.mapButtonItemInactive,
|
||
div.layerPanel div.mapButtonItemActive {
|
||
margin-left: 1px;
|
||
}
|