louis-e · louis-e · May 18, 2025 · May 18, 2025
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/gui-src/js/bbox.js b/gui-src/js/bbox.js
@@ -322,7 +322,7 @@ function addLayer(layer, name, title, zIndex, on) {
     }
     link.innerHTML = name;
     link.title = title;
-    link.onclick = function(e) {
+    link.onclick = function (e) {
         e.preventDefault();
         e.stopPropagation();
 
@@ -456,13 +456,19 @@ $(document).ready(function () {
     **  on top of your DOM
     **
     */
-    $('input[type="textarea"]').on('click', function (evt) { this.select() });
 
-    // Have to init the projection input box as it is used to format the initial values
+    // init the projection input box as it is used to format the initial values
+    $('input[type="textarea"]').on('click', function (evt) { this.select() });
     $("#projection").val(currentproj);
 
-    L.mapbox.accessToken = 'pk.eyJ1IjoibG91aXMtZSIsImEiOiJjbWF0cWlycjEwYWNvMmtxeHFwdDQ5NnJoIn0.6A0AKg0iucvoGhYuCkeOjA';
-    map = L.mapbox.map('map').setView([50.114768, 8.687322], 4).addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'));
+    // Initialize map with OpenStreetMap tiles
+    map = L.map('map').setView([50.114768, 8.687322], 4);
+
+    // Add OpenStreetMap tile layer (free to use with attribution)
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '&copy; Map data from <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+        maxZoom: 19
+    }).addTo(map);
 
     rsidebar = L.control.sidebar('rsidebar', {
         position: 'right',
@@ -498,22 +504,32 @@ $(document).ready(function () {
 
     // Initialize the FeatureGroup to store editable layers
     drawnItems = new L.FeatureGroup();
-    map.addLayer(drawnItems);
-
-    // Initialize the draw control and pass it the FeatureGroup of editable layers
+    map.addLayer(drawnItems);    // Initialize the draw control and pass it the FeatureGroup of editable layers
     drawControl = new L.Control.Draw({
         edit: {
             featureGroup: drawnItems
         },
         draw: {
+            rectangle: {
+                shapeOptions: {
+                    color: '#fe57a1',
+                    opacity: 0.6,
+                    weight: 3,
+                    fillColor: '#fe57a1',
+                    fillOpacity: 0.1,
+                    dashArray: '10, 10',
+                    lineCap: 'round',
+                    lineJoin: 'round'
+                },
+                repeatMode: false
+            },
             polyline: false,
             polygon: false,
             circle: false,
             marker: false
         }
     });
     map.addControl(drawControl);
-
     /*
     **
     **  create bounds layer
@@ -523,17 +539,22 @@ $(document).ready(function () {
     **
     */
     startBounds = new L.LatLngBounds([0.0, 0.0], [0.0, 0.0]);
-    var bounds = new L.Rectangle(startBounds,
-        {
-            fill: false,
-            opacity: 1.0,
-            color: '#000'
-        }
-    );
+    var bounds = new L.Rectangle(startBounds, {
+        color: '#3778d4',
+        opacity: 1.0,
+        weight: 3,
+        fill: '#3778d4',
+        lineCap: 'round',
+        lineJoin: 'round'
+    });
+
     bounds.on('bounds-set', function (e) {
-        // move it to the end of the parent
-        var parent = e.target._renderer._container.parentElement;
-        $(parent).append(e.target._renderer._container);
+        // move it to the end of the parent if renderer exists
+        if (e.target._renderer && e.target._renderer._container) {
+            var parent = e.target._renderer._container.parentElement;
+            $(parent).append(e.target._renderer._container);
+        }
+
         // Set the hash
         var southwest = this.getBounds().getSouthWest();
         var northeast = this.getBounds().getNorthEast();
@@ -543,8 +564,21 @@ $(document).ready(function () {
         var ymax = northeast.lat.toFixed(6);
         location.hash = ymin + ',' + xmin + ',' + ymax + ',' + xmax;
     });
-    map.addLayer(bounds)
+    map.addLayer(bounds);
+
     map.on('draw:created', function (e) {
+        // Check if it's a rectangle and set proper styles before adding it to the layer
+        if (e.layerType === 'rectangle') {
+            e.layer.setStyle({
+                color: '#3778d4',
+                opacity: 1.0,
+                weight: 3,
+                fill: '#3778d4',
+                lineCap: 'round',
+                lineJoin: 'round'
+            });
+        }
+
         drawnItems.addLayer(e.layer);
         bounds.setBounds(drawnItems.getBounds())
         $('#boxbounds').text(formatBounds(bounds.getBounds(), '4326'));
@@ -629,7 +663,14 @@ $(document).ready(function () {
             var splitBounds = initialBBox.split(',');
             startBounds = new L.LatLngBounds([splitBounds[0], splitBounds[1]],
                 [splitBounds[2], splitBounds[3]]);
-            var lyr = new L.Rectangle(startBounds);
+            var lyr = new L.Rectangle(startBounds, {
+                color: '#3778d4',
+                opacity: 1.0,
+                weight: 3,
+                fill: '#3778d4',
+                lineCap: 'round',
+                lineJoin: 'round'
+            });
             var evt = {
                 layer: lyr,
                 layerType: "polygon",

diff --git a/gui-src/js/license.js b/gui-src/js/license.js
diff --git a/gui-src/js/maps/leaflet.draw.override.js b/gui-src/js/maps/leaflet.draw.override.js
@@ -0,0 +1,59 @@
+// Custom override for Leaflet.Draw to fix the rectangle drawing behavior
+// This file needs to be loaded after leaflet.draw.js
+
+// Store original methods to call them later when needed
+L.Draw.SimpleShape.prototype._originalMouseDown = L.Draw.SimpleShape.prototype._onMouseDown;
+L.Draw.SimpleShape.prototype._originalMouseMove = L.Draw.SimpleShape.prototype._onMouseMove;
+L.Draw.SimpleShape.prototype._originalMouseUp = L.Draw.SimpleShape.prototype._onMouseUp;
+
+// Fix for Rectangle drawing behavior
+if (L.Draw.Rectangle) {
+    // Override the mouse down handler - keep original functionality but we'll modify behavior in move and up
+    L.Draw.SimpleShape.prototype._onMouseDown = function(e) {
+        if (this.type === "rectangle") {
+            // For rectangle, use original behavior
+            this._isDrawing = true;
+            this._startLatLng = e.latlng;
+
+            L.DomEvent
+                .on(document, 'mouseup', this._onMouseUp, this)
+                .preventDefault(e.originalEvent);
+        } else {
+            // For other shapes, use original behavior
+            this._originalMouseDown.call(this, e);
+        }
+    };
+
+    // Override mouse move to maintain proper tooltip
+    L.Draw.SimpleShape.prototype._onMouseMove = function(e) {
+        var latlng = e.latlng;
+
+        this._tooltip.updatePosition(latlng);
+
+        if (this._isDrawing) {
+            if (this.type === "rectangle") {
+                // Keep showing the initial tooltip while drawing
+                this._tooltip.updateContent({
+                    text: L.drawLocal.draw.handlers.rectangle.tooltip.start
+                });
+            } else {
+                // For other shapes, use original behavior
+                this._tooltip.updateContent({
+                    text: this._endLabelText
+                });
+            }
+
+            this._drawShape(latlng);
+        }
+    };    // Override mouse up to ensure drawing stops properly
+    L.Draw.SimpleShape.prototype._onMouseUp = function() {
+        if (this._shape && this.type === "rectangle") {
+            // For rectangle, finish drawing on mouse up
+            this._fireCreatedEvent();
+            this.disable();
+        } else if (this._originalMouseUp) {
+            // For other shapes, use original behavior
+            this._originalMouseUp.call(this);
+        }
+    };
+}
diff --git a/gui-src/js/maps/mapbox.v3.2.0.js b/gui-src/js/maps/mapbox.v3.2.0.js
diff --git a/gui-src/maps.html b/gui-src/maps.html
@@ -3,17 +3,14 @@
     <title>Map View</title>
 
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
-
     <link rel="stylesheet" href="css/maps/leaflet.css" />
     <link rel="stylesheet" href="css/maps/leaflet.draw.css" />
     <link rel="stylesheet" href="css/maps/leaflet.sidebar.css" />
-    <link rel="stylesheet" href="css/maps/mapbox.v3.2.0.css" />
     <link rel="stylesheet" href="css/bbox.css" />
 
     <script src="js/libs/jquery-1.9.1.min.js"></script>
     <script src="js/libs/jquery-ui-1.10.3.custom.js"></script>
     <script src="js/maps/leaflet.js"></script>
-    <script src="js/maps/mapbox.v3.2.0.js"></script>
     <script src="js/maps/leaflet.draw.js"></script>
     <script src="js/maps/leaflet.sidebar.js"></script>
     <script src="js/maps/wkt.parser.js"></script>