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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <title>tiled services test</title>
   5   <link rel="stylesheet" type="text/css" href="css/style.css" />
   6   <style type="text/css">
   7     label
   8     {
   9       display: block;
  10       margin: .25em;
  11     }
  12     label span
  13     {
  14       display: inline-block;
  15       font-weight: bold;
  16       width: 8em;
  17     }
  18   </style>
  19 </head>
  20 <body>
  21   <div>
  22     <a href="../" class="docLink">&lt; docs</a>
  23     <h1>tiled services test</h1>
  24
  25     <p>This page tests initializing geomap with different services that support the same tilingScheme.</p>
  26
  27     <p>
  28       So long as all services support the current tiling scheme, they are interchangeabe without worrying about the tilingScheme property.</p>
  29     <p>
  30       Dynamic services can be layered on top of tiled services as they don't require a tilingScheme at all, however you have to make sure the map units match, e.g., the dynamic service accepts a geodetic (lon/lat) bounding box or you set $.proj to null and work entirely in a specific projection's map units.</p>
  31     <h2>
  32       service examples</h2>
  33     <p>
  34       Choose a services array and click <b>set via init</b> to refresh the page and re-initialize the map (including center &amp; zoom properties) or <b>set via property</b> to change only the services property at runtime.</p>
  35     <form action="tiledservices.html" method="get">
  36     <fieldset>
  37       <label>
  38         <input type="radio" name="initService" value="defaultOsm" />
  39         default OSM
  40       </label>
  41       <pre><code>[
  42   {
  43     id: &quot;OSM&quot;,
  44     type: &quot;tiled&quot;,
  45     src: function (view) {
  46       return &quot;http://tile.openstreetmap.org/&quot;
  47        + view.zoom + &quot;/&quot;
  48        + view.tile.column + &quot;/&quot;
  49        + view.tile.row
  50        + &quot;.png&quot;;
  51     },
  52     attr: &quot;&copy; OpenStreetMap &amp; contributors, CC-BY-SA&quot;
  53   }
  54 ]</code></pre>
  55       <label>
  56         <input type="radio" name="initService" value="mapquestOsm" />
  57         MapQuest OSM
  58       </label>
  59       <pre><code>[
  60   {
  61     id: &quot;OSM_MapQuest&quot;,
  62     type: &quot;tiled&quot;,
  63     src: function (view) {
  64       return &quot;http://otile&quot; + ((view.index % 4) + 1) + &quot;.mqcdn.com/tiles/1.0.0/osm/&quot;
  65        + view.zoom + &quot;/&quot;
  66        + view.tile.column + &quot;/&quot;
  67        + view.tile.row
  68        + &quot;.png&quot;;
  69     },
  70     attr: &quot;Tiles Courtesy of &lt;a href='http://www.mapquest.com/' target='_blank'&gt;MapQuest&lt;/a&gt; &lt;img src='http://developer.mapquest.com/content/osm/mq_logo.png'&gt;&quot;
  71   }
  72 ]</code></pre>
  73       <label>
  74         <input type="radio" name="initService" value="mapquestOrtho" />
  75         MapQuest Open Ortho
  76       </label>
  77       <pre><code>[
  78   {
  79     id: &quot;Ortho_MapQuest&quot;,
  80     type: &quot;tiled&quot;,
  81     src: function (view) {
  82       return &quot;http://oatile&quot; + ((view.index % 4) + 1) + &quot;.mqcdn.com/naip/&quot;
  83        + view.zoom + &quot;/&quot;
  84        + view.tile.column + &quot;/&quot;
  85        + view.tile.row
  86        + &quot;.png&quot;;
  87     },
  88     attr: &quot;Tiles Courtesy of &lt;a href='http://www.mapquest.com/' target='_blank'&gt;MapQuest&lt;/a&gt; &lt;img src='http://developer.mapquest.com/content/osm/mq_logo.png'&gt;&quot;
  89   }
  90 ]</code></pre>
  91       <label>
  92         <input type="radio" name="initService" value="mapquestAll" />
  93         MapQuest Open Ortho + MapQuest OSM at 30% opacity
  94       </label>
  95       <pre><code>[
  96   {
  97     id: &quot;Ortho_MapQuest&quot;,
  98     type: &quot;tiled&quot;,
  99     src: function (view) {
 100       return &quot;http://oatile&quot; + ((view.index % 4) + 1) + &quot;.mqcdn.com/naip/&quot;
 101        + view.zoom + &quot;/&quot;
 102        + view.tile.column + &quot;/&quot;
 103        + view.tile.row
 104        + &quot;.png&quot;;
 105     },
 106     attr: &quot;Tiles Courtesy of &lt;a href='http://www.mapquest.com/' target='_blank'&gt;MapQuest&lt;/a&gt; &lt;img src='http://developer.mapquest.com/content/osm/mq_logo.png'&gt;&quot;
 107   },
 108   {
 109     id: &quot;OSM_MapQuest&quot;,
 110     type: &quot;tiled&quot;,
 111     src: function (view) {
 112       return &quot;http://otile&quot; + ((view.index % 4) + 1) + &quot;.mqcdn.com/tiles/1.0.0/osm/&quot;
 113        + view.zoom + &quot;/&quot;
 114        + view.tile.column + &quot;/&quot;
 115        + view.tile.row
 116        + &quot;.png&quot;;
 117     },
 118     style: { opacity: .3 }
 119   }
 120 ]</code></pre>
 121     </fieldset>
 122     <button type="submit">
 123       set via init</button>
 124     <button type="button">
 125       set via property</button>
 126     </form>
 127     <div id="map" style="position: relative; width: 480px; height: 320px; background: #e88;">
 128     </div>
 129   </div>
 130   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 131   <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
 132   <script>
 133     $(function () {
 134
 135       var selectionOptions = {
 136         defaultOsm: {
 137           services: [
 138             {
 139               id: "OSM",
 140               type: "tiled",
 141               src: function (view) {
 142                 return "http://tile.openstreetmap.org/" + view.zoom + "/" + view.tile.column + "/" + view.tile.row + ".png";
 143               },
 144               attr: "&copy; OpenStreetMap &amp; contributors, CC-BY-SA"
 145             }
 146           ],
 147           center: [-71, 42],
 148           zoom: 7
 149         },
 150
 151         mapquestOsm: {
 152           services: [
 153             {
 154               id: "OSM_MapQuest",
 155               type: "tiled",
 156               src: function (view) {
 157                 return "http://otile" + ((view.index % 4) + 1) + ".mqcdn.com/tiles/1.0.0/osm/" + view.zoom + "/" + view.tile.column + "/" + view.tile.row + ".png";
 158               },
 159               attr: "Tiles Courtesy of <a href='http://www.mapquest.com/' target='_blank'>MapQuest</a> <img src='http://developer.mapquest.com/content/osm/mq_logo.png'>"
 160             }
 161           ],
 162           center: [-71, 42],
 163           zoom: 7
 164         },
 165
 166         mapquestOrtho: {
 167           services: [
 168             {
 169               id: "Ortho_MapQuest",
 170               type: "tiled",
 171               src: function (view) {
 172                 return "http://oatile" + ((view.index % 4) + 1) + ".mqcdn.com/naip/" + view.zoom + "/" + view.tile.column + "/" + view.tile.row + ".png";
 173               },
 174               attr: "Tiles Courtesy of <a href='http://www.mapquest.com/' target='_blank'>MapQuest</a> <img src='http://developer.mapquest.com/content/osm/mq_logo.png'>"
 175             }
 176           ],
 177           center: [-71, 42],
 178           zoom: 7
 179         },
 180
 181         mapquestAll: {
 182           services: [
 183             {
 184               id: "Ortho_MapQuest",
 185               type: "tiled",
 186               src: function (view) {
 187                 return "http://oatile" + ((view.index % 4) + 1) + ".mqcdn.com/naip/" + view.zoom + "/" + view.tile.column + "/" + view.tile.row + ".png";
 188               },
 189               attr: "Tiles Courtesy of <a href='http://www.mapquest.com/' target='_blank'>MapQuest</a> <img src='http://developer.mapquest.com/content/osm/mq_logo.png'>"
 190             },
 191             {
 192               id: "OSM_MapQuest",
 193               type: "tiled",
 194               src: function (view) {
 195                 return "http://otile" + ((view.index % 4) + 1) + ".mqcdn.com/tiles/1.0.0/osm/" + view.zoom + "/" + view.tile.column + "/" + view.tile.row + ".png";
 196               },
 197               style: { opacity: .3 }
 198             }
 199           ],
 200           center: [-71, 42],
 201           zoom: 7
 202         }
 203       };
 204
 205
 206       var
 207       search = window.location.search,
 208       searchParts = search.length && search[0] == "?" ? search.slice(1).split("&") : null,
 209       initService = "defaultOsm",
 210       serviceChanged = false;
 211
 212       if (searchParts) {
 213         $.each(searchParts, function () {
 214           var kvp = this.split("=");
 215           switch (kvp[0]) {
 216             case "initService":
 217               initService = kvp[1];
 218               serviceChanged = true;
 219               break;
 220           }
 221         });
 222       }
 223
 224       $("input[value='" + initService + "']").click();
 225
 226       $("button[type='button']").click(function () {
 227         initService = $("input[name='initService']:checked").val();
 228         $("#map").geomap("option", "services", selectionOptions[initService].services);
 229       });
 230
 231       if (serviceChanged) {
 232         window.scrollTo(0, $(document).height());
 233       }
 234
 235       $("#map").geomap(selectionOptions[initService]);
 236     });
 237   </script>
 238 </body>
 239 </html>