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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <title>shingled 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 shingled services">
   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/WmqDx/embedded/" class="fiddleLink not-mobile"><img src="img/jsfiddle.png" alt="" /> jsFiddle &gt;</a>
  30       </div>
  31       <h1>
  32         shingled</h1>
  33       <p class="not-mobile">This page tests geomap with shingled services, i.e., fully dynamic services that to not use a tilingScheme. Dynamic services can be set to any scale.</p>
  34       <p class="not-mobile">If all shingled services are in the same projection, they can be layered and turned on and off at any time by updating and re-setting the services option of the geomap widget or by using the toggle convenience method.</p>
  35       <p class="not-mobile">The toggle method is preferred because it is faster and you can use it on specific services, e.g., $(&quot;#massgis_interiorforest&quot;).geomap(&quot;toggle&quot;).</p>
  36       <p class="not-mobile">These services are hosted by MassGIS.</p>
  37       <div id="layers">
  38         <input type="checkbox" id="interiorforest" name="layer" value="interiorforest" /><label for="interiorforest">Interior Forest</label>
  39         <input type="checkbox" id="hydrography" name="layer" value="hydrography" /><label for="hydrography">Hydrography</label>
  40       </div>
  41
  42     </div>
  43   </div>
  44   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  45   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
  46   <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
  47   <script>
  48     $(function () {
  49       // Set proj to null because we are working a different projection &
  50       // entirely in map units
  51       //
  52       // Note: this is still valid in a4
  53       // Though not required because we're working entirely in map units,
  54       // i.e., jQuery Geo will not need to project anything,
  55       // it makes sense because we are not working in the default projection of web mercator
  56
  57       $.geo.proj = null;
  58
  59       // some strings used in all services
  60       // base URL for image request
  61       var massGisHost = "http://giswebservices.massgis.state.ma.us/geoserver/wms";
  62       // view template used to get the map image
  63       // notice that we can put the view arguments right into the template
  64       var imageTemplate = "&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&FORMAT=image%2Fpng&SRS=EPSG%3A26986&BBOX={{=bbox}}&WIDTH={{=width}}&HEIGHT={{=height}}";
  65
  66       // create a map with three services from MassGIS
  67       // the service types are "shingled"
  68       // they must all be in the same coordinate system to work together
  69       // to keep jQuery Geo's API simple, it will only work in one coordinate system at a time and will not reproject images on the fly
  70
  71       var map = $("#map").geomap({
  72         services: [
  73           // this is a basemap and will always be shown
  74           // it's the only one we need to put the attr on
  75           // since all services come from the same source
  76           {
  77             id: "massgis_basemap",
  78             type: "shingled",
  79             src: massGisHost + "?LAYERS=massgis_basemap" + imageTemplate,
  80             attr: "&copy; 2011 Commonwealth of Massachusetts"
  81           },
  82
  83           // this is a forest layer
  84           // it has style.visibility set to "hidden"
  85           {
  86             id: "massgis_interiorforest",
  87             type: "shingled",
  88             src: massGisHost + "?LAYERS=massgis%3AGISDATA.INTERIORFOREST_POLY&STYLES=GISDATA.INTERIORFOREST_POLY%3A%3ADefault&TRANSPARENT=true" + imageTemplate,
  89             style: {
  90               visibility: "hidden"
  91             }
  92           },
  93
  94           // this is a water layer
  95           // it has style.visibility set to "hidden"
  96           {
  97             id: "massgis_hydrography",
  98             type: "shingled",
  99             src: massGisHost + "?LAYERS=massgis%3AGISDATA.MAJPOND_POLY,massgis%3AGISDATA.MAJSTRM_ARC&TRANSPARENT=true" + imageTemplate,
 100             style: {
 101               visibility: "hidden"
 102             }
 103           }
 104         ],
 105
 106         // you must set bboxMax for shingled services for the zoom property to mean anything
 107         bboxMax: [31789.1658, 790194.4183, 337250.8970, 961865.1338],
 108         // shingled services do not have a tilingScheme
 109         tilingScheme: null,
 110
 111         center: [ 184670.21967, 890771.290247 ],
 112         zoom: 11
 113       });
 114
 115       // jQuery UI for pretty buttons
 116       $("#layers").buttonset();
 117
 118       $("#layers input").click(function() {
 119         // when a service object has the id property set,
 120         // we can perform some geomap operations directly on the service
 121
 122         // in this case, the id of each extra layer is the same as the id for the checkbox but has a "massgis_" prefix
 123
 124         // we can toggle the layer based on the prefix and input id
 125         $("#massgis_" + this.id).geomap("toggle", $(this).prop("checked"));
 126       });
 127
 128     });
 129   </script>
 130
 131   <script>
 132     var _gaq = [['_setAccount', 'UA-26084853-1'], ['_trackPageview']];
 133     (function (d, t) {
 134       var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1;
 135       g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
 136       s.parentNode.insertBefore(g, s);
 137     } (document, 'script'));
 138   </script>
 139 </body>
 140 </html>
 141