Merge pull request #3039 from RickMohr/edit-small-polygons

Change default vertex icons for drawing/editing polygons
OpenTreeMap · Mar 7, 2017 · cead6ec · cead6ec
2 parents caa9153 + 594bfd1
commit cead6ec
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 1 deletion.
diff --git a/assets/css/sass/partials/pages/_map.scss b/assets/css/sass/partials/pages/_map.scss
@@ -147,6 +147,10 @@ $light-to-dark-green: #ffffff 10%,
     }
 }
 
+.leaflet-editing-icon {
+    border-radius: 5px;  // Make 10x10 vertex icon into a circle
+}
+
 @media #{$screen-xs} {
     .leaflet-popup-pane {
         display: none;

diff --git a/opentreemap/treemap/js/src/lib/MapManager.js b/opentreemap/treemap/js/src/lib/MapManager.js
@@ -259,6 +259,30 @@ MapManager.prototype = {
 
     setCenterLL: function(location, reset) {
         this.setCenterAndZoomLL(this.ZOOM_PLOT, location, reset);
+    },
+
+    customizeVertexIcons: function() {
+        // Leaflet Draw has different polygon vertex icons for touch screens
+        // and non-touch screens, and decides which to use based on Leaflet's
+        // L.Browser.Touch. But with current browsers and Leaflet 1.0.3,
+        // L.Browser.Touch is true for a browser that supports touch even when
+        // you're using a non-touch device. That's why we get giant vertex
+        // icons on desktop devices.
+        //
+        // Since for us polygon editing is unlikely to be done via touch, always
+        // use the non-touch icons.
+        //
+        // Also change the default 8x8 square into a 10x10 circle (with help
+        // from CSS on .leaflet-editing-icon)
+
+        customize(L.Draw.Polyline.prototype);
+        customize(L.Edit.PolyVerticesEdit.prototype);
+
+        function customize(prototype) {
+            var options = prototype.options;
+            options.icon.options.iconSize = new L.Point(10, 10);
+            options.touchIcon = options.icon;
+        }
     }
 };
 

diff --git a/opentreemap/treemap/js/src/lib/polylineEditor.js b/opentreemap/treemap/js/src/lib/polylineEditor.js
@@ -32,7 +32,8 @@ function showArea(area, areaBus) {
 }
 
 module.exports = function (options) {
-    var map = options.mapManager.map,
+    var mapManager = options.mapManager,
+        map = mapManager.map,
         areaPolygon,
         points,
         initialArea,
@@ -49,6 +50,7 @@ module.exports = function (options) {
             } else {
                 points = makePolygonFromPoint(options.plotMarker.getLatLng());
             }
+            mapManager.customizeVertexIcons();
             areaPolygon = new L.Polygon(flipXY(points));
             areaPolygon.addTo(map);
             initialArea = U.getPolygonDisplayArea(areaPolygon);