Map layout and interface improvements (#9288)

* Map layout and interface improvements
* Fix marker not showing up on geocoder search
* Replaced geocoder search placeholder
* Fix geocoder hit area
* Fix item popup positioning
* Removed unselect button
* Removed "No results" popup
* Removed option to filter map on demand vs automatically
* Renamed Geometry field option
* Added placeholder to template option
* Hide "Delete" button when no feature are selected

* Lint fix

Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>
This commit is contained in:
Oreille
2021-11-01 21:33:09 +01:00
committed by GitHub
parent 40917d3cf5
commit 6331ad0347
20 changed files with 66 additions and 248 deletions

View File

@@ -7,7 +7,7 @@ export class ButtonControl {
constructor(private className: string, private callback: (...args: any) => any) {
this.element = document.createElement('button');
this.element.className = this.className;
this.element.onclick = callback;
this.element.onpointerdown = callback;
this.active = false;
}
click(...args: any[]): void {
@@ -36,7 +36,6 @@ type BoxSelectControlOptions = {
groupElementClass?: string;
boxElementClass?: string;
selectButtonClass?: string;
unselectButtonClass?: string;
layers: string[];
};
@@ -45,7 +44,6 @@ export class BoxSelectControl {
boxElement: HTMLElement;
selectButton: ButtonControl;
unselectButton: ButtonControl;
map?: Map & { fire: (event: string, data?: any) => void };
layers: string[];
@@ -70,13 +68,7 @@ export class BoxSelectControl {
this.selectButton = new ButtonControl(options?.selectButtonClass ?? 'ctrl-select', () => {
this.activate(!this.shiftPressed);
});
this.unselectButton = new ButtonControl(options?.unselectButtonClass ?? 'ctrl-unselect', () => {
this.reset();
this.activate(false);
this.map!.fire('select.end', { features: [] });
});
this.groupElement.appendChild(this.selectButton.element);
this.groupElement.appendChild(this.unselectButton.element);
this.onKeyDownHandler = this.onKeyDown.bind(this);
this.onKeyUpHandler = this.onKeyUp.bind(this);
@@ -132,10 +124,6 @@ export class BoxSelectControl {
this.map!.fire(`select.${yes ? 'enable' : 'disable'}`);
}
showUnselect(yes: boolean): void {
this.unselectButton.show(yes);
}
onKeyUp(event: KeyboardEvent): void {
if (event.key == 'Shift') {
this.activate(false);
@@ -171,6 +159,9 @@ export class BoxSelectControl {
onMouseUp(event: MouseEvent): void {
this.reset();
if (!this.active()) {
return;
}
const features = this.map!.queryRenderedFeatures([this.startPos!, this.lastPos!], {
layers: this.layers,
});