Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

geo - polygonize function & geomap - dragBbox mode

  • Loading branch information...
commit 8999d9b79c27b1ae8eed372f3f333a3f0c61ead1 1 parent 0a8c526
Ryan Morrison~Westphal ryanttb authored
7 README.md
View
@@ -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.
33 dev-journal-ryan.txt
View
@@ -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.
1  docs/css/style.css
View
@@ -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
{
74 docs/examples/drag.html
View
@@ -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>
1  docs/geo/index.html
View
@@ -49,6 +49,7 @@
<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>
52 docs/geo/polygonize.html
View
@@ -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>
+
75 docs/geomap/mode.html
View
@@ -44,27 +44,60 @@
<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 @@
<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 @@
<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 @@
<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 @@
<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 @@
<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 @@
<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 @@
<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>
1  docs/index.html
View
@@ -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>
103 docs/jquery.geo-test.js
View
@@ -1,6 +1,6 @@
-/*! jQuery Geo - v1.0.0b1 - 2012-03-30
+/*! jQuery Geo - v1.0.0b1 - 2012-04-12
* http://jquerygeo.com
- * Copyright (c) 2012 Applied Geographics, Inc.; Licensed MIT, GPL */
+ * Copyright (c) 2012 Ryan Westphal/Applied Geographics, Inc.; Licensed MIT, GPL */
// Copyright 2006 Google Inc.
//
@@ -2740,6 +2740,28 @@ $.Widget.prototype = {
bbox2[ 3 ] < bbox1[ 1 ];
},
+ polygonize: function( bbox, _ignoreGeo /* Internal Use Only */ ) {
+ // adaptation of Polygonizer class in JTS for use with bboxes
+ var wasGeodetic = false;
+ if ( !_ignoreGeo && $.geo.proj && this._isGeodetic( bbox ) ) {
+ wasGeodetic = true;
+ bbox = $.geo.proj.fromGeodetic(bbox);
+ }
+
+ var polygon = {
+ type: "Polygon",
+ coordinates: [ [
+ [ bbox[ 0 ], bbox[ 1 ] ],
+ [ bbox[ 0 ], bbox[ 3 ] ],
+ [ bbox[ 2 ], bbox[ 3 ] ],
+ [ bbox[ 2 ], bbox[ 1 ] ],
+ [ bbox[ 0 ], bbox[ 1 ] ]
+ ] ]
+ };
+
+ return wasGeodetic ? $.geo.proj.toGeodetic(polygon) : polygon;
+ },
+
reaspect: function (bbox, ratio, _ignoreGeo /* Internal Use Only */ ) {
// not in JTS
var wasGeodetic = false;
@@ -4029,6 +4051,7 @@ $.Widget.prototype = {
"static": "default",
pan: "url(data:image/vnd.microsoft.icon;base64,AAACAAEAICACAAgACAAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAAAEAAAAAAAAAAAAAAgAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD8AAAA/AAAAfwAAAP+AAAH/gAAB/8AAA//AAAd/wAAGf+AAAH9gAADbYAAA2yAAAZsAAAGbAAAAGAAAAAAAAA//////////////////////////////////////////////////////////////////////////////////////gH///4B///8Af//+AD///AA///wAH//4AB//8AAf//AAD//5AA///gAP//4AD//8AF///AB///5A////5///8=), move",
zoom: "crosshair",
+ dragBbox: "crosshair",
drawPoint: "crosshair",
drawLineString: "crosshair",
drawPolygon: "crosshair",
@@ -5485,10 +5508,10 @@ $.Widget.prototype = {
if (!this._inOp && e.shiftKey) {
this._shiftZoom = true;
this._$eventTarget.css("cursor", this._options["cursors"]["zoom"]);
- } else if ( !this._isMultiTouch && this._options[ "pannable" ] ) {
+ } else if ( !this._isMultiTouch && ( this._options[ "pannable" ] || this._options[ "mode" ] === "dragBbox" ) ) {
this._inOp = true;
- if (this._options["mode"] !== "zoom") {
+ if (this._options["mode"] !== "zoom" && this._options["mode"] !== "dragBbox" ) {
this._lastDrag = this._current;
if (e.currentTarget.setCapture) {
@@ -5612,6 +5635,7 @@ $.Widget.prototype = {
switch (mode) {
case "zoom":
+ case "dragBbox":
if ( this._mouseDown ) {
this._$drawContainer.geographics( "clear" );
this._$drawContainer.geographics( "drawBbox", [
@@ -5724,6 +5748,7 @@ $.Widget.prototype = {
switch (mode) {
case "zoom":
+ case "dragBbox":
if ( dx !== 0 || dy !== 0 ) {
var minSize = this._pixelSize * 6,
bboxCoords = this._toMap( [ [
@@ -5739,13 +5764,23 @@ $.Widget.prototype = {
bboxCoords[0][1],
bboxCoords[1][0],
bboxCoords[1][1]
- ];
+ ],
+ polygon;
- if ( ( bbox[2] - bbox[0] ) < minSize && ( bbox[3] - bbox[1] ) < minSize ) {
- bbox = $.geo.scaleBy( this._getBbox( $.geo.center( bbox, true ) ), 0.5, true );
- }
+ if ( mode === "zoom" ) {
+ if ( ( bbox[2] - bbox[0] ) < minSize && ( bbox[3] - bbox[1] ) < minSize ) {
+ bbox = $.geo.scaleBy( this._getBbox( $.geo.center( bbox, true ) ), 0.5, true );
+ }
+
+ this._setBbox(bbox, true, true);
+ } else {
- this._setBbox(bbox, true, true);
+ polygon = $.geo.polygonize( bbox, true );
+ this._trigger( "shape", e, this._userGeodetic ? {
+ type: "Polygon",
+ coordinates: $.geo.proj.toGeodetic( polygon.coordinates )
+ } : polygon );
+ }
}
this._resetDrawing();
@@ -5982,7 +6017,18 @@ $.Widget.prototype = {
opacity = service.style.opacity,
- x, y;
+ x, y,
+
+ loadImageDeferredDone = function( url ) {
+ // when a Deferred call is done, add the image to the map
+ // a reference to the correct img element is on the Deferred object itself
+ serviceObj._loadImage( $.data( this, "img" ), url, pixelSize, serviceState, serviceContainer, opacity );
+ },
+
+ loadImageDeferredFail = function( ) {
+ $.data( this, "img" ).remove( );
+ serviceState.loadCount--;
+ };
for ( x = tileX; x < tileX2; x++ ) {
for ( y = tileY; y < tileY2; y++ ) {
@@ -6049,14 +6095,12 @@ $.Widget.prototype = {
if ( typeof imageUrl === "string" ) {
serviceObj._loadImage( $img, imageUrl, pixelSize, serviceState, serviceContainer, opacity );
- } else {
+ } else if ( imageUrl ) {
// assume Deferred
- imageUrl.done( function( url ) {
- serviceObj._loadImage( $img, url, pixelSize, serviceState, serviceContainer, opacity );
- } ).fail( function( ) {
- $img.remove( );
- serviceState.loadCount--;
- } );
+ $.data( imageUrl, "img", $img );
+ imageUrl.done( loadImageDeferredDone ).fail( loadImageDeferredFail );
+ } else {
+ $img.remove( );
}
/* end same as refresh 4 */
@@ -6156,7 +6200,18 @@ $.Widget.prototype = {
opacity = service.style.opacity,
- x, y;
+ x, y,
+
+ loadImageDeferredDone = function( url ) {
+ // when a Deferred call is done, add the image to the map
+ // a reference to the correct img element is on the Deferred object itself
+ serviceObj._loadImage( $.data( this, "img" ), url, pixelSize, serviceState, $serviceContainer, opacity );
+ },
+
+ loadImageDeferredFail = function( ) {
+ $.data( this, "img" ).remove( );
+ serviceState.loadCount--;
+ };
if (serviceState.reloadTiles) {
scaleContainers.find("img").attr("data-dirty", "true");
@@ -6249,14 +6304,12 @@ $.Widget.prototype = {
if ( typeof imageUrl === "string" ) {
serviceObj._loadImage( $img, imageUrl, pixelSize, serviceState, $serviceContainer, opacity );
- } else {
+ } else if ( imageUrl ) {
// assume Deferred
- imageUrl.done( function( url ) {
- serviceObj._loadImage( $img, url, pixelSize, serviceState, $serviceContainer, opacity );
- } ).fail( function( ) {
- $img.remove( );
- serviceState.loadCount--;
- } );
+ $.data( imageUrl, "img", $img );
+ imageUrl.done( loadImageDeferredDone ).fail( loadImageDeferredFail );
+ } else {
+ $img.remove( );
}
}
}
6 docs/jquery.geo-test.min.js
View
3 additions, 3 deletions not shown
22 js/jquery.geo.core.js
View
@@ -106,6 +106,28 @@
bbox2[ 3 ] < bbox1[ 1 ];
},
+ polygonize: function( bbox, _ignoreGeo /* Internal Use Only */ ) {
+ // adaptation of Polygonizer class in JTS for use with bboxes
+ var wasGeodetic = false;
+ if ( !_ignoreGeo && $.geo.proj && this._isGeodetic( bbox ) ) {
+ wasGeodetic = true;
+ bbox = $.geo.proj.fromGeodetic(bbox);
+ }
+
+ var polygon = {
+ type: "Polygon",
+ coordinates: [ [
+ [ bbox[ 0 ], bbox[ 1 ] ],
+ [ bbox[ 0 ], bbox[ 3 ] ],
+ [ bbox[ 2 ], bbox[ 3 ] ],
+ [ bbox[ 2 ], bbox[ 1 ] ],
+ [ bbox[ 0 ], bbox[ 1 ] ]
+ ] ]
+ };
+
+ return wasGeodetic ? $.geo.proj.toGeodetic(polygon) : polygon;
+ },
+
reaspect: function (bbox, ratio, _ignoreGeo /* Internal Use Only */ ) {
// not in JTS
var wasGeodetic = false;
27 js/jquery.geo.geomap.js
View
@@ -16,6 +16,7 @@
"static": "default",
pan: "url(data:image/vnd.microsoft.icon;base64,AAACAAEAICACAAgACAAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAAAEAAAAAAAAAAAAAAgAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD8AAAA/AAAAfwAAAP+AAAH/gAAB/8AAA//AAAd/wAAGf+AAAH9gAADbYAAA2yAAAZsAAAGbAAAAGAAAAAAAAA//////////////////////////////////////////////////////////////////////////////////////gH///4B///8Af//+AD///AA///wAH//4AB//8AAf//AAD//5AA///gAP//4AD//8AF///AB///5A////5///8=), move",
zoom: "crosshair",
+ dragBbox: "crosshair",
drawPoint: "crosshair",
drawLineString: "crosshair",
drawPolygon: "crosshair",
@@ -1472,10 +1473,10 @@
if (!this._inOp && e.shiftKey) {
this._shiftZoom = true;
this._$eventTarget.css("cursor", this._options["cursors"]["zoom"]);
- } else if ( !this._isMultiTouch && this._options[ "pannable" ] ) {
+ } else if ( !this._isMultiTouch && ( this._options[ "pannable" ] || this._options[ "mode" ] === "dragBbox" ) ) {
this._inOp = true;
- if (this._options["mode"] !== "zoom") {
+ if (this._options["mode"] !== "zoom" && this._options["mode"] !== "dragBbox" ) {
this._lastDrag = this._current;
if (e.currentTarget.setCapture) {
@@ -1599,6 +1600,7 @@
switch (mode) {
case "zoom":
+ case "dragBbox":
if ( this._mouseDown ) {
this._$drawContainer.geographics( "clear" );
this._$drawContainer.geographics( "drawBbox", [
@@ -1711,6 +1713,7 @@
switch (mode) {
case "zoom":
+ case "dragBbox":
if ( dx !== 0 || dy !== 0 ) {
var minSize = this._pixelSize * 6,
bboxCoords = this._toMap( [ [
@@ -1726,13 +1729,23 @@
bboxCoords[0][1],
bboxCoords[1][0],
bboxCoords[1][1]
- ];
+ ],
+ polygon;
- if ( ( bbox[2] - bbox[0] ) < minSize && ( bbox[3] - bbox[1] ) < minSize ) {
- bbox = $.geo.scaleBy( this._getBbox( $.geo.center( bbox, true ) ), 0.5, true );
- }
+ if ( mode === "zoom" ) {
+ if ( ( bbox[2] - bbox[0] ) < minSize && ( bbox[3] - bbox[1] ) < minSize ) {
+ bbox = $.geo.scaleBy( this._getBbox( $.geo.center( bbox, true ) ), 0.5, true );
+ }
+
+ this._setBbox(bbox, true, true);
+ } else {
- this._setBbox(bbox, true, true);
+ polygon = $.geo.polygonize( bbox, true );
+ this._trigger( "shape", e, this._userGeodetic ? {
+ type: "Polygon",
+ coordinates: $.geo.proj.toGeodetic( polygon.coordinates )
+ } : polygon );
+ }
}
this._resetDrawing();
Please sign in to comment.
Something went wrong with that request. Please try again.