libs/js/jquery-geo-1.0b2/docs/examples/tilingScheme.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <title>tilingScheme 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>
  24       tilingScheme test</h1>
  25     <p>
  26       This page tests initializing geomap with services requiring different tilingSchemes.</p>
  27     <p>
  28       Dynamic services are not yet implemented but will be able to be layered on top of tiled services as they don't require a tilingScheme at all.</p>
  29     <p>
  30       For this example, I have set $.geo.proj to null and am setting the center in real map units. This is because the second service, New Jersey, is not in web mercator and geomap does not provide a built-in conversion from lon/lat.</p>
  31     <p>
  32       The New Jersey service is a tiled service with an ArcGIS Server REST endpoint. The level stops of an ArcGIS Server tile cache are often not a power of two and therefore cannot be calculated. We list them all out by using the pixelSizes property of the tilingScheme instead of specifying basePixelSize and levels properties.</p>
  33     <h2>
  34       examples</h2>
  35     <p>
  36       Choose a service/tilingScheme combo and click <b>set</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>
  37     <form action="tilingScheme.html" method="get">
  38     <fieldset>
  39       <label>
  40         <input type="radio" name="initService" value="defaultOsm" />
  41         default OSM (web mercator via hosted images)
  42       </label>
  43       <pre><code>services: [
  44   {
  45     id: &quot;OSM&quot;,
  46     type: &quot;tiled&quot;,
  47     src: function (view) {
  48       return &quot;http://tile.openstreetmap.org/&quot;
  49        + view.zoom + &quot;/&quot;
  50        + view.tile.column + &quot;/&quot;
  51        + view.tile.row
  52        + &quot;.png&quot;;
  53     },
  54     attr: &quot;&copy; OpenStreetMap &amp; contributors, CC-BY-SA&quot;
  55   }
  56 ],
  57 tilingScheme: {
  58   tileWidth: 256,
  59   tileHeight: 256,
  60   levels: 18,
  61   basePixelSize: 156543.03392799936,
  62   origin: [-20037508.342787, 20037508.342787]
  63 }</code></pre>
  64       <label>
  65         <input type="radio" name="initService" value="newjersey" />
  66         New Jersey (NAD83 / New Jersey (ft US); ESPG 3424 via ArcGIS Server REST API)
  67       </label>
  68       <pre><code>services: [
  69   {
  70     id: &quot;NewJersey&quot;,
  71     type: &quot;tiled&quot;,
  72     src: function (view) {
  73       return &quot;http://njgin.state.nj.us/ArcGIS/rest/services/Basemap/basemap/MapServer/tile/&quot;
  74        + view.zoom + &quot;/&quot;
  75        + view.tile.row + &quot;/&quot;
  76        + view.tile.column;
  77     }
  78   }
  79 ],
  80 tilingScheme: {
  81   tileWidth: 512,
  82   tileHeight: 512,
  83   pixelSizes: [
  84     3472.22222222222,
  85     2604.16666666667,
  86     2170.13888888889,
  87     1562.5,
  88     976.5625,
  89     494.791666666667,
  90     260.416666666667,
  91     130.208333333333,
  92     65.1041666666667,
  93     32.5520833333333,
  94     21.7013888888889,
  95     10.8506944444444,
  96     5.20833333333333,
  97     2.08333333333333,
  98     1.04166666666667
  99   ],
 100   origin: [-842000, 1440000]
 101 }</code></pre>
 102     </fieldset>
 103     <button type="submit">
 104       set</button>
 105     <!--<button type="button">
 106       set via property</button>-->
 107     </form>
 108     <div id="map" style="position: relative; width: 480px; height: 320px; background: #e88;">
 109     </div>
 110   </div>
 111   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 112   <script src="../jquery.geo-test.min.js"></script>
 113   <script>
 114     $(function () {
 115
 116       var selectionOptions = {
 117         defaultOsm: {
 118           services: [
 119             {
 120               id: "OSM",
 121               type: "tiled",
 122               src: function (view) {
 123                 return "http://tile.openstreetmap.org/" + view.zoom + "/" + view.tile.column + "/" + view.tile.row + ".png";
 124               },
 125               attr: "&copy; OpenStreetMap &amp; contributors, CC-BY-SA"
 126             }
 127           ],
 128           tilingScheme: {
 129             tileWidth: 256,
 130             tileHeight: 256,
 131             levels: 18,
 132             basePixelSize: 156543.03392799936,
 133             origin: [-20037508.342787, 20037508.342787]
 134           },
 135           center: [-8299838.279318, 4853754.340195],
 136           zoom: 7
 137         },
 138
 139         newjersey: {
 140           services: [
 141             {
 142               id: "NewJersey",
 143               type: "tiled",
 144               src: function (view) {
 145                 return "http://njgin.state.nj.us/ArcGIS/rest/services/Basemap/basemap/MapServer/tile/" + view.zoom + "/" + view.tile.row + "/" + view.tile.column;
 146               }
 147             }
 148           ],
 149           tilingScheme: {
 150             tileWidth: 512,
 151             tileHeight: 512,
 152             pixelSizes: [
 153               3472.22222222222,
 154               2604.16666666667,
 155               2170.13888888889,
 156               1562.5,
 157               976.5625,
 158               494.791666666667,
 159               260.416666666667,
 160               130.208333333333,
 161               65.1041666666667,
 162               32.5520833333333,
 163               21.7013888888889,
 164               10.8506944444444,
 165               5.20833333333333,
 166               2.08333333333333,
 167               1.04166666666667
 168             ],
 169             origin: [-842000, 1440000]
 170           },
 171           center: [458240.213369, 458773.907696],
 172           zoom: 1
 173         }
 174       };
 175
 176
 177       var
 178       search = window.location.search,
 179       searchParts = search.length && search[0] == "?" ? search.slice(1).split("&") : null,
 180       initService = "defaultOsm",
 181       serviceChanged = false;
 182
 183       if (searchParts) {
 184         $.each(searchParts, function () {
 185           var kvp = this.split("=");
 186           switch (kvp[0]) {
 187             case "initService":
 188               initService = kvp[1];
 189               serviceChanged = true;
 190               break;
 191           }
 192         });
 193       }
 194
 195       $("input[value='" + initService + "']").click();
 196
 197 //      $("button[type='button']").click(function () {
 198 //        initService = $("input[name='initService']:checked").val();
 199 //        $("#map").geomap("option", "services", selectionOptions[initService].services);
 200 //      });
 201
 202       if (serviceChanged) {
 203         window.scrollTo(0, $(document).height());
 204       }
 205
 206       $.geo.proj = null;
 207       $("#map").geomap(selectionOptions[initService]);
 208     });
 209   </script>
 210 </body>
 211 </html>