New WMTS GetCapabilities & RESTful example.
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.
This commit is contained in:
ahocevar
@@ -0,0 +1,160 @@
|
||||
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;
|
||||
}
|
||||
Reference in New Issue
Block a user