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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <title>append 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">
   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/NPdUp/embedded/" class="fiddleLink"><img src="img/jsfiddle.png" alt="" /> jsFiddle &gt;</a>
  28       </div>
  29       <h1>append</h1>
  30       <p>This page tests geomap's append method and some style and refresh arguments.</p>
  31       <p class="not-mobile">A geomap widget is initialized to the continental US and a point is placed in Massachusetts. A line extends from MA to South Jersey where a triangle covers an area. For points, geomap draws a pixel-based oval around the map coordinate. Since the size of the oval is based on pixels, it will be the same size at all scales. The pixel length of lines and size of polygons changes at different scales because each point that makes up the shapes is locked at specific map coordinates. The stroke width for all shapes will be the same number of pixels at all scales.</p>
  32       <p class="not-mobile">All the geometry is stored in a single GeometryCollection. This example first draws the entire collection with a broad stroked, off-white style to create a halo effect behind the real shapes. This makes them a little easier to see on the map. Then we draw each individual shape again with color. The first two have the default style which is red. For the last one, we change the color to blue.</p>
  33     </div>
  34   </div>
  35   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  36   <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
  37   <script>
  38     $(function () {
  39       // create a map
  40       var map = $("#map").geomap({
  41         center: [-75, 40],
  42         zoom: 5
  43       });
  44
  45       // create a geometry collection having a
  46       // Point, LineString and Polygon
  47       var gcol = {
  48         type: "GeometryCollection",
  49         geometries: [
  50           {
  51             type: "Point",
  52             coordinates: [-71, 42]
  53           },
  54           {
  55             type: "LineString",
  56             coordinates: [
  57               [-71, 42],
  58               [-75, 39.5]
  59             ]
  60           },
  61           {
  62             type: "Polygon",
  63             coordinates: [[
  64               [-75, 39.7],
  65               [-74.8, 39.3],
  66               [-75.2, 39.3],
  67               [-75, 39.7]
  68             ]]
  69           }
  70         ]
  71       };
  72
  73       // append the entire collection as a single geometry
  74       // do not refresh the map yet
  75       map.geomap("append", gcol, { strokeWidth: "8px", color: "#dedede" }, false);
  76
  77       // append the point
  78       // I'm refreshing the map just as an example
  79       // since true is the default, this is the same as not passing it
  80       // we normally would pass false because there's more append calls below
  81       map.geomap("append", gcol.geometries[0], true);
  82
  83       // append the LineString
  84       // don't refresh the map yet,
  85       // this is the correct way when there's more drawing to do
  86       map.geomap("append", gcol.geometries[1], false);
  87
  88       // append the Polygon with a blue style
  89       // refresh will default to true and the map will redraw
  90       // even if we passed false to all append calls above
  91       map.geomap("append", gcol.geometries[2], { color: "#00d" });
  92     });
  93   </script>
  94 </body>
  95 </html>