794440750c
Uses the WMTS server of the ogdwien open data initiative of the City of Vienna. Shows how to build a fullscreen map that works well on both mobile and desktop clients. With lightweight permalinks and Geolocate control.
160 lines
3.9 KiB
CSS
160 lines
3.9 KiB
CSS
html, body, #map {
|
||
margin: 0;
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
#map {
|
||
cursor: move;
|
||
}
|
||
#title, #tags, #shortdesc {
|
||
display: none;
|
||
}
|
||
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;
|
||
} |