Add Manual bbox entry option to search page #389

stephenkilbourn · 2023-11-10T18:36:37Z

As requested in PR #302 , This is breaking out a new feature into its own PR.

AreaSelect	BBoxEntry

This PR is intended to add a new BBEntry component that allows the entry of [x_min, y_min, x_max, y_max] instead of using a bounding box selection on the map. This new component should help accessibility and help make it clear the coordinates being searched by a user.

The default behavior on the search page is still to show the areaSelect Component if a user checks the Filter by spatial extent option. However, now there is a radio button option to toggle to "Enter coordinates". This option hides the area select and allows a user to manually enter the coordinates.

The input boxes are limited to numbers ±180 or ±90 via the bootstrap input component.

I did add two English terms that would need translations. If there is a way for me to request that via crowdin, then I can do that:

    "defineBbox": {
      "map": "Draw bounding box on map",
      "text": "Enter coordinates"
    },

src/components/SearchFilter.vue

m-mohr · 2023-11-10T18:52:47Z

src/components/BBoxEntry.vue

+  <b-form-group>
+    <b-form-row>
+      <b-col>
+        <b-form-group label="x_min" label-for="x_min">


Not sure how this is usually done in forms, but x_min seems a little too technical as a user readable label.

I asked around and didn't find a clear answer. I could do something like Lat max/min and Lon max/min. Would that be clearer to most users?

Maybe follow the specification terms? I guess there are names hidden in the API spec documents.

looking at the geojson spec, the bounding box uses the terms "southwest" and "northeast" and avoids min/max to avoid confusion when crossing the antimeridian. I've updated the labels to Southwest latitude/longitude and Northeast latitude/longitude to match that.

m-mohr · 2023-11-10T18:53:59Z

Thanks for the PR. Is the bbox synced between map and form inputs?

stephenkilbourn · 2023-11-10T19:18:16Z

The coordinates drawn with the area select on the map sync to the form inputs. I.e. a user can draw a box, and then switch to the form input and continue to manually edit them.

Unless I missed something, the areaSelect doesn't accept a starting bounding box to visually set the handles. Right now, switching from the form inputs back to the bounding box resets the query.bbox value back to the default, so a user would need to re-draw.

The different behaviors does feel strange. I could make it reset any time a user changes tabs to be consistent. Ideal scenario might be updating the the areaSelect to display the bounds and show both manual and visual map entries at the same time with state synced instead of on separate tabs.

m-mohr · 2023-11-10T20:38:30Z

I guess the area select tool needs some work so that it can be synced. It's a very simple thing that I found on the internet, but I guess others have solved that better somewhere...

stephenkilbourn · 2023-11-13T20:22:39Z

with the latest update, submitting the search will submit the bbox on whichever tab was last edited. i.e. if a user edits with the manual entry, then switches to the map tab without drawing there, the bbox used in the search is still the one from the manual text entry. The area select still does not update what is displayed, though.

src/components/SearchFilter.vue

src/components/BBoxEntry.vue

Co-authored-by: Matthias Mohr <[email protected]>

…rowser into manual-bbox-entry

stephenkilbourn · 2023-11-23T00:17:39Z

ok, I added a commit that gave the area select an setInitialBounds method. That will set the area box height and width to the same value manually entered on the manual entry tab

m-mohr · 2024-01-12T09:28:33Z

src/components/BBoxEntry.vue

+  <b-container>
+    <b-form-row>
+      <b-col>
+        <b-form-group label="Southwest Latitude" label-for="sw_latitude">


The labels needs to be added to the locales.

m-mohr · 2024-01-12T09:38:30Z

src/components/map/leaflet-areaselect.js

@@ -36,6 +38,20 @@ L.AreaSelect = L.Class.extend({
    return this;
  },

+  setInitialBounds: function ( bounds) {


I just found my old code from another tool again:

setBounds: function(bounds) { if (Array.isArray(bounds) && bounds.length >= 4) { bounds = L.LatLngBounds([bounds[0], bounds[1]], [bounds[2], bounds[3]]); } this.map.fitBounds(bounds); var bottomLeft = this.map.latLngToContainerPoint(bounds.getSouthWest()); var topRight = this.map.latLngToContainerPoint(bounds.getNorthEast()); this.setDimensions({ width: Math.abs(bottomLeft.x - topRight.x), height: Math.abs(bottomLeft.y - topRight.y) }); },

Here's the whole code for reference:
https://github.com/Open-EO/openeo-web-editor/blob/5ec303fc023b5a745254ea34f6218337fed89ae7/src/components/leaflet-areaselect/leaflet-areaselect.js

I think this might be a bit more universal and supports the Leaflet Bounds for consistency with getBounds. Would you mind updating it?

src/components/Map.vue

src/components/map/leaflet-areaselect.js

src/components/SearchFilter.vue

m-mohr · 2024-01-12T09:44:26Z

Thanks for the updates. Left a couple of comments, but otherwise looks good.

stephenkilbourn · 2024-01-13T00:07:00Z

thanks for reviewing @m-mohr - comments addressed. Things are working when I test locally against https://earth-search.aws.element84.com/v1/. Let me know if there are other issues.

m-mohr · 2024-01-15T12:53:37Z

Thank you for the updates. I just did another review and executed this locally. There's a bug when changing the bbox in manually and then switching to the map:

This needs further investigation.

stephenkilbourn · 2024-01-24T20:32:54Z

I was not moving the map to center on the manually entered bounding box when a user went back to the map view.

I added to commits with a few changes to address that bug and other potential ones:

With a little more testing around that, I realized a user could put also enter values for lat & lng in the Southwest corner that were larger than the NE corner values. I added some better validation there.
There was also some shift in the exact values of bounding box on the map vs what was entered in the manual entry tab due to rounding. The map's resolution doesn't allow very precise drawings, but the leaflet function returns a float. A 73.xxxxx1 in the manual entry would shift some when switching to the map tab and then back. I added a check to not get the new bounds on adding the area select if the bounds are already in state. I also updated to round the lat & lng on the bounding box to an integer if the Map view is used to select a bounding box.

m-mohr · 2024-03-15T14:12:33Z

Hey there,
sorry for the slow follow-up and thanks for the updates. I tested this again and it works better now, but the rounding seems to be flawed when smaller areas (e.g. a small pond or village) is selected. Then the rounding may lead to the following:

Also, for these smaller extents I believe the map should be zoomed to roughly fit to the extent and only then the bbox should be drawn. Otherwise it looks like this:

The main paint point here is the bad bbox chooser. Ideally we'd get a better one...

stephenkilbourn added 10 commits October 24, 2023 19:34

WIP: add param on submit and clear on reset

4ca7a34

implement loading filter values from params

03efc9a

check & show geospatial map based on url param

94318fb

overwrite defaults with url params

dcec953

submit form on load if query params present

8d6af73

allow bbox input via text or map

01bd9da

set datetime to date object array when reading query param string

1bdf78f

move bbox entry to component

c54484b

fix linting error

71df2ed

add manual BBoxEntry Component to search

cfc913d

stephenkilbourn requested a review from m-mohr as a code owner November 10, 2023 18:36

m-mohr reviewed Nov 10, 2023

View reviewed changes

src/components/SearchFilter.vue Show resolved Hide resolved

m-mohr reviewed Nov 10, 2023

View reviewed changes

switch to tabs

933adc4

remove console log

8068ac4

m-mohr reviewed Nov 14, 2023

View reviewed changes

src/components/SearchFilter.vue Outdated Show resolved Hide resolved

m-mohr reviewed Nov 14, 2023

View reviewed changes

src/components/SearchFilter.vue Outdated Show resolved Hide resolved

m-mohr reviewed Nov 14, 2023

View reviewed changes

src/components/BBoxEntry.vue Outdated Show resolved Hide resolved

move defaults to component, validate prop, remove unused style import

caca3a4

m-mohr reviewed Nov 14, 2023

View reviewed changes

src/components/BBoxEntry.vue Outdated Show resolved Hide resolved

stephenkilbourn and others added 3 commits November 14, 2023 13:55

Update src/components/BBoxEntry.vue

fb0683e

Co-authored-by: Matthias Mohr <[email protected]>

map tab to initialize with query.bbox and set areaselect to that bbox

5a96538

Merge branch 'manual-bbox-entry' of github.com:stephenkilbourn/stac-b…

a07190e

…rowser into manual-bbox-entry

m-mohr reviewed Jan 12, 2024

View reviewed changes

src/components/Map.vue Outdated Show resolved Hide resolved

m-mohr reviewed Jan 12, 2024

View reviewed changes

src/components/map/leaflet-areaselect.js Outdated Show resolved Hide resolved

m-mohr reviewed Jan 12, 2024

View reviewed changes

src/components/map/leaflet-areaselect.js Outdated Show resolved Hide resolved

m-mohr reviewed Jan 12, 2024

View reviewed changes

src/components/SearchFilter.vue Outdated Show resolved Hide resolved

stephenkilbourn added 6 commits January 12, 2024 11:05

move bbox labels to locales

3fc9e29

update setInitialBounds to use leaflet bounds methods

23866c3

fix: lat, lon were swapped

f25404a

remove unused watcher & default bbox value

75ddf39

use setBBox() instead of $set()

fed9d9d

no need to initialize _bbox

5230e3b

m-mohr self-requested a review January 13, 2024 13:45

stephenkilbourn added 2 commits January 24, 2024 13:16

ensure map is centered on bounds from Bbox entry before rendering

3f58ecb

round value from bounding box

569b34f

m-mohr force-pushed the main branch from 4d15e18 to 9561db7 Compare March 7, 2024 22:09

m-mohr added this to the 3.5.0 milestone Sep 11, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Manual bbox entry option to search page #389

Add Manual bbox entry option to search page #389

stephenkilbourn commented Nov 10, 2023

m-mohr Nov 10, 2023

stephenkilbourn Nov 10, 2023

m-mohr Nov 10, 2023

stephenkilbourn Nov 13, 2023 •

edited

Loading

m-mohr commented Nov 10, 2023

stephenkilbourn commented Nov 10, 2023

m-mohr commented Nov 10, 2023 •

edited

Loading

stephenkilbourn commented Nov 13, 2023

stephenkilbourn commented Nov 23, 2023

m-mohr Jan 12, 2024

m-mohr Jan 12, 2024 •

edited

Loading

m-mohr commented Jan 12, 2024

stephenkilbourn commented Jan 13, 2024

m-mohr commented Jan 15, 2024 •

edited

Loading

stephenkilbourn commented Jan 24, 2024

m-mohr commented Mar 15, 2024 •

edited

Loading

Add Manual bbox entry option to search page #389

Are you sure you want to change the base?

Add Manual bbox entry option to search page #389

Conversation

stephenkilbourn commented Nov 10, 2023

m-mohr Nov 10, 2023

Choose a reason for hiding this comment

stephenkilbourn Nov 10, 2023

Choose a reason for hiding this comment

m-mohr Nov 10, 2023

Choose a reason for hiding this comment

stephenkilbourn Nov 13, 2023 • edited Loading

Choose a reason for hiding this comment

m-mohr commented Nov 10, 2023

stephenkilbourn commented Nov 10, 2023

m-mohr commented Nov 10, 2023 • edited Loading

stephenkilbourn commented Nov 13, 2023

stephenkilbourn commented Nov 23, 2023

m-mohr Jan 12, 2024

Choose a reason for hiding this comment

m-mohr Jan 12, 2024 • edited Loading

Choose a reason for hiding this comment

m-mohr commented Jan 12, 2024

stephenkilbourn commented Jan 13, 2024

m-mohr commented Jan 15, 2024 • edited Loading

stephenkilbourn commented Jan 24, 2024

m-mohr commented Mar 15, 2024 • edited Loading

stephenkilbourn Nov 13, 2023 •

edited

Loading

m-mohr commented Nov 10, 2023 •

edited

Loading

m-mohr Jan 12, 2024 •

edited

Loading

m-mohr commented Jan 15, 2024 •

edited

Loading

m-mohr commented Mar 15, 2024 •

edited

Loading