Add zoom to item button

This commit is contained in:
Edward Betts 2021-10-06 19:05:04 +02:00
parent 48e185260f
commit f6418da9a9

View file

@ -405,6 +405,11 @@
<div class="card-body"> <div class="card-body">
<div class="h4 card-title"> <div class="h4 card-title">
<span id="detail-header">item detail</span> <span id="detail-header">item detail</span>
<button class="btn btn-primary btn-sm ms-2" @click="zoom_to_selected_marker()">
<i class="fa fa-search-plus"></i> zoom in on item
</button>
<button type="button" class="btn-close float-end" id="close-detail" @click="close_item()"></button> <button type="button" class="btn-close float-end" id="close-detail" @click="close_item()"></button>
</div> </div>
<div id="detail"> <div id="detail">
@ -435,6 +440,10 @@
</div> </div>
<div class="col-xl-6"> <div class="col-xl-6">
<div v-if="bounds_before_open" class="alert alert-info">
<i class="fa fa-info-circle"></i> Close item to zoom out.
</div>
<div v-if="current_item.tag_or_key_list && current_item.tag_or_key_list.length"> <div v-if="current_item.tag_or_key_list && current_item.tag_or_key_list.length">
<strong>OSM tags/keys to search for</strong><br/> <strong>OSM tags/keys to search for</strong><br/>
{{ current_item.tag_or_key_list.length }} tags/keys to consider {{ current_item.tag_or_key_list.length }} tags/keys to consider
@ -710,6 +719,10 @@ export default {
item_type_search: undefined, item_type_search: undefined,
item_type_hits: [], item_type_hits: [],
item_type_filters: [], item_type_filters: [],
bounds_before_open: undefined,
bounds_done: [],
zoom_on_open: false,
selected_marker: undefined,
}; };
}, },
computed: { computed: {
@ -1081,7 +1094,7 @@ export default {
mouse_events(marker, qid) { mouse_events(marker, qid) {
marker.on("mouseover", () => { this.add_highlight(qid); }); marker.on("mouseover", () => { this.add_highlight(qid); });
marker.on("mouseout", () => { this.drop_highlight(qid); }); marker.on("mouseout", () => { this.drop_highlight(qid); });
marker.on("click", () => { this.open_item(qid); }); marker.on("click", () => { this.open_item(qid, marker); });
var item = this.items[qid]; var item = this.items[qid];
@ -1170,10 +1183,17 @@ export default {
var state = this.current_state(); var state = this.current_state();
history.replaceState(state, '', this.build_map_path()); history.replaceState(state, '', this.build_map_path());
}, },
open_item(qid) { open_item(qid, marker) {
this.close_edit_list(); this.close_edit_list();
var item = this.items[qid]; var item = this.items[qid];
if (marker) {
this.selected_marker = marker;
} else {
marker = item.markers[0].marker;
this.selected_marker = undefined;
}
if (this.current_item == item) return; // already open if (this.current_item == item) return; // already open
this.current_osm = undefined; this.current_osm = undefined;
this.current_item = item; this.current_item = item;
@ -1206,8 +1226,25 @@ export default {
osm.selected = !osm.selected; osm.selected = !osm.selected;
} }
}); });
if (response.data.nearby.length) {
if (this.zoom_on_open) {
if (!this.bounds_before_open) {
this.bounds_before_open = this.map.getBounds();
}
this.map.flyTo(marker.getLatLng(), 18);
}
}
}); });
}, },
zoom_to_selected_marker() {
var marker = this.selected_marker || this.current_item.markers[0];
if (!this.bounds_before_open) {
this.bounds_before_open = this.map.getBounds();
}
this.map.flyTo(marker.getLatLng(), 18);
},
item_has_edit(item) { item_has_edit(item) {
if (this.edits.length == 0) return false; if (this.edits.length == 0) return false;
return this.edits.some((edit) => edit.item.qid == item.qid); return this.edits.some((edit) => edit.item.qid == item.qid);
@ -1215,7 +1252,12 @@ export default {
close_item() { close_item() {
this.current_osm = undefined; this.current_osm = undefined;
this.current_item = undefined; this.current_item = undefined;
this.selected_marker = undefined;
this.update_map_path(); this.update_map_path();
if (this.bounds_before_open) {
this.map.flyToBounds(this.bounds_before_open);
this.bounds_before_open = undefined;
}
}, },
qid_url(qid) { qid_url(qid) {
return "https://www.wikidata.org/wiki/" + qid; return "https://www.wikidata.org/wiki/" + qid;
@ -1475,7 +1517,7 @@ export default {
}, },
start_item() { start_item() {
if (!this.detail_qid) return; if (!this.detail_qid) return;
this.open_item(this.detail_qid); this.open_item(this.detail_qid, null);
this.detail_qid = undefined; this.detail_qid = undefined;
}, },
update_wikidata() { update_wikidata() {