9cdc991b8c
Using the same technique as Leaflet, this relays MSPointer events to touch events. Using the simulator, I can verify that even pinch-zoom works with this change, but the visual experience is a bit jumpy. Would be great if people could test this on physical touch devices and see how it looks/feels there.
206 lines
5.1 KiB
CSS
206 lines
5.1 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;
|
||
}
|
||
div.olMapViewport {
|
||
-ms-touch-action: 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;
|
||
}
|