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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <title>center/zoom example</title>
   5   <meta charset="utf-8">
   6   <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
   7   <meta name="description" content="An example of the center, zoom and pixelSize options">
   8   <meta name="author" content="Ryan Westphal">
   9   <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/blitzer/jquery-ui.css" />
  10   <link rel="stylesheet" type="text/css" href="css/style.css" />
  11   <style type="text/css">
  12     #map
  13     {
  14       position: fixed;
  15       left: 0;
  16       top: 0;
  17       right: 0;
  18       bottom: 0;
  19     }
  20   </style>
  21 </head>
  22 <body>
  23   <div>
  24     <div id="map">
  25     </div>
  26     <div class="info">
  27       <div class="links">
  28         <a href="../" class="docLink">&lt; docs</a>
  29         <a href="http://jsfiddle.net/ryanttb/ku2eC/embedded/" class="fiddleLink"><img src="img/jsfiddle.png" alt="" /> jsFiddle &gt;</a>
  30       </div>
  31       <h1>center &amp; zoom example</h1>
  32       <p>This page tests getting and setting the center &amp; zoom options as well as getting the read-only pixelSize.</p>
  33       <p class="not-mobile">The center option is a <a href="http://geojson.org/geojson-spec.html#positions">GeoJSON position</a>. The zoom option for a tiled service a whole number from zero to the number of levels defined by the tilingScheme minus one. The pixelSize is the number of map units that fit in a single pixel of the current view. By default, pixelSize is in meters because the default map service is in web mercator meters.</p>
  34       <h2>runtime options</h2>
  35       <p>Change the center or zoom option and click set to update the map.</p>
  36       <div>
  37         <label>center <input type="text" name="runtimeCenter" value="[-74.5,40.3]" /></label>
  38         <button id="cmdRuntimeCenter" type="button">set</button>
  39       </div>
  40       <div>
  41         <label>zoom <input type="number" name="runtimeZoom" value="8" /></label>
  42         <button id="cmdRuntimeZoom" type="button">set</button>
  43       </div>
  44       <h2>actual values</h2>
  45       <p class="not-mobile">The center option is in geodetic cooridinates, [lon, lat], but the internal center is in map units, web mercator by default.</p>
  46       <table>
  47         <tr>
  48           <th>.geomap( &quot;option&quot;, &quot;center&quot; )</th>
  49           <td id="lblCenterPublic"></td>
  50         </tr>
  51         <tr>
  52           <th>$.geo.proj.toGeodetic( center )</th>
  53           <td id="lblCenterGeodetic"></td>
  54         </tr>
  55         <tr>
  56           <th><i>internal center, always projected</i></th>
  57           <td id="lblCenterInternal"></td>
  58         </tr>
  59         <tr>
  60           <th>.geomap( &quot;option&quot;, &quot;zoom&quot; )</th>
  61           <td id="lblZoom"></td>
  62         </tr>
  63         <tr>
  64           <th>.geomap( &quot;option&quot;, &quot;pixelSize&quot; )</th>
  65           <td id="lblPixelSize"></td>
  66         </tr>
  67       </table>
  68     </div>
  69   </div>
  70   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  71   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
  72   <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
  73   <script>
  74     $(function () {
  75       // store references to the inputs
  76       var runtimeCenter = $("input[name='runtimeCenter']"),
  77           runtimeZoom = $("input[name='runtimeZoom']");
  78
  79       // create a map, base the initial center and zoom on the inputs
  80       var map = $("#map").geomap({
  81         center: $.parseJSON(runtimeCenter.val()),
  82         zoom: parseInt(runtimeZoom.val()),
  83         bboxchange: function (e, geo) {
  84           // when the bbox changes, update the displayed values
  85           refreshActual();
  86         }
  87       });
  88
  89       $("#cmdRuntimeCenter").button().click(function () {
  90         // when the user sets the center, pass the new value to geomap
  91         // since plain JavaScript arrays are valid JSON,
  92         // we can use $.parseJSON to convert the string into a value
  93         map.geomap("option", "center", $.parseJSON(runtimeCenter.val()));
  94
  95         // geomap doesn't trigger the bbox event when options are set programmatically
  96         // update the displayed values
  97         refreshActual();
  98       });
  99
 100       $("#cmdRuntimeZoom").button().click(function () {
 101         // when the user sets the zoom, pass the new value to geomap
 102         // zoom is always a whole number
 103         map.geomap("option", "zoom", parseInt(runtimeZoom.val()));
 104
 105         // geomap doesn't trigger the bbox event when options are set programmatically
 106         // update the displayed values
 107         refreshActual();
 108       });
 109
 110       // update the displayed values with how the map widget was initialized
 111       refreshActual();
 112
 113       function refreshActual() {
 114         // get the center
 115         // by default, this is in geodetic coordinates, [lon, lat]
 116         // but the developer can use projected coordinates
 117         var actualCenter = map.geomap("option", "center");
 118         $("#lblCenterPublic").text("[" + actualCenter + "]");
 119
 120         if ($.geo.proj) {
 121           // if there is a projection set,
 122           // we can display the center in both geodetic and projected units
 123
 124           var geodetic = $.geo.proj.toGeodetic(actualCenter);
 125           $("#lblCenterGeodetic").text("[" + geodetic + "]");
 126
 127           // the internal center is always projected
 128           var internal = $.geo.proj.fromGeodetic(actualCenter);
 129           $("#lblCenterInternal").text("[" + internal + "]");
 130         } else {
 131           // if not, then both the center option and internal center are the same
 132           $("#lblCenterInternal").text("[" + actualCenter + "]");
 133
 134           // also, we have no way to display the center in lon, lat
 135         }
 136
 137         // get and display the current zoom value
 138         $("#lblZoom").text(map.geomap("option", "zoom"));
 139
 140         // get and display the current pixelSize value
 141         // you cannot set pixelSize, it's read only
 142         $("#lblPixelSize").text(map.geomap("option", "pixelSize"));
 143       }
 144     });
 145   </script>
 146 </body>
 147 </html>