libs/js/jquery-geo-1.0a4/docs/examples/jqm.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta charset="utf-8">
   5   <title>TEMPLATE example</title>
   6   <meta name="HandheldFriendly" content="True">
   7   <meta name="MobileOptimized" content="320">
   8   <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
   9   <meta name="description" content="An example of TEMPLATE">
  10   <meta name="author" content="Ryan Westphal">
  11   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
  12   <link rel="stylesheet" type="text/css" href="css/style.css" />
  13   <style type="text/css">
  14     #mapTab
  15     {
  16       min-height: 99%;
  17     }
  18
  19     #map
  20     {
  21       position: absolute;
  22       left: 0;
  23       top: 0;
  24       right: 0;
  25       bottom: 0;
  26     }
  27   </style>
  28 </head>
  29 <body>
  30   <div id="app" data-role="page">
  31     <div data-role="header">
  32       <h1><span data-text="DisplayName">Amherst</span></h1>
  33     </div>
  34
  35     <div data-role="content">
  36       <div class="have-mapTabs">
  37         <p>Which map would you like?</p>
  38         <ul data-role="listview" data-inset="true">
  39           <li><a href="#mapTab" data-map-tab="{&quot;MapTabID&quot;:&quot;ParcelMap&quot;,&quot;DisplayName&quot;:&quot;Parcel Map&quot;}">Parcel Map</a></li>
  40           <li><a href="#mapTab" data-map-tab="{&quot;MapTabID&quot;:&quot;ZoningMap&quot;,&quot;DisplayName&quot;:&quot;Zoning Map&quot;}">Zoning Map</a></li>
  41         </ul>
  42       </div>
  43     </div>
  44   </div>
  45
  46   <div id="mapTab" data-role="page" data-fullscreen="true">
  47     <div data-role="header" data-position="fixed">
  48       <h1><span data-text="DisplayName">Parcel App</span></h1>
  49       <a href="#app" data-role="button" data-icon="arrow-d" data-iconpos="notext" data-transition="slidedown" class="mapTab-switch ui-btn-right">Select Tab</a>
  50     </div>
  51
  52     <div data-role="content">
  53       <div id="map">
  54       </div>
  55     </div>
  56
  57
  58     <div data-role="footer" data-position="fixed">
  59       <p>&nbsp;</p>
  60     </div>
  61   </div>
  62   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  63   <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
  64   <script>
  65   (function() {
  66     var mapTab = window.sessionStorage.getItem("mapTab") || null,
  67         map = null,
  68         bbox = window.sessionStorage.getItem("bbox") || null;
  69
  70     if (mapTab) {
  71       mapTab = JSON.parse(mapTab);
  72     }
  73
  74     $("#app").delegate("a", "click", function() {
  75       mapTab = $(this).data("mapTab");
  76       window.sessionStorage.setItem("mapTab", JSON.stringify(mapTab));
  77     });
  78
  79     $("#mapTab").bind("pageinit", function() {
  80       $.mobile.fixedToolbars.setTouchToggleEnabled(false);
  81     });
  82
  83     $("#mapTab").bind("pagebeforeshow", function() {
  84       $("#mapTab [data-text='DisplayName']").text(mapTab.DisplayName);
  85       $("title").text(mapTab.DisplayName);
  86     });
  87
  88     $( document ).bind( "pagechange", function(e, mobile) {
  89       if ( $(mobile.toPage).is("#mapTab") ) {
  90         $.geo.proj = null;
  91
  92         // create a map
  93         if ( map == null ) {
  94           map = $("#map").geomap({
  95             tilingScheme: null,
  96             bboxMax: [ 372440,2935595,396368,2985633 ],
  97             bbox: bbox ? JSON.parse(bbox) : [ 372440,2935595,396368,2985633 ],
  98             services: [{
  99               id: "gpv",
 100               type: "shingled",
 101               src: function(view) {
 102                 var mapState = {
 103                       Application: "ParcelApp",
 104                       MapTab: mapTab.MapTabID,
 105                       Extent: {
 106                         bbox: view.bbox
 107                       }
 108                     };
 109
 110                 return "http://alpha.appgeo.com/GPV/Services/MapImage.ashx?m=GetMapImage&state=" + JSON.stringify(mapState) + "&width=" + view.width + "&height=" + view.height;
 111               }
 112             }],
 113             bboxchange: function(e, geo) {
 114               bbox = "[" + geo.bbox.toString() + "]";
 115               window.sessionStorage.setItem("bbox", bbox);
 116             }
 117           });
 118         } else {
 119           map.geomap( "resize" );
 120         }
 121       }
 122     });
 123
 124     /*
 125     $("#mapTab").bind("pagebeforehide", function() {
 126       if (map) {
 127         map.geomap("destroy");
 128         map = null;
 129       }
 130     });
 131     */
 132   })();
 133   </script>
 134
 135   <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
 136 </body>
 137 </html>