ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update mobile example to use Zoom control. update build config file

Browse Source
This commit is contained in:
Antoine Abt
2012-03-06 21:23:52 +01:00
parent b2727c88f2
commit 23b0971c2f
5 changed files with 30 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
build/light.cfg
View File

@@ -13,7 +13,7 @@ OpenLayers/Layer/WMS.js
OpenLayers/Layer/Google/v3.js
OpenLayers/Popup/FramedCloud.js
OpenLayers/Control/Navigation.js
OpenLayers/Control/ZoomPanel.js
OpenLayers/Control/Zoom.js
OpenLayers/Control/Attribution.js
OpenLayers/Control/SelectFeature.js
OpenLayers/Control/Panel.js

2
build/mobile.cfg
View File

@@ -11,7 +11,7 @@ OpenLayers/Layer/Bing.js
OpenLayers/Layer/WMS.js
OpenLayers/Control/TouchNavigation.js
OpenLayers/Control/Geolocate.js
OpenLayers/Control/ZoomPanel.js
OpenLayers/Control/Zoom.js
OpenLayers/Control/Attribution.js
OpenLayers/Control/SelectFeature.js
OpenLayers/Control/DrawFeature.js

30
examples/mobile.html
View File

@@ -35,36 +35,6 @@
padding : 2px 4px;
border-radius : 5px 0 0 0;
}
div.olControlZoomPanel .olControlZoomInItemInactive,
div.olControlZoomPanel .olControlZoomOutItemInactive {
background: rgba(0,0,0,0.2);
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 : #fff;
line-height: 1em;
}
div.olControlZoomPanel .olControlZoomOutItemInactive:after{
content: '–';
line-height: 0.9em;
padding: 0 8px;
}
div.olControlZoomPanel .olControlZoomToMaxExtentItemInactive {
display: none;
}
#title, #tags, #shortdesc {
display: none;
}

2
examples/mobile.js
View File

@@ -26,7 +26,7 @@ var init = function () {
enableKinetic: true
}
}),
new OpenLayers.Control.ZoomPanel()
new OpenLayers.Control.Zoom()
],
layers: [
new OpenLayers.Layer.OSM("OpenStreetMap", null, {

52
examples/style.mobile.css
View File

@@ -1,31 +1,33 @@
div.olControlZoomPanel {
height: 108px;
width: 36px;
div.olControlZoom {
position: absolute;
top: 20px;
left: 20px;
top: 8px;
left: 8px;
}
div.olControlZoomPanel div {
width: 36px;
height: 36px;
background-image: url(img/mobile-zoombar.png);
left: 0;
div.olControlZoom a {
display: block;
margin: 1px;
padding: 0;
color: white;
font-size: 26px;
font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration: none;
text-align: center;
height: 32px;
width:32px;
line-height: 24px;
background: #666666; /* fallback for IE - IE6 requires background shorthand*/
background: rgba(0, 0, 0, 0.3);
filter: alpha(opacity=60);
}
div.olControlZoomPanel .olControlZoomInItemInactive {
top: 0;
background-position: 0 0;
div.olControlZoom a:hover {
background: #444444; /* fallback for IE */
background: rgba(0, 0, 0, 0.5);
filter: alpha(opacity=80);
}
div.olControlZoomPanel .olControlZoomToMaxExtentItemInactive {
top: 36px;
background-position: 0 -36px;
a.olControlZoomIn {
border-radius: 4px 4px 0 0;
}
div.olControlZoomPanel .olControlZoomOutItemInactive {
top: 72px;
background-position: 0 -72px;
}
.olTileImage {
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
-o-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
a.olControlZoomOut {
border-radius: 0 0 4px 4px;
}