geo - polygonize function & geomap - dragBbox mode

jQueryGeo · Apr 12, 2012 · 8999d9b · 8999d9b
1 parent 0a8c526
commit 8999d9b
Show file tree

Hide file tree

Showing 12 changed files with 360 additions and 42 deletions.
diff --git a/README.md b/README.md
@@ -52,6 +52,11 @@ In lieu of a formal styleguide, take care to maintain the existing coding style.
 * deploy - build releases using grunt
 * deploy - make a package for new jQuery plugin directory
 ** https://github.com/jquery/plugins.jquery.com/blob/master/docs/package.md
+* deploy - lint JavaScript files
+* docs - geomap - dragBbox mode
+* docs - geo - polygonize function for bbox
+* geo - polygonize function for bbox
+* geomap - dragBbox mode
 
 ### 1.0a4 (2012-02-19)
 * geomap - [bug] changing the tilingScheme doesn't update pixelSize, maxPixelSize, center or centerMax
@@ -241,5 +246,5 @@ In lieu of a formal styleguide, take care to maintain the existing coding style.
 
 ## License
 Copyright (c) 2012 Applied Geographics, Inc.
-Lead developer: Ryan Westphal
+Project lead by Ryan Westphal
 Licensed under the MIT, GPL licenses.
diff --git a/dev-journal-ryan.txt b/dev-journal-ryan.txt
@@ -1,8 +1,6 @@
 == to do ==
 
 === b1 ===
-* docs - geomap - dragBbox mode
-* geomap - dragBbox mode
 * docs - geomap - shift option (default, zoom, shape, off)
 * geomap - shift option (default, zoom, shape, off)
 * docs - geomap - loadstart event
@@ -200,6 +198,37 @@
 * geomap - use profiling to improve pan performance
 * geo - potentially add address cracking
 
+==2012-04-12==
+===polygonize===
+That's what the bbox->polygon function will be called. It's in GEOS. Their docs say: Polygonizes a set of Geometries which contain linework that represents the edges of a planar graph.
+
+While that's supposed to be only for linework, e.g., a LineString to Polygon, I think it's fine to extend that to bbox. It's not called polygonize in JTS, there's a Polygonizer class and a getPolygons method. I'll simplify that, too.
+
+==2012-04-11==
+===foss===
+I gave my talk, went ok. Gotta get back to docs.
+
+===dragBbox===
+This mode should operate even if pannable is set to false. There's a test in the code where I have to special case that out.
+
+==2012-04-10==
+===foss===
+I'm coding at foss4g!
+
+===Deferred===
+Deferred demo is done.
+
+==2012-03-30==
+
+### markdown
+The new markdown file looks nice!
+
+### docs
+Time to document the last feature that are going into b1. Actually, I want to lint the last file, tiled.js.
+
+### Deferred context
+The last lint issue is that I shouldn't create functions in a loop. That's done when the user returns a Deferred object as the tiled service's src property. The function calls _loadImage on the service object but needs more than the url, which is all the Deferred done call gives it. How do I get the rest, such as $img, pixelSize, etc. $.proxy? But isn't that creating a function anyway, just one that lint can't see? Yes, it does. Maybe I can put the data on the Deferred object itself. I don't see why not.
+
 ==2012-03-30==
 ===grunt===
 I haven't written in a while. Checking out grunt now.

diff --git a/docs/css/style.css b/docs/css/style.css
@@ -96,6 +96,7 @@ td { padding: .5em 0; }
 b { font-weight: bold; }
 i { font-style: italic; }
 h4 { font-style: italic; font-weight: normal; }
+ul { margin-bottom: .5em; }
 
 .geomap-indoc
 {

diff --git a/docs/examples/drag.html b/docs/examples/drag.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>drag example</title>
+  <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
+  <meta name="description" content="An example of drag modes">
+  <meta name="author" content="Ryan Westphal">
+  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/blitzer/jquery-ui.css" />
+  <link rel="stylesheet" type="text/css" href="css/style.css" />
+  <style type="text/css">
+    #map
+    {
+      position: fixed;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+    }
+  </style>
+</head>
+<body>
+  <div>
+    <div id="map">
+    </div>
+    <div class="info">
+      <div class="links">
+        <a href="../" class="docLink">&lt; docs</a>
+        <a href="http://jsfiddle.net/ryanttb/==JSFIDDLE==/embedded/" class="fiddleLink"><img src="img/jsfiddle.png" alt="" /> jsFiddle &gt;</a>
+      </div>
+
+      <h1>drag</h1>
+
+      <p>There is currently only one drag mode, dragBbox. This demo tests it.</p>
+    </div>
+  </div>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
+  <script src="../../js/excanvas.js"></script>
+  <script src="../../js/jsrender.js"></script>
+  <script src="../../js/jquery.mousewheel.js"></script>
+  <script src="../../js/jquery.ui.widget.js"></script>
+  <script src="../../js/jquery.geo.core.js"></script>
+  <script src="../../js/jquery.geo.geographics.js"></script>
+  <script src="../../js/jquery.geo.geomap.js"></script>
+  <script src="../../js/jquery.geo.tiled.js"></script>
+  <script src="../../js/jquery.geo.shingled.js"></script>
+  <!--<script src="../jquery.geo-test.min.js"></script>-->
+  <script>
+    $( function ( ) {
+      // create a map, setting the mode to dragBbox
+      var map = $( "#map" ).geomap( {
+        center: [ -71.0595678, 42.3604823 ],
+        zoom: 8,
+        mode: "dragBbox",
+        shape: function( e, geo ) {
+          // drag modes generate GeoJSON objects and send them as the geo argument
+          // you can append them to the map
+          map.geomap( "append", geo );
+        }
+      } );
+    } );  
+  </script>
+
+  <script>
+    var _gaq = [['_setAccount', 'UA-26084853-1'], ['_trackPageview']];
+    (function (d, t) {
+      var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1;
+      g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
+      s.parentNode.insertBefore(g, s);
+    } (document, 'script'));
+  </script>
+</body>
+</html>
diff --git a/docs/geo/index.html b/docs/geo/index.html
@@ -49,6 +49,7 @@ <h3>bbox functions</h3>
         <li><a href="scaleBy.html">scaleBy</a></li>
         <li><a href="reaspect.html">reaspect</a></li>
         <li><a href="recenter.html">recenter</a></li>
+        <li><a href="polygonize.html">polygonize</a></li>
       </ul>
       <h3>geometry object functions</h3>
       <p>These functions operate on <a href="http://geojson.org/geojson-spec.html" rel="external">GeoJSON geometry objects</a>: Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon, and GeometryCollection. They do not operate on Feature or FeatureCollection objects, you have to call these functions on the geometry properties of Feature objects.</p>

diff --git a/docs/geo/polygonize.html b/docs/geo/polygonize.html
@@ -0,0 +1,52 @@
+<!doctype html>  
+
+<html lang="en" class="no-js">
+<head>
+  <meta charset="utf-8">
+
+  <title>polygonize | $.geo</title>
+  <meta name="description" content="jQuery Geo polygonize method">
+  <meta name="author" content="Ryan Westphal">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <link rel="stylesheet" href="../css/style.css?v=2">
+  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
+</head>
+
+<body>
+
+  <div id="polygonize" data-role="page">
+    <div data-role="header" data-theme="b">
+      <h1>polygonize</h1>
+    </div>
+
+    <div data-role="content">
+      <table>
+        <tr>
+          <th>return type</th>
+          <td>Array ( <a href="http://geojson.org/geojson-spec.html#polygon" rel="external">GeoJSON Polygon</a> ) </td>
+        </tr>
+        <tr>
+          <th>syntax</th>
+          <td>$.geo.polygonize( Array bbox ( <a href="http://geojson.org/geojson-spec.html#bounding-boxes" rel="external">GeoJSON bounding box</a> ) )</td>
+        </tr>
+        <tr>
+          <th>usage</th>
+          <td><pre><code>var polygon = $.geo.polygonize( bbox )</code></pre></td>
+        </tr>
+      </table>
+
+      <p>The polygonize method creates a new Polygon with an outer ring that matches the rectangle covered by the bbox. The Polygon is closed and will have five coordinates.</p>
+
+      <p>This function is a simplification/adaptation of the Polygonizer class in JTS. While the JTS object operates on the line work of geometry objects, this function operates on bounding boxes.</p>
+    </div>
+  </div> <!-- end of #container -->
+
+  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+  <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
+  <script src="../js/script.js"></script>
+  <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
+</body>
+</html>
+
diff --git a/docs/geomap/mode.html b/docs/geomap/mode.html
@@ -44,27 +44,60 @@ <h1>mode</h1>
           <td><pre><code>$( <i>selector</i> ).geomap( &quot;option&quot;, &quot;mode&quot;, &quot;drawPoint&quot; );</code></pre></td>
         </tr>
       </table>
-      <p>The mode option determines how the map responds to user interaction and which events the developer receives.</p>
+
+      <p>The mode option determines how the map responds to user interaction and which events jQuery Geo triggers for the developer.</p>
+
+      <p>jQuery Geo puts these modes into four small groups:</p>
 
-      <p>The current list of built-in modes is:</p>
+      <h2>modes</h2>
+
+
+      <h3>basic</h3>
+
+      <p>Basic modes are most common to what people expect to be able to do with a map: drag it around, zoom it in and out, or just have it sit there an look pretty.</p>
+
       <ul>
         <li>static</li>
         <li>pan</li>
         <li>zoom</li>
+      </ul>
+
+      <h3>drag</h3>
+
+      <p>Drag modes disable panning and turn single swipes into shape events.</p>
+
+      <ul>
+        <li>dragBbox</li>
+      </ul>
+
+      <h3>draw</h3>
+
+      <p>Draw modes turn user clicks into shape events, panning is allowed.</p>
+
+      <ul>
         <li>drawPoint</li>
         <li>drawLineString</li>
         <li>drawPolygon</li>
+      </ul>
+
+      <h3>measure</h3>
+
+      <p>Measure modes display length and area based on clicks and drags.</p>
+
+      <ul>
         <li>measureLength</li>
         <li>measureArea</li>
       </ul>
 
       <p>You are free to set mode to any other string, this is called <a href="javascript:document.getElementById('custom-modes').scrollIntoView();" rel="external">custom modes</a> in jQuery Geo and described at the end of this page.</p>
 
-      <h2>options</h2>
+      <h2>related options</h2>
+
       <p>Each mode has a matching property on the <a href="cursors.html">cursors</a> option. For example, to change the cursor for drawPoint mode to an I-beam, you can initialize the geomap widget like this:</p>
+
       <pre><code>$( <i>selector</i> ).geomap( { cursors: { drawPoint: &quot;text&quot; } } )</code></pre>
 
-      <p>The <a href="drawStyle.html">drawStyle</a> option determines how shapes look while being drawn in all of the draw modes and all of the measure modes.</p>
+      <p>The <a href="drawStyle.html">drawStyle</a> option determines how shapes look while being drawn in all of the draw, drag, and measure modes.</p>
 
       <p>The <a href="measureLabels.html">measureLabels</a> option determines how the text is formatted while using the measure modes.</p>
 
@@ -96,6 +129,8 @@ <h3>user experience</h3>
 
       <p>The user can drag the map to pan. The map will continue panning a little after the user lets go. They can zoom in or out with the scroll wheel. They can also double-click or double-tap to zoom in one level. On some multitouch devices, users can use two fingers to &quot;pinch zoom&quot; (currently not available on Android).</p>
 
+      <p>The user can hold the shift key to temporarily switch to zoom mode.</p>
+
       <h3>events</h3>
       <p>In pan mode, the geomap widget triggers the following events on the original map div.</p>
       <ul>
@@ -124,6 +159,27 @@ <h3>events</h3>
         <li>bboxchange &ndash; when the user changes the bbox by zooming</li>
       </ul>
 
+      <h2>dragBbox</h2>
+
+      <h3>user experience</h3>
+      <p>The default cursor is a crosshair.</p>
+
+      <p>Similar to zoom, in this mode the user can click and hold one point and then drag the mouse cursor. A box will form. When the user lets go of the mouse, jQuery Geo will trigger a shape event passing a GeoJSON Polygon representation of the dragged bbox as the geo argument. The Polygon object also has the GeoJSON the bbox property.</p>
+
+      <p>The user cannot pan the map while in dragBbox mode. The user can zoom in or out with the scroll wheel as well as double-click or double-tap to zoom in one level. On some multitouch devices, users can use two fingers to &quot;pinch zoom&quot; (currently not available on Android).</p>
+
+      <p>The user can hold the shift key to temporarily switch to zoom mode.</p>
+
+      <h3>events</h3>
+      <p>In dragBbox mode the geomap widget triggers the following events on the original map div.</p>
+      <ul>
+        <li>move &ndash; when the user moves the mouse above the map but is not actively dragging a bbox</li>
+        <li>click &ndash; when the user clicks or taps a point on the map without initiating a marquee drag, i.e., they let go of the map at the same point and within a short time threshold</li>
+        <li>dblclick &ndash; when the user double-clicks or double-taps a point on the map</li>
+        <li>bboxchange &ndash; when the user changes the bbox by zooming</li>
+        <li>shape &ndash; when the user lets go of the mouse after dragging to make a bbox, jQuery Geo will send a GeoJSON Polygon object to the developer; this Polygon object has a bbox property which is set to the bbox of the rectangle drawn</li>
+      </ul>
+
       <h2>drawPoint</h2>
 
       <h3>user experience</h3>
@@ -135,6 +191,8 @@ <h3>user experience</h3>
 
       <p>Similar to pan mode, the user can drag the map to pan. However, to allow a user more accuracy during digitization, the map will not continue panning a little after the user lets go. They can zoom in or out with the scroll wheel. They can also double-click or double-tap to zoom in one level. On some multitouch devices, users can use two fingers to &quot;pinch zoom&quot; (currently not available on Android).</p>
 
+      <p>The user can hold the shift key to temporarily switch to zoom mode.</p>
+
       <h3>events</h3>
       <p>In drawPoint mode, the geomap widget triggers the following events on the original map div. Note that the shape event replaces the click event.</p>
       <ul>
@@ -155,6 +213,8 @@ <h3>user experience</h3>
 
       <p>Similar to pan mode, the user can drag the map to pan, even while drawing a shape. However, to allow a user more accuracy during digitization, the map will not continue panning a little after the user lets go. They can zoom in or out with the scroll wheel. While not drawing, they can also double-click or double-tap to zoom in one level. On some multitouch devices, users can use two fingers to &quot;pinch zoom&quot; (currently not available on Android).</p>
 
+      <p>The user can hold the shift key to temporarily switch to zoom mode.</p>
+
       <h3>events</h3>
       <p>In drawLineString mode, the geomap widget triggers the following events on the original map div.</p>
       <ul>
@@ -176,6 +236,8 @@ <h3>user experience</h3>
 
       <p>Similar to pan mode, the user can drag the map to pan, even while drawing a shape. However, to allow a user more accuracy during digitization, the map will not continue panning a little after the user lets go. They can zoom in or out with the scroll wheel. While not drawing, they can also double-click or double-tap to zoom in one level. On some multitouch devices, users can use two fingers to &quot;pinch zoom&quot; (currently not available on Android).</p>
 
+      <p>The user can hold the shift key to temporarily switch to zoom mode.</p>
+
       <h3>events</h3>
       <p>In drawPolygon mode, the geomap widget triggers the following events on the original map div.</p>
       <ul>
@@ -197,6 +259,8 @@ <h3>user experience</h3>
 
       <p>Similar to pan mode, the user can drag the map to pan, even while measuring. The map will continue panning a little after the user lets go. They can zoom in or out with the scroll wheel. While not measuring, they can also double-click or double-tap to zoom in one level. On some multitouch devices, users can use two fingers to &quot;pinch zoom&quot; (currently not available on Android).</p>
 
+      <p>The user can hold the shift key to temporarily switch to zoom mode.</p>
+
       <p>By default the unit of measurment is meters because the default projection is web mercator meters. If you change the tilingScheme (on tiled services) or switch to a shingled service, the unit of measurment will be based on your new service's units.</p>
       <h3>events</h3>
       <p>In measureLength mode, the geomap widget triggers the following events on the original map div.</p>
@@ -219,9 +283,12 @@ <h3>user experience</h3>
 
       <p>Similar to pan mode, the user can drag the map to pan, even while measuring. The map will continue panning a little after the user lets go. They can zoom in or out with the scroll wheel. While not measuring, they can also double-click or double-tap to zoom in one level. On some multitouch devices, users can use two fingers to &quot;pinch zoom&quot; (currently not available on Android).</p>
 
+      <p>The user can hold the shift key to temporarily switch to zoom mode.</p>
+
       <p>By default the unit of measurment is meters because the default projection is web mercator meters. If you change the tilingScheme (on tiled services) or switch to a shingled service, the unit of measurment will be based on your new service's units.</p>
 
       <h3>events</h3>
+
       <p>In measureArea mode, the geomap widget triggers the following events on the original map div.</p>
       <ul>
         <li>move &ndash; when the user moves the mouse above the map but is not actively panning, this event triggers even while measuring</li>

diff --git a/docs/index.html b/docs/index.html
@@ -112,6 +112,7 @@ <h3 id="component-examples">component examples</h3>
         <li><a href="examples/find.html" rel="external">find</a></li>
         <li><a href="examples/remove.html" rel="external">remove</a></li>
         <li><a href="examples/empty.html" rel="external">empty</a></li>
+        <li><a href="examples/drag.html" rel="external">drag</a></li>
         <li><a href="examples/draw.html" rel="external">draw</a></li>
         <li><a href="examples/measure.html" rel="external">measure</a></li>
         <li><a href="examples/drawStyle.html" rel="external">drawStyle</a></li>