[OpenLayers-Commits] r11844 - trunk/openlayers/examples
commits-20090109 at openlayers.org
commits-20090109 at openlayers.org
Thu Mar 31 10:32:58 EDT 2011
Author: erilem
Date: 2011-03-31 07:32:54 -0700 (Thu, 31 Mar 2011)
New Revision: 11844
Added:
trunk/openlayers/examples/mobile-layers.html
trunk/openlayers/examples/mobile-layers.js
Log:
add mobile-layers example, demonstrating that data from various layer/format types can be displayed on mobile, p=cmoullet, r=me (closes #3223)
Added: trunk/openlayers/examples/mobile-layers.html
===================================================================
--- trunk/openlayers/examples/mobile-layers.html (rev 0)
+++ trunk/openlayers/examples/mobile-layers.html 2011-03-31 14:32:54 UTC (rev 11844)
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>OpenLayers Mobile Layers</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">
+ <script src="../lib/OpenLayers.js"></script>
+ <script src="mobile-layers.js"></script>
+ <style>
+ html, body {
+ margin: 0;
+ padding: 0;
+ height: 100%;
+ width: 100%;
+ }
+
+ @media only screen and (max-width: 600px) {
+ html, body {
+ height: 117%;
+ }
+ }
+
+ #map {
+ width: 100%;
+ position: relative;
+ height: 100%;
+ }
+
+ .olControlAttribution {
+ 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;
+ }
+ </style>
+</head>
+<body>
+<h1 id="title">Mobile example with various layer types</h1>
+
+<div id="tags">
+ mobile, WMS, WFS, KML
+</div>
+<p id="shortdesc">
+ A mobile example displaying various layer types: WMS, WFS, KML.
+</p>
+
+<div id="map"></div>
+<script>
+ init();
+</script>
+</body>
+</html>
Added: trunk/openlayers/examples/mobile-layers.js
===================================================================
--- trunk/openlayers/examples/mobile-layers.js (rev 0)
+++ trunk/openlayers/examples/mobile-layers.js 2011-03-31 14:32:54 UTC (rev 11844)
@@ -0,0 +1,72 @@
+// initialize map when page ready
+var map;
+
+// 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);
+
+// allow testing of specific renderers via "?renderer=Canvas", etc
+var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
+renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
+
+OpenLayers.ProxyHost = "proxy.cgi?url=";
+
+function init() {
+
+ map = new OpenLayers.Map({
+ div: "map",
+ theme: null,
+ controls: [
+ new OpenLayers.Control.Attribution(),
+ new OpenLayers.Control.TouchNavigation({
+ dragPanOptions: {
+ interval: 100,
+ enableKinetic: true
+ }
+ }),
+ new OpenLayers.Control.ZoomPanel()
+ ]
+ });
+
+ var wms = new OpenLayers.Layer.WMS("OpenLayers WMS",
+ "http://vmap0.tiles.osgeo.org/wms/vmap0",
+ {layers: 'basic'},
+ {isBaseLayer: true, transitionEffect: 'resize'}
+ )
+
+ var kml = new OpenLayers.Layer.Vector("KML", {
+ projection: map.displayProjection,
+ strategies: [new OpenLayers.Strategy.Fixed()],
+ protocol: new OpenLayers.Protocol.HTTP({
+ url: "kml/sundials.kml",
+ format: new OpenLayers.Format.KML({
+ extractStyles: true,
+ extractAttributes: true
+ })
+ }),
+ renderers: renderer
+ });
+
+ var wfs = new OpenLayers.Layer.Vector("States", {
+ strategies: [new OpenLayers.Strategy.Fixed()],
+ protocol: new OpenLayers.Protocol.WFS({
+ url: "http://demo.opengeo.org/geoserver/wfs",
+ featureType: "states",
+ featureNS: "http://www.openplans.org/topp"
+ }),
+ renderers: renderer
+ });
+
+ map.addLayers([wms, wfs, kml]);
+
+ map.setCenter(new OpenLayers.LonLat(-104, 42), 3);
+};
More information about the Commits
mailing list