[OpenLayers-Commits] r11496 - trunk/openlayers/examples
commits-20090109 at openlayers.org
commits-20090109 at openlayers.org
Fri Feb 25 08:45:20 EST 2011
Author: pgiraud
Date: 2011-02-25 05:45:19 -0800 (Fri, 25 Feb 2011)
New Revision: 11496
Added:
trunk/openlayers/examples/mobile-base.js
Modified:
trunk/openlayers/examples/mobile-jq.html
trunk/openlayers/examples/mobile-sencha.html
trunk/openlayers/examples/mobile.html
trunk/openlayers/examples/mobile.js
Log:
Fixing different things in the mobile aware examples:
- css styling for the zoom panel control,
- creating a new mobile-base.js file shared by sencha and jq examples,
- (re-)simplyfing mobile.js
Added: trunk/openlayers/examples/mobile-base.js
===================================================================
--- trunk/openlayers/examples/mobile-base.js (rev 0)
+++ trunk/openlayers/examples/mobile-base.js 2011-02-25 13:45:19 UTC (rev 11496)
@@ -0,0 +1,108 @@
+// API key for http://openlayers.org. Please get your own at
+// http://bingmapsportal.com/ and use that instead.
+var apiKey = "AqTGBsziZHIJYYxgivLBf0hVdrAk9mWO5cQcb8Yux8sW5M8c8opEC2lZqKR1ZZXf";
+
+// initialize map when page ready
+var map;
+var gg = new OpenLayers.Projection("EPSG:4326");
+var sm = new OpenLayers.Projection("EPSG:900913");
+
+var init = function () {
+
+ var vector = new OpenLayers.Layer.Vector("Vector Layer", {});
+
+ var geolocate = new OpenLayers.Control.Geolocate({
+ id: 'locate-control',
+ geolocationOptions: {
+ enableHighAccuracy: false,
+ maximumAge: 0,
+ timeout: 7000
+ }
+ });
+ // create map
+ map = new OpenLayers.Map({
+ div: "map",
+ theme: null,
+ projection: sm,
+ units: "m",
+ numZoomLevels: 18,
+ maxResolution: 156543.0339,
+ maxExtent: new OpenLayers.Bounds(
+ -20037508.34, -20037508.34, 20037508.34, 20037508.34
+ ),
+ controls: [
+ new OpenLayers.Control.Attribution(),
+ new OpenLayers.Control.TouchNavigation({
+ dragPanOptions: {
+ interval: 0, // non-zero kills performance on some mobile phones
+ enableKinetic: true
+ }
+ }),
+ geolocate
+ ],
+ layers: [
+ new OpenLayers.Layer.OSM("OpenStreetMap", null, {
+ transitionEffect: 'resize'
+ }),
+ new OpenLayers.Layer.Bing({
+ key: apiKey,
+ type: "Road",
+ // custom metadata parameter to request the new map style - only useful
+ // before May 1st, 2011
+ metadataParams: {
+ mapVersion: "v1"
+ },
+ name: "Bing Road",
+ transitionEffect: 'resize'
+ }),
+ new OpenLayers.Layer.Bing({
+ key: apiKey,
+ type: "Aerial",
+ name: "Bing Aerial",
+ transitionEffect: 'resize'
+ }),
+ new OpenLayers.Layer.Bing({
+ key: apiKey,
+ type: "AerialWithLabels",
+ name: "Bing Aerial + Labels",
+ transitionEffect: 'resize'
+ }),
+ vector
+ ]
+ });
+ map.zoomToMaxExtent();
+
+ var style = {
+ fillOpacity: 0.1,
+ fillColor: '#000',
+ strokeColor: '#f00',
+ strokeOpacity: 0.6
+ };
+ geolocate.events.register("locationupdated",this,function(e) {
+ vector.removeAllFeatures();
+ vector.addFeatures([
+ new OpenLayers.Feature.Vector(
+ e.point,
+ {},
+ {
+ graphicName: 'cross',
+ strokeColor: '#f00',
+ strokeWidth: 2,
+ fillOpacity: 0,
+ pointRadius: 10
+ }
+ ),
+ new OpenLayers.Feature.Vector(
+ OpenLayers.Geometry.Polygon.createRegularPolygon(
+ new OpenLayers.Geometry.Point(e.point.x, e.point.y),
+ e.position.coords.accuracy/2,
+ 50,
+ 0
+ ),
+ {},
+ style
+ )
+ ]);
+ map.zoomToExtent(vector.getDataExtent());
+ });
+};
Modified: trunk/openlayers/examples/mobile-jq.html
===================================================================
--- trunk/openlayers/examples/mobile-jq.html 2011-02-25 13:43:36 UTC (rev 11495)
+++ trunk/openlayers/examples/mobile-jq.html 2011-02-25 13:45:19 UTC (rev 11496)
@@ -11,7 +11,7 @@
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
<link rel="stylesheet" href="style.mobile.css" type="text/css">
<script src="../lib/OpenLayers.js"></script>
- <script src="mobile.js"></script>
+ <script src="mobile-base.js"></script>
<style>
html {
height: 100%;
Modified: trunk/openlayers/examples/mobile-sencha.html
===================================================================
--- trunk/openlayers/examples/mobile-sencha.html 2011-02-25 13:43:36 UTC (rev 11495)
+++ trunk/openlayers/examples/mobile-sencha.html 2011-02-25 13:45:19 UTC (rev 11496)
@@ -10,7 +10,7 @@
<link rel="stylesheet" href="http://dev.sencha.com/deploy/touch/resources/css/sencha-touch.css">
<script src="http://dev.sencha.com/deploy/touch/sencha-touch.js"></script>
<script src="mobile-sencha.js"></script>
- <script src="mobile.js"></script>
+ <script src="mobile-base.js"></script>
<style>
.searchList {
min-height: 150px;
Modified: trunk/openlayers/examples/mobile.html
===================================================================
--- trunk/openlayers/examples/mobile.html 2011-02-25 13:43:36 UTC (rev 11495)
+++ trunk/openlayers/examples/mobile.html 2011-02-25 13:45:19 UTC (rev 11496)
@@ -2,6 +2,7 @@
<html>
<head>
<title>OpenLayers Mobile</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0;">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="style.mobile.css" type="text/css">
@@ -9,20 +10,61 @@
<script src="mobile.js"></script>
<style>
html, body {
- margin: 0;
- padding: 0;
- height: 100%;
+ margin : 0;
+ padding : 0;
+ height : 100%;
+ width : 100%;
}
+ @media only screen and (max-width: 600px) {
+ html, body {
+ height : 117%;
+ }
+ }
#map {
- position: relative;
- width: 100%;
- height: 100%;
+ width : 100%;
+ position : relative;
+ height : 100%;
}
.olControlAttribution {
- font-size: 10px;
- bottom: 5px;
- right: 5px;
+ position : absolute;
+ font-size : 10px;
+ bottom : 0 !important;
+ right : 0 !important;
+ background : rgba(0,0,0,0.1);
+ font-family : Arial;
+ 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;
}
Modified: trunk/openlayers/examples/mobile.js
===================================================================
--- trunk/openlayers/examples/mobile.js 2011-02-25 13:43:36 UTC (rev 11495)
+++ trunk/openlayers/examples/mobile.js 2011-02-25 13:45:19 UTC (rev 11496)
@@ -1,34 +1,24 @@
-// API key for http://openlayers.org. Please get your own at
-// http://bingmapsportal.com/ and use that instead.
-var apiKey = "AqTGBsziZHIJYYxgivLBf0hVdrAk9mWO5cQcb8Yux8sW5M8c8opEC2lZqKR1ZZXf";
-
// initialize map when page ready
var map;
-var gg = new OpenLayers.Projection("EPSG:4326");
-var sm = new OpenLayers.Projection("EPSG:900913");
-var init = function () {
- var vector = new OpenLayers.Layer.Vector("Vector Layer", {});
-
- var geolocate = new OpenLayers.Control.Geolocate({
- id: 'locate-control',
- geolocationOptions: {
- enableHighAccuracy: false,
- maximumAge: 0,
- timeout: 7000
+// Get rid of address bar on iphone/ipod
+var fixSize = function() {
+ window.scrollTo(0,0);
+ document.body.style.height = '100%';
+ if (!(/(iphone|ipod)/.test(navigator.userAgent.toLowerCase()))) {
+ if (document.body.parentNode) {
+ document.body.parentNode.style.height = '100%';
}
- });
+ }
+};
+setTimeout(fixSize, 700);
+setTimeout(fixSize, 1500);
+
+var init = function () {
// create map
map = new OpenLayers.Map({
div: "map",
theme: null,
- projection: sm,
- units: "m",
- numZoomLevels: 18,
- maxResolution: 156543.0339,
- maxExtent: new OpenLayers.Bounds(
- -20037508.34, -20037508.34, 20037508.34, 20037508.34
- ),
controls: [
new OpenLayers.Control.Attribution(),
new OpenLayers.Control.TouchNavigation({
@@ -37,71 +27,14 @@
enableKinetic: true
}
}),
- geolocate
+ new OpenLayers.Control.ZoomPanel()
],
layers: [
new OpenLayers.Layer.OSM("OpenStreetMap", null, {
transitionEffect: 'resize'
- }),
- new OpenLayers.Layer.Bing({
- key: apiKey,
- type: "Road",
- // custom metadata parameter to request the new map style - only useful
- // before May 1st, 2011
- metadataParams: {
- mapVersion: "v1"
- },
- name: "Bing Road",
- transitionEffect: 'resize'
- }),
- new OpenLayers.Layer.Bing({
- key: apiKey,
- type: "Aerial",
- name: "Bing Aerial",
- transitionEffect: 'resize'
- }),
- new OpenLayers.Layer.Bing({
- key: apiKey,
- type: "AerialWithLabels",
- name: "Bing Aerial + Labels",
- transitionEffect: 'resize'
- }),
- vector
- ]
+ })
+ ],
+ center: new OpenLayers.LonLat(742000, 5861000),
+ zoom: 3
});
- map.zoomToMaxExtent();
-
- var style = {
- fillOpacity: 0.1,
- fillColor: '#000',
- strokeColor: '#f00',
- strokeOpacity: 0.6
- };
- geolocate.events.register("locationupdated",this,function(e) {
- vector.removeAllFeatures();
- vector.addFeatures([
- new OpenLayers.Feature.Vector(
- e.point,
- {},
- {
- graphicName: 'cross',
- strokeColor: '#f00',
- strokeWidth: 2,
- fillOpacity: 0,
- pointRadius: 10
- }
- ),
- new OpenLayers.Feature.Vector(
- OpenLayers.Geometry.Polygon.createRegularPolygon(
- new OpenLayers.Geometry.Point(e.point.x, e.point.y),
- e.position.coords.accuracy/2,
- 50,
- 0
- ),
- {},
- style
- )
- ]);
- map.zoomToExtent(vector.getDataExtent());
- });
};
More information about the Commits
mailing list