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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <title>append to service test</title>
   5   <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
   6   <meta name="description" content="An example of append to service">
   7   <meta name="author" content="Ryan Westphal">
   8   <link rel="stylesheet" type="text/css" href="css/style.css" />
   9   <style type="text/css">
  10     #map
  11     {
  12       position: fixed;
  13       left: 0;
  14       top: 0;
  15       right: 0;
  16       bottom: 0;
  17     }
  18   </style>
  19 </head>
  20 <body>
  21   <div>
  22     <div id="map">
  23     </div>
  24     <div class="info">
  25       <div class="links">
  26         <a href="../" class="docLink">&lt; docs</a>
  27         <a href="http://jsfiddle.net/ryanttb/==JSFIDDLE==/embedded/" class="fiddleLink"><img src="img/jsfiddle.png" alt="" /> jsFiddle &gt;</a>
  28       </div>
  29       <h1>append to service</h1>
  30       <p>This page is similar to the regular append example but tests appending shapes to a specific service instead of the map itself. The result, however, should look exactly the same.</p>
  31     </div>
  32   </div>
  33   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  34   <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
  35   <script>
  36     $(function () {
  37       // create a map
  38       var map = $( "#map" ).geomap( {
  39             center: [-75, 40],
  40             zoom: 5
  41           } ),
  42           service = map.find( ".osm" );
  43
  44       // create a geometry collection having a
  45       // Point, LineString and Polygon
  46       var gcol = {
  47         type: "GeometryCollection",
  48         geometries: [
  49           {
  50             type: "Point",
  51             coordinates: [-71, 42]
  52           },
  53           {
  54             type: "LineString",
  55             coordinates: [
  56               [-71, 42],
  57               [-75, 39.5]
  58             ]
  59           },
  60           {
  61             type: "Polygon",
  62             coordinates: [[
  63               [-75, 39.7],
  64               [-74.8, 39.3],
  65               [-75.2, 39.3],
  66               [-75, 39.7]
  67             ]]
  68           }
  69         ]
  70       };
  71
  72       // append the entire collection as a single geometry
  73       // do not refresh the service yet
  74       service.geomap("append", gcol, { strokeWidth: "8px", color: "#dedede" }, false);
  75
  76       // append the point
  77       // I'm refreshing the service just as an example
  78       // since true is the default, this is the same as not passing it
  79       // we normally would pass false because there's more append calls below
  80       service.geomap("append", gcol.geometries[0], true);
  81
  82       // append the LineString
  83       // don't refresh the service yet,
  84       // this is the correct way when there's more drawing to do
  85       service.geomap("append", gcol.geometries[1], false);
  86
  87       // append the Polygon with a blue style
  88       // refresh will default to true and the service will redraw
  89       // even if we passed false to all append calls above
  90       service.geomap("append", gcol.geometries[2], { color: "#00d" });
  91     });
  92   </script>
  93 </body>
  94 </html>