postrunner 0.0.3 → 0.0.4

data/misc/openlayers/examples/mobile-sencha.js

@@ -0,0 +1,198 @@
+Ext.ns('App');
+
+/**
+ * The model for the geonames records used in the search
+ */
+Ext.regModel('Geonames', {
+    fields: ['countryName', 'toponymName', 'name', 'lat', 'lng']
+});
+
+/**
+ * Custom class for the Search 
+ */
+App.SearchFormPopupPanel = Ext.extend(Ext.Panel, {
+    map: null,
+    floating: true,
+    modal: true,
+    centered: true,
+    hideOnMaskTap: true,
+    width: Ext.is.Phone ? undefined : 400,
+    height: Ext.is.Phone ? undefined : 400,
+    scroll: false,
+    layout: 'fit',
+    fullscreen: Ext.is.Phone ? true : undefined,
+    url: 'http://ws.geonames.org/searchJSON?',
+    errorText: 'Sorry, we had problems communicating with geonames.org. Please try again.',
+    errorTitle: 'Communication error',
+    maxResults: 6,
+    featureClass: "P",
+    
+    createStore: function(){
+        this.store = new Ext.data.Store({
+            model: 'Geonames',
+            proxy: {
+                type: 'scripttag',
+                timeout: 5000,
+                listeners: {
+                    exception: function(){
+                        this.hide();
+                        Ext.Msg.alert(this.errorTitle, this.errorText, Ext.emptyFn);
+                    },
+                    scope: this
+                },
+                url: this.url,
+                reader: {
+                    type: 'json',
+                    root: 'geonames'
+                }
+            }
+        });
+    },
+    
+    doSearch: function(searchfield, evt){
+        var q = searchfield.getValue();
+        this.store.load({
+            params: {
+                featureClass: this.featureClass,
+                maxRows: this.maxResults,
+                name_startsWith: encodeURIComponent(q)
+            }
+        });
+    },
+    
+    onItemTap: function(dataView, index, item, event){
+        var record = this.store.getAt(index);
+        var lon = record.get('lng');
+        var lat = record.get('lat');
+        var lonlat = new OpenLayers.LonLat(lon, lat);
+        map.setCenter(lonlat.transform(gg, sm), 12);
+        this.hide("pop");
+    },
+    
+    initComponent: function(){
+        this.createStore();
+        this.resultList = new Ext.List({
+            scroll: 'vertical',
+            cls: 'searchList',
+            loadingText: "Searching ...",
+            store: this.store,
+            itemTpl: '<div>{name} ({countryName})</div>',
+            listeners: {
+                itemtap: this.onItemTap,
+                scope: this
+            }
+        });
+        this.formContainer = new Ext.form.FormPanel({
+            scroll: false,
+            items: [{
+                xtype: 'button',
+                cls: 'close-btn',
+                ui: 'decline-small',
+                text: 'Close',
+                handler: function(){
+                    this.hide();
+                },
+                scope: this 
+            }, {
+                xtype: 'fieldset',
+                scroll: false,
+                title: 'Search for a place',
+                items: [{
+                    xtype: 'searchfield',
+                    label: 'Search',
+                    placeHolder: 'placename',
+                    listeners: {
+                        action: this.doSearch,
+                        scope: this
+                    }
+                },
+                    this.resultList
+                ]
+            }]
+        });
+        this.items = [{
+            xtype: 'panel',
+            layout: 'fit',
+            items: [this.formContainer]
+        }];
+        App.SearchFormPopupPanel.superclass.initComponent.call(this);
+    }
+});
+
+App.LayerList = Ext.extend(Ext.List, {
+    
+    map: null,
+    
+    createStore: function(){
+        Ext.regModel('Layer', {
+            fields: ['id', 'name', 'visibility', 'zindex']
+        });
+        var data = [];
+        Ext.each(this.map.layers, function(layer){
+            if (layer.displayInLayerSwitcher === true) {
+                var visibility = layer.isBaseLayer ? (this.map.baseLayer == layer) : layer.getVisibility();
+                data.push({
+                    id: layer.id,
+                    name: layer.name,
+                    visibility: visibility,
+                    zindex: layer.getZIndex()
+                });
+            }
+        });
+        return new Ext.data.Store({
+            model: 'Layer',
+            sorters: 'zindex',
+            data: data
+        });
+    },
+    
+    initComponent: function(){
+        this.store = this.createStore();
+        this.itemTpl = new Ext.XTemplate(
+            '<tpl if="visibility == true">', 
+                '<img width="20" src="img/check-round-green.png">', 
+            '</tpl>', 
+            '<tpl if="visibility == false">', 
+                '<img width="20" src="img/check-round-grey.png">', 
+            '</tpl>', 
+            '<span class="gx-layer-item">{name}</span>'
+        );
+        this.listeners = {
+            itemtap: function(dataview, index, item, e){
+                var record = dataview.getStore().getAt(index);
+                var layer = this.map.getLayersBy("id", record.get("id"))[0];
+                if (layer.isBaseLayer) {
+                    this.map.setBaseLayer(layer);
+                }
+                else {
+                    layer.setVisibility(!layer.getVisibility());
+                }
+                record.set("visibility", layer.getVisibility());
+            }
+        };
+        this.map.events.on({
+            "changelayer": this.onChangeLayer,
+            scope: this
+        });
+        App.LayerList.superclass.initComponent.call(this);
+    },
+
+    findLayerRecord: function(layer){
+        var found;
+        this.store.each(function(record){
+            if (record.get("id") === layer.id) {
+                found = record;
+            }
+        }, this);
+        return found;
+    },
+    
+    onChangeLayer: function(evt){
+        if (evt.property == "visibility") {
+            var record = this.findLayerRecord(evt.layer);
+            record.set("visibility", evt.layer.getVisibility());
+        }
+    }
+    
+});
+Ext.reg('app_layerlist', App.LayerList);

data/misc/openlayers/examples/mobile-wmts-vienna.css

@@ -0,0 +1,205 @@
+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;
+}

data/misc/openlayers/examples/mobile-wmts-vienna.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>City of Vienna WMTS with REST Encoding and Geolocate</title>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
+        <link rel="stylesheet" href="mobile-wmts-vienna.css" type="text/css">
+    </head>
+    <body>
+        <h1 id="title">City of Vienna WMTS for Desktop and Mobile Devices</h1>
+        <div id="tags">
+            mobile, vienna, ogdwien, rest, restful, wmts, geolocate, permalink
+        </div>
+        <p id="shortdesc">
+            A full-screen map for both desktop and mobile devices. Uses
+            language dependent CSS content and the WMTSCapabilities format to
+            retrieve layers from the ogdwien open data initiative of the City
+            of Vienna. Also has a lightweight custom anchor permalink
+            functionality and uses the Geolocate control.
+        </p>
+        <div id="map"></div>
+        <script src="../lib/OpenLayers.js"></script>
+        <script src="mobile-wmts-vienna.js"></script>
+    </body>
+</html>