Merge pull request #77 from TrippingTheBits/b1

measure label fixes

README.md

@@ -63,6 +63,9 @@ In lieu of a formal styleguide, take care to maintain the existing coding style.
 * docs - geomap - allow append to take an array of shapes
 * docs - geomap - allow remove to take an array of shapes
 * docs - geomap - improve services option documentation
+* geomap - clamp measure labels to [0, 0]
+* geo - clamp centroid to bbox
+* geomap - measure label for polygon should be in centroid
 
 ### 1.0a4 (2012-02-19)
 * geomap - [bug] changing the tilingScheme doesn't update pixelSize, maxPixelSize, center or centerMax

dev-journal-ryan.txt

@@ -17,6 +17,9 @@
 * geomap - shapeLabel property
 * docs - geomap - allow template for properties on shapeStyle option
 * geomap - allow template for properties on shapeStyle option
+* docs - geo - include method for bbox
+** accept null first argument and coordinate or bbox second argument
+* geo - include method for bbox
 * geomap - cache label coordinates (the labelPixel cannot be cached, it will change each refresh)
 * geomap - rotate label based on segment
 * geomap - use pointer-events: none where appropriate
@@ -96,6 +99,7 @@
 
 === future ===
 
+* geomap - [bug] verify label clamping is correct in axisLayout=image maps
 * docs - geomap - pass the service id (if there is one) to the src callback as a view property
 * geomap - pass the service id (if there is one) to the src callback as a view property
 * docs - geomap - support dynamic map services that only work in geodetic coordinates (sr=4326)?
@@ -199,6 +203,42 @@
 * geomap - use profiling to improve pan performance
 * geo - potentially add address cracking
 
+==2012-04-26==
+===measure===
+In some instances, the measure tool doesn't position properly. Going to change it from a div to a span to calculate width better. The container can stay a div. Only the actual label needs to be inline.
+
+Fixed. I'm also clamping to [0, 0] so the measure label doesn't move past the left or top of the map.
+
+===pixel measure===
+I can tell I will have to add support for axisLayout=image into the measure code. The clamping is backwards.
+
+===centroid===
+On bad polygon geometry (hourglass is the common example), our centroid function returns weird results. I might clamp to the bbox for now as a stopgap until I fix it for real.
+
+That's better. Not great but not nearly as much weirdness.
+
+==2012-04-24==
+===pan/zoom===
+Where was I? :) Right, first disable all refreshing and attempt a the new interactive pan.
+
+Not all refreshing will be disabled, the function/option calls from the developer should be honored.
+
+===zoomTo===
+Private but never called?
+
+===no refresh===
+With all _setCenterAndZoom calls commented out, the pan container still jumps back to starting position. That's expected with the current code but shouldn't happen when we're done. That jump needs to wait for the full refresh.
+
+==2012-04-20==
+===b1 docs===
+I got some more docs in. I need to take a small break and actually rework the pan/zoom engine.
+
+===pan/zoom===
+So it begins. I think the first thing to do is create the clearable refresh time during pan/zoom and remove the duplicate refresh code in interactivePan & interactiveScale.
+
+===google===
+Google Maps requests new tiles during pan when running in Chrome on the desktop, however, the mobile website waits until the user lets go of the map.
+
 ==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.

docs/jquery.geo-test.js

@@ -1,4 +1,4 @@
-/*! jQuery Geo - v1.0.0b1 - 2012-04-12
+/*! jQuery Geo - v1.0.0b1 - 2012-04-26
  * http://jquerygeo.com
  * Copyright (c) 2012 Ryan Westphal/Applied Geographics, Inc.; Licensed MIT, GPL */
 
@@ -2892,7 +2892,8 @@ $.Widget.prototype = {
           var a = 0,
               c = [0, 0],
               coords = $.merge( [ ], geom.type == "Polygon" ? geom.coordinates[0] : geom.coordinates ),
-              i = 1, j, n;
+              i = 1, j, n,
+              bbox = [ pos_oo, pos_oo, neg_oo, neg_oo ];
 
           var wasGeodetic = false;
           if ( !_ignoreGeo && $.geo.proj && this._isGeodetic( coords ) ) {
@@ -2906,6 +2907,12 @@ $.Widget.prototype = {
 
           for (; i <= coords.length; i++) {
             j = i % coords.length;
+
+            bbox[0] = Math.min(coords[j][0], bbox[0]);
+            bbox[1] = Math.min(coords[j][1], bbox[1]);
+            bbox[2] = Math.max(coords[j][0], bbox[2]);
+            bbox[3] = Math.max(coords[j][1], bbox[3]);
+
             n = (coords[i - 1][0] * coords[j][1]) - (coords[j][0] * coords[i - 1][1]);
             a += n;
             c[0] += (coords[i - 1][0] + coords[j][0]) * n;
@@ -2914,17 +2921,20 @@ $.Widget.prototype = {
 
           if (a === 0) {
             if (coords.length > 0) {
-              c[0] = coords[0][0];
-              c[1] = coords[0][1];
+              c[0] = Math.min( Math.max( coords[0][0], bbox[ 0 ] ), bbox[ 2 ] );
+              c[1] = Math.min( Math.max( coords[0][1], bbox[ 1 ] ), bbox[ 3 ] );
               return { type: "Point", coordinates: wasGeodetic ? $.geo.proj.toGeodetic(c) : c };
             } else {
               return undefined;
             }
           }
 
           a *= 3;
-          c[0] /= a;
-          c[1] /= a;
+          //c[0] /= a;
+          //c[1] /= a;
+
+          c[0] = Math.min( Math.max( c[0] / a, bbox[ 0 ] ), bbox[ 2 ] );
+          c[1] = Math.min( Math.max( c[1] / a, bbox[ 1 ] ), bbox[ 3 ] );
 
           return { type: "Point", coordinates: wasGeodetic ? $.geo.proj.toGeodetic(c) : c };
       }
@@ -4795,7 +4805,7 @@ $.Widget.prototype = {
       this._$contentFrame.append('<div class="geo-draw-container" style="' + contentPosCss + contentSizeCss + '"></div>');
       this._$drawContainer = this._$contentFrame.children(':last');
 
-      this._$contentFrame.append('<div class="geo-measure-container" style="' + contentPosCss + contentSizeCss + '"><div class="geo-measure-label" style="' + contentPosCss + '; display: none;"></div></div>');
+      this._$contentFrame.append('<div class="geo-measure-container" style="' + contentPosCss + contentSizeCss + '"><span class="geo-measure-label" style="' + contentPosCss + '; display: none;"></span></div>');
       this._$measureContainer = this._$contentFrame.children(':last');
       this._$measureLabel = this._$measureContainer.children();
 
@@ -4889,7 +4899,8 @@ $.Widget.prototype = {
             labelShape.coordinates[ 0 ].push( coords[ 0 ] );
 
             label = $.render[ this._tmplAreaId ]( { area: $.geo.area( labelShape, true ) } );
-            labelPixel = $.merge( [], pixels[ pixels.length - 1 ] );
+            //labelPixel = $.merge( [], pixels[ pixels.length - 1 ] );
+            labelPixel = this._toPixel( $.geo.centroid( labelShape ).coordinates );
             pixels = [ pixels ];
             break;
 
@@ -4915,8 +4926,8 @@ $.Widget.prototype = {
           }
 
           this._$measureLabel.css( {
-            left: labelPixel[ 0 ],
-            top: labelPixel[ 1 ]
+            left: Math.max( labelPixel[ 0 ], 0 ),
+            top: Math.max( labelPixel[ 1 ], 0 )
           } ).show();
         }
       }

js/jquery.geo.core.js

@@ -258,7 +258,8 @@
           var a = 0,
               c = [0, 0],
               coords = $.merge( [ ], geom.type == "Polygon" ? geom.coordinates[0] : geom.coordinates ),
-              i = 1, j, n;
+              i = 1, j, n,
+              bbox = [ pos_oo, pos_oo, neg_oo, neg_oo ];
 
           var wasGeodetic = false;
           if ( !_ignoreGeo && $.geo.proj && this._isGeodetic( coords ) ) {
@@ -272,6 +273,12 @@
 
           for (; i <= coords.length; i++) {
             j = i % coords.length;
+
+            bbox[0] = Math.min(coords[j][0], bbox[0]);
+            bbox[1] = Math.min(coords[j][1], bbox[1]);
+            bbox[2] = Math.max(coords[j][0], bbox[2]);
+            bbox[3] = Math.max(coords[j][1], bbox[3]);
+
             n = (coords[i - 1][0] * coords[j][1]) - (coords[j][0] * coords[i - 1][1]);
             a += n;
             c[0] += (coords[i - 1][0] + coords[j][0]) * n;
@@ -280,17 +287,20 @@
 
           if (a === 0) {
             if (coords.length > 0) {
-              c[0] = coords[0][0];
-              c[1] = coords[0][1];
+              c[0] = Math.min( Math.max( coords[0][0], bbox[ 0 ] ), bbox[ 2 ] );
+              c[1] = Math.min( Math.max( coords[0][1], bbox[ 1 ] ), bbox[ 3 ] );
               return { type: "Point", coordinates: wasGeodetic ? $.geo.proj.toGeodetic(c) : c };
             } else {
               return undefined;
             }
           }
 
           a *= 3;
-          c[0] /= a;
-          c[1] /= a;
+          //c[0] /= a;
+          //c[1] /= a;
+
+          c[0] = Math.min( Math.max( c[0] / a, bbox[ 0 ] ), bbox[ 2 ] );
+          c[1] = Math.min( Math.max( c[1] / a, bbox[ 1 ] ), bbox[ 3 ] );
 
           return { type: "Point", coordinates: wasGeodetic ? $.geo.proj.toGeodetic(c) : c };
       }

js/jquery.geo.geomap.js

@@ -760,7 +760,7 @@
       this._$contentFrame.append('<div class="geo-draw-container" style="' + contentPosCss + contentSizeCss + '"></div>');
       this._$drawContainer = this._$contentFrame.children(':last');
 
-      this._$contentFrame.append('<div class="geo-measure-container" style="' + contentPosCss + contentSizeCss + '"><div class="geo-measure-label" style="' + contentPosCss + '; display: none;"></div></div>');
+      this._$contentFrame.append('<div class="geo-measure-container" style="' + contentPosCss + contentSizeCss + '"><span class="geo-measure-label" style="' + contentPosCss + '; display: none;"></span></div>');
       this._$measureContainer = this._$contentFrame.children(':last');
       this._$measureLabel = this._$measureContainer.children();
 
@@ -854,7 +854,8 @@
             labelShape.coordinates[ 0 ].push( coords[ 0 ] );
 
             label = $.render[ this._tmplAreaId ]( { area: $.geo.area( labelShape, true ) } );
-            labelPixel = $.merge( [], pixels[ pixels.length - 1 ] );
+            //labelPixel = $.merge( [], pixels[ pixels.length - 1 ] );
+            labelPixel = this._toPixel( $.geo.centroid( labelShape ).coordinates );
             pixels = [ pixels ];
             break;
 
@@ -880,8 +881,8 @@
           }
 
           this._$measureLabel.css( {
-            left: labelPixel[ 0 ],
-            top: labelPixel[ 1 ]
+            left: Math.max( labelPixel[ 0 ], 0 ),
+            top: Math.max( labelPixel[ 1 ], 0 )
           } ).show();
         }
       }