Enhancing the mobile jQuery example, p=pgiraud,igorti,aabt

git-svn-id: http://svn.openlayers.org/trunk/openlayers@11514 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
2011-02-25 15:51:32 +00:00
parent 0e487a6d6b
commit 26d8f31c5d
8 changed files with 386 additions and 120 deletions
--- a/examples/img/locate.png
+++ b/examples/img/locate.png
--- a/examples/img/mobile-layers.png
+++ b/examples/img/mobile-layers.png
--- a/examples/img/mobile-loc.png
+++ b/examples/img/mobile-loc.png
--- a/examples/img/openlayers.png
+++ b/examples/img/openlayers.png
--- a/examples/mobile-jq.html
+++ b/examples/mobile-jq.html
@@ -1,8 +1,7 @@
 <!DOCTYPE html>
 <html>
    <head>
-    <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 http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title>OpenLayers with jQuery Mobile</title>
        <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">
@@ -10,134 +9,66 @@
        <script src="http://code.jquery.com/jquery-1.5.min.js"></script>
        <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>
+        <link rel="stylesheet" href="style.mobile-jq.css" type="text/css">
+        <script src="../lib/OpenLayers.js?mobile"></script>
        <script src="mobile-base.js"></script>
-        <style>
-            html {
-                height: 100%;
-            }
-            body {
-                margin: 0;
-                padding: 0;
-                height: 100%;
-            }
-            .ui-content {
-                padding: 0;
-            }
-            .ui-footer, .ui-header {
-                text-align: center;
-                padding: 5px 0;
-            }
-            #map {
-                width: 100%;
-                height: 100%;
-            }
-            .olControlAttribution {
-                font-size: 10px;
-                bottom: 5px;
-                right: 5px;
-            }
-            #title, #tags, #shortdesc {
-                display: none;
-            }
-        </style>
-        <script>
-            $(document).ready(function() {
-                // fix height of content to allow for header & footer
-                function fixContentHeight() {
-                    var header = $("div[data-role='header']:visible");
-                    var footer = $("div[data-role='footer']:visible");
-                    var content = $("div[data-role='content']:visible:visible");
-                    var viewHeight = $(window).height();
-
-                    var contentHeight = viewHeight - header.outerHeight() - footer.outerHeight();
-                    if ((content.outerHeight() + header.outerHeight() + footer.outerHeight()) !== viewHeight) {
-                        contentHeight -= (content.outerHeight() - content.height());
-                        content.height(contentHeight);
-                    }
-                    if (window.map) {
-                        map.updateSize();
-                    } else {
-                        // initialize map
-                        init();
-                    }
-                }
-                $(window).bind("orientationchange resize pageshow", fixContentHeight);
-                fixContentHeight();
-                
-                // add behavior to navigation buttons
-                $("#west").click(function() {
-                    pan(-0.25, 0);
-                });
-                $("#north").click(function() {
-                    pan(0, -0.25);
-                });
-                $("#south").click(function() {
-                    pan(0, 0.25);
-                });
-                $("#east").click(function() {
-                    pan(0.25, 0);
-                });
-                
-                // add behavior to drawing controls
-                function deactivateControls() {
-                    $.each(map.getControlsByClass(/DrawFeature/), function(index, control) {
-                        control.deactivate();
-                    });
-                    map.getControlsBy("id", "mod-control")[0].deactivate();
-                }
-                $("#nav, #point, #line, #poly, #mod").change(function(event) {
-                    deactivateControls();
-                    // jquery mobile bug regarding change makes us go through all inputs
-                    // https://github.com/jquery/jquery-mobile/issues/issue/1088
-                    var val = $("input:radio[name=controls]:checked").val();
-                    if (val !== "nav") {
-                        map.getControlsBy("id", val + "-control")[0].activate();
-                    }
-                });
-                
-                $("#nav").click();
-                $("#nav").click(); // jquery mobile bug forces 2 calls to refresh radio ui
-                
-            });
-
-        </script>
+        <script src="mobile-jq.js"></script>
    </head>
    <body>
        <h1 id="title">OpenLayers with jQuery Mobile</h1>
        <div id="tags">
-            mobile, jquery
+          mobile, jquery
        </div>
        <p id="shortdesc">
-            Using jQuery Mobile to display an OpenLayers map.
+          Using jQuery Mobile to display an OpenLayers map.
        </p>
-        <div data-role="page">
-            <div data-role="header">
-                <input id="west" type="button" data-icon="arrow-l" value="west">
-                <input id="north" type="button" data-icon="arrow-u" value="north">
-                <input id="south" type="button" data-icon="arrow-d" value="south">
-                <input id="east" type="button" data-icon="arrow-r" value="east">
-            </div>

-            <div data-role="content">
-                <div id="map"></div>
-            </div>
+        <div data-role="page" id="mappage">
+          <div data-role="content">
+            <div id="map"></div>
+          </div>

-            <div data-role="footer">
-                <form id="controls">
-                    <fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
-                        <input id="nav" type="radio" name="controls" value="nav" checked="checked">
-                        <label for="nav">navigate</label>
-                        <input id="point" type="radio" name="controls" value="point">
-                        <label for="point">point</label>
-                        <input id="line" type="radio" name="controls" value="line">
-                        <label for="line">line</label>
-                        <input id="poly" type="radio" name="controls" value="poly">
-                        <label for="poly">poly</label>
-                        <input id="mod" type="radio" name="controls" value="mod">
-                        <label for="mod">modify</label>
-                    </fieldset>
-                </form>
+          <div data-role="footer">
+            <a href="#searchpage" data-icon="search" data-role="button">Search</a>
+            <a href="#" id="locate" data-icon="locate" data-role="button">Locate</a>
+            <a href="#layerspage" data-icon="layers" data-role="button">Layers</a>
+          </div>
+          <div id="navigation" data-role="controlgroup" data-type="vertical">
+            <a href="#" data-role="button" data-icon="plus" id="plus"
+               data-iconpos="notext"></a>
+            <a href="#" data-role="button" data-icon="minus" id="minus"
+               data-iconpos="notext"></a>
+          </div>
+        </div>
+
+        <div data-role="page" id="searchpage">
+          <div data-role="header">
+            <h1>Search</h1>
+          </div>
+          <div data-role="fieldcontain">
+            <input type="search" name="query" id="query"
+                   value="" placeholder="Search for places"
+                   autocomplete="off"/>
+          </div>
+          <ul data-role="listview" data-inset="true" id="search_results"></ul> 
+        </div>
+
+        <div data-role="page" id="layerspage">
+          <div data-role="header">
+            <h1>Layers</h1>
+          </div>
+          <div data-role="content">
+            <ul data-role="listview" data-inset="true" data-theme="d" data-dividertheme="c" id="layerslist"> 
+          </div>
+        </div>
+
+        <div id="popup" data-role="dialog">
+            <div data-position="inline" data-theme="d" data-role="header">
+                <h1>Details</h1>
+            </div>
+            <div data-theme="c" data-role="content">
+                <ul id="details-list" data-role="listview">
+                </ul>
            </div>
        </div>
    </body>
--- a/examples/mobile-jq.js
+++ b/examples/mobile-jq.js
@@ -0,0 +1,213 @@
+var selectedFeature = null;
+
+$(document).ready(function() {
+
+    // Start with the map page
+    if (window.location.hash && window.location.hash!='#mappage') {
+        $.mobile.changePage('mappage');
+    }
+
+    // fix height of content
+    function fixContentHeight() {
+        var footer = $("div[data-role='footer']:visible"),
+        content = $("div[data-role='content']:visible:visible"),
+        viewHeight = $(window).height(),
+        contentHeight = viewHeight - footer.outerHeight();
+
+        if ((content.outerHeight() + footer.outerHeight()) !== viewHeight) {
+            contentHeight -= (content.outerHeight() - content.height());
+            content.height(contentHeight);
+        }
+        if (window.map) {
+            map.updateSize();
+        } else {
+            // initialize map
+            init();
+        }
+    }
+    $(window).bind("orientationchange resize pageshow", fixContentHeight);
+    fixContentHeight(); 
+    //init();
+
+    // Map zoom  
+    $("#plus").click(function(){
+        map.zoomIn();
+    });
+    $("#minus").click(function(){
+        map.zoomOut();
+    });
+    $("#locate").click(function(){
+        var control = map.getControlsBy("id", "locate-control")[0];
+        if (control.active) {
+            control.getCurrentLocation();
+        } else {
+            control.activate();
+        }
+    });
+
+    var sprintersLayer = new OpenLayers.Layer.Vector("Sprinters", {
+        styleMap: new OpenLayers.StyleMap({
+            externalGraphic : "img/mobile-loc.png",
+            graphicOpacity : 1.0,
+            graphicWith:16,
+            graphicHeight:26
+        })
+    });
+    
+    var sprinters = getFeatures();
+    sprintersLayer.addFeatures(sprinters);
+    
+    map.addLayer(sprintersLayer);
+    
+    var selectControl = new OpenLayers.Control.SelectFeature(sprintersLayer, {onSelect: function(feature){
+        selectedFeature = feature;
+        $.mobile.changePage($("#popup"), "pop");
+    }});
+    
+    map.addControl(selectControl);
+    selectControl.activate();
+    
+    $('div#popup').live('pageshow',function(event, ui){
+        var li = "";
+        for(var attr in selectedFeature.attributes){
+            li += "<li><div style='width:25%;float:left'>" + attr + "</div><div style='width:75%;float:right'>" 
+            + selectedFeature.attributes[attr] + "</div></li>";
+        }
+        $("ul#details-list").empty().append(li).listview("refresh");
+    });
+
+    $('#searchpage').live('pageshow',function(event, ui){
+        $('#query').bind('change', function(e){
+            $('#search_results').empty();
+            if ($('#query')[0].value === '') {
+                return;
+            }
+            $.mobile.pageLoading();
+
+            // Prevent form send
+            e.preventDefault();
+
+            var searchUrl = 'http://ws.geonames.org/searchJSON?featureClass=P&maxRows=10';
+            searchUrl += '&name_startsWith=' + $('#query')[0].value;
+            $.getJSON(searchUrl, function(data) {
+                $.each(data.geonames, function() {
+                    var place = this;
+                    $('<li>')
+                        .hide()
+                        .append($('<h2 />', {
+                            text: place.name
+                        }))
+                        .append($('<p />', {
+                            html: '<b>' + place.countryName + '</b> ' + place.fcodeName
+                        }))
+                        .appendTo('#search_results')
+                        .click(function() {
+                            $.mobile.changePage('mappage');
+                            var lonlat = new OpenLayers.LonLat(place.lng, place.lat);
+                            map.setCenter(lonlat.transform(gg, sm), 10);
+                        })
+                        .show();
+                });
+                $('#search_results').listview('refresh');
+                $.mobile.pageLoading(true);
+            });
+        });
+        // only listen to the first event triggered
+        $('#searchpage').die('pageshow', arguments.callee);
+    });
+
+    $('#layerslist').listview();
+    $('<li>', {
+            "data-role": "list-divider",
+            text: "Base Layers"
+        })
+        .appendTo('#layerslist');
+    var baseLayers = map.getLayersBy("isBaseLayer", true);
+    $.each(baseLayers, function() {
+        addLayerToList(this);
+    });
+
+    $('<li>', {
+            "data-role": "list-divider",
+            text: "Overlay Layers"
+        })
+        .appendTo('#layerslist');
+    var overlayLayers = map.getLayersBy("isBaseLayer", false);
+    $.each(overlayLayers, function() {
+        addLayerToList(this);
+    });
+    $('#layerslist').listview('refresh');
+    
+    map.events.register("addlayer", this, function(e) {
+        addLayerToList(e.layer);
+    });
+});
+
+function addLayerToList(layer) {
+    var item = $('<li>', {
+            "data-icon": "check",
+            "class": layer.visibility ? "checked" : ""
+        })
+        .append($('<a />', {
+            text: layer.name
+        })
+            .click(function() {
+                $.mobile.changePage('mappage');
+                if (layer.isBaseLayer) {
+                    layer.map.setBaseLayer(layer);
+                } else {
+                    layer.setVisibility(!layer.getVisibility());
+                }
+            })
+        )
+        .appendTo('#layerslist');
+    layer.events.on({
+        'visibilitychanged': function() {
+            $(item).toggleClass('checked');
+        }
+    });
+}
+
+function getFeatures(){
+    var features = {
+      "type": "FeatureCollection", 
+      "features": [
+            { "type": "Feature", "geometry": {"type": "Point", "coordinates": [1332700, 7906300]}, 
+            "properties": {"Name": "Igor Tihonov", "Country":"Sweden", "City":"Gothenburg"}},
+            { "type": "Feature", "geometry": {"type": "Point", "coordinates": [790300, 6573900]}, 
+            "properties": {"Name": "Marc Jansen", "Country":"Germany", "City":"Bonn"}},
+            { "type": "Feature", "geometry": {"type": "Point", "coordinates": [568600, 6817300]}, 
+            "properties": {"Name": "Bart van den Eijnden", "Country":"Netherlands", "City":"Utrecht"}},
+            { "type": "Feature", "geometry": {"type": "Point", "coordinates": [-7909900, 5215100]}, 
+            "properties": {"Name": "Christopher Schmidt", "Country":"United States of America", "City":"Boston"}},
+            { "type": "Feature", "geometry": {"type": "Point", "coordinates": [-937400, 5093200]}, 
+            "properties": {"Name": "Jorge Gustavo Rocha", "Country":"Portugal", "City":"Braga"}},
+            { "type": "Feature", "geometry": {"type": "Point", "coordinates": [-355300, 7547800]}, 
+            "properties": {"Name": "Jennie Fletcher ", "Country":"Scotland", "City":"Edinburgh"}},
+            { "type": "Feature", "geometry": {"type": "Point", "coordinates": [657068.53608487, 5712321.2472725]}, 
+            "properties": {"Name": "Bruno Binet ", "Country":"France", "City":"Chambéry"}},
+            { "type": "Feature", "geometry": {"type": "Point", "coordinates": [667250.8958124, 5668048.6072737]}, 
+            "properties": {"Name": "Eric Lemoine", "Country":"France", "City":"Theys"}},
+            { "type": "Feature", "geometry": {"type": "Point", "coordinates": [653518.03606319, 5721118.5122914]}, 
+            "properties": {"Name": "Antoine Abt", "Country":"France", "City":"La Motte Servolex"}},
+            { "type": "Feature", "geometry": {"type": "Point", "coordinates": [657985.78042416, 5711862.6251028]}, 
+            "properties": {"Name": "Pierre Giraud", "Country":"France", "City":"Chambéry"}},
+            { "type": "Feature", "geometry": {"type": "Point", "coordinates": [742941.93818208, 5861818.9477535]}, 
+            "properties": {"Name": "Stéphane Brunner", "Country":"Switzerland", "City":"Paudex"}},
+            { "type": "Feature", "geometry": {"type": "Point", "coordinates": [736082.61064069, 5908165.4649505]},
+            "properties": {"Name": "Frédéric Junod", "Country":"Switzerland", "City":"Montagny"}},
+            { "type": "Feature", "geometry": {"type": "Point", "coordinates": [771595.97057525, 5912284.7041793]},
+            "properties": {"Name": "Cédric Moullet", "Country":"Switzerland", "City":"Payerne"}},
+            { "type": "Feature", "geometry": {"type": "Point", "coordinates": [744205.23922364, 5861277.319748]},
+            "properties": {"Name": "Benoit Quartier", "Country":"Switzerland", "City":"Lutry"}},
+            { "type": "Feature", "geometry": {"type": "Point", "coordinates": [1717430.147101, 5954568.7127565]}, 
+            "properties": {"Name": "Andreas Hocevar", "Country":"Austria", "City":"Graz"}},
+            { "type": "Feature", "geometry": {"type": "Point", "coordinates": [-12362007.067301,5729082.2365672]}, 
+            "properties": {"Name": "Tim Schaub", "Country":"United States of America", "City":"Bozeman"}}
+       ]
+    };
+
+    var reader = new OpenLayers.Format.GeoJSON();
+    
+    return reader.read(features);
+}
--- a/examples/style.mobile-jq.css
+++ b/examples/style.mobile-jq.css
@@ -0,0 +1,120 @@
+html ,
+body {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+}
+.ui-content {
+    padding: 0;
+}
+.ui-footer {
+    text-align: center;
+    padding: 5px 0;
+}
+.portrait, .portrait #mappage {
+    min-height: 0;
+}
+/*.portrait, .portrait .ui-page{*/
+    /*min-height: 0;*/
+/*}*/
+#mappage, #mappage .ui-content, #map {
+    width: 100%;
+    height: 100%;
+}
+.olControlAttribution {
+    font-size: 10px;
+    bottom: 5px;
+    right: 5px;
+}
+#navigation {
+    position: absolute;
+    bottom: 70px;
+    left: 10px;
+    z-index: 1000;
+}
+#navigation .ui-btn-icon-notext {
+    display: block;
+    padding: 7px 6px 7px 8px;
+}
+#title, #tags, #shortdesc {
+    display: none;
+}
+.ui-icon-check {
+    opacity: 0.3;
+}
+.checked .ui-icon-check {
+    opacity: 1;
+}
+.ui-icon-locate {
+    background-image: url(img/locate.png);
+}
+.ui-icon-layers {
+    background-image: url(img/openlayers.png);
+}
+.ui-content .ui-listview-inset, #search_results {
+    margin: 1em;
+}
+.ui-content .ui-listview {
+    margin: 0px;
+}
+#details-list li{
+	padding:15px 10px;
+}
+html {
+    height: 100%;
+}
+body {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+}
+.ui-content {
+    padding: 0;
+}
+.ui-footer {
+    text-align: center;
+    padding: 5px 0;
+}
+#map {
+    width: 100%;
+    height: 100%;
+}
+.olControlAttribution {
+    font-size: 10px;
+    bottom: 5px;
+    right: 5px;
+}
+#navigation {
+    position: absolute;
+    bottom: 70px;
+    left: 10px;
+    z-index: 1000;
+}
+#navigation .ui-btn-icon-notext {
+    display: block;
+    padding: 7px 6px 7px 8px;
+}
+#title, #tags, #shortdesc {
+    display: none;
+}
+.ui-icon-check {
+    opacity: 0.3;
+}
+.checked .ui-icon-check {
+    opacity: 1;
+}
+.ui-icon-locate {
+    background-image: url(img/locate.png);
+}
+.ui-icon-layers {
+    background-image: url(img/openlayers.png);
+}
+.ui-content .ui-listview-inset, #search_results {
+    margin: 1em;
+}
+.ui-content .ui-listview {
+    margin: 0px;
+}
+#details-list li{
+	padding:15px 10px;
+}