-
Notifications
You must be signed in to change notification settings - Fork 143
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add Manual bbox entry option to search page #389
base: main
Are you sure you want to change the base?
Changes from 16 commits
4ca7a34
03efc9a
94318fb
dcec953
8d6af73
01bd9da
1bdf78f
c54484b
71df2ed
cfc913d
933adc4
8068ac4
caca3a4
fb0683e
5a96538
a07190e
3fc9e29
23866c3
f25404a
75ddf39
fed9d9d
5230e3b
3f58ecb
569b34f
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,95 @@ | ||
<template> | ||
<b-container> | ||
<b-form-row> | ||
<b-col> | ||
<b-form-group label="Southwest Latitude" label-for="sw_latitude"> | ||
<b-form-input | ||
id="sw_latitude" | ||
@input="updateBBoxArray($event, 0)" | ||
:value="bboxArray[0]" | ||
type="number" | ||
no-wheel | ||
step="any" | ||
min="-180" | ||
max="180" | ||
/> | ||
</b-form-group> | ||
</b-col> | ||
<b-col> | ||
<b-form-group label="Southwest Longitude" label-for="sw_longitude"> | ||
<b-form-input | ||
id="sw_longitude" | ||
@input="updateBBoxArray($event, 1)" | ||
:value="bboxArray[1]" | ||
type="number" | ||
no-wheel | ||
step="any" | ||
min="-90" | ||
max="90" | ||
/> | ||
</b-form-group> | ||
</b-col> | ||
</b-form-row> | ||
<b-form-row> | ||
<b-col> | ||
<b-form-group label="Northeast Latitude" label-for="ne_latitude"> | ||
<b-form-input | ||
id="ne_latitude" | ||
@input="updateBBoxArray($event, 2)" | ||
:value="bboxArray[2]" | ||
type="number" | ||
no-wheel | ||
step="any" | ||
min="-180" | ||
max="180" | ||
/> | ||
</b-form-group> | ||
</b-col> | ||
<b-col> | ||
<b-form-group label="Northeast Longitude" label-for="ne_longitude"> | ||
<b-form-input | ||
id="ne_longitude" | ||
@input="updateBBoxArray($event, 3)" | ||
:value="bboxArray[3]" | ||
type="number" | ||
no-wheel | ||
step="any" | ||
min="-90" | ||
max="90" | ||
/> | ||
</b-form-group> | ||
</b-col> | ||
</b-form-row> | ||
</b-container> | ||
</template> | ||
|
||
<script> | ||
import { BFormInput, BFormGroup} from 'bootstrap-vue'; | ||
|
||
export default { | ||
name: 'BBoxEntry', | ||
components: { | ||
BFormGroup, | ||
BFormInput, | ||
}, | ||
props: { | ||
bbox: { | ||
type: [Array, null], | ||
default: () => ([-180, -80, 180, 80]), | ||
validator(value) { | ||
return Array.isArray(value) && value.length === 4 && value.every((e) => typeof e === 'number'); | ||
} | ||
} | ||
}, | ||
computed: { | ||
bboxArray() { | ||
return this.bbox || [-180, -80, 180, 80]; | ||
} | ||
}, | ||
methods: { | ||
updateBBoxArray($event, position) { | ||
this.$emit('updateBBoxArray', $event, position); | ||
} | ||
}, | ||
}; | ||
</script> |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -14,13 +14,15 @@ L.AreaSelect = L.Class.extend({ | |
minHorizontalSpacing: 30, | ||
minVerticalSpacing: 30, | ||
keepAspectRatio: false, | ||
bbox: null, | ||
m-mohr marked this conversation as resolved.
Show resolved
Hide resolved
|
||
}, | ||
|
||
initialize: function (options) { | ||
L.Util.setOptions(this, options); | ||
|
||
this._width = this.options.width; | ||
this._height = this.options.height; | ||
this._bbox = this.options.bbox; | ||
m-mohr marked this conversation as resolved.
Show resolved
Hide resolved
|
||
}, | ||
|
||
addTo: function (map) { | ||
|
@@ -36,6 +38,20 @@ L.AreaSelect = L.Class.extend({ | |
return this; | ||
}, | ||
|
||
setInitialBounds: function ( bounds) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 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: I think this might be a bit more universal and supports the Leaflet Bounds for consistency with getBounds. Would you mind updating it? |
||
if(bounds) { | ||
const sw = this.map.latLngToContainerPoint([bounds[0], bounds[1]]); | ||
const ne =this.map.latLngToContainerPoint([bounds[2], bounds[3]]); | ||
|
||
const bboxWidth = ne['x'] - sw['x']; | ||
const bboxHeight = sw['y'] - ne['y']; | ||
|
||
this._width = bboxWidth; | ||
this._height = bboxHeight; | ||
this._render(); | ||
} | ||
}, | ||
|
||
getBounds: function () { | ||
const size = this.map.getSize(); | ||
const topRight = new L.Point(); | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The labels needs to be added to the locales.