Skip to content

Commit

Permalink
Added mechanism to add overlays as layers to ol-map. Moved overlay-va…
Browse files Browse the repository at this point in the history
…riable from filterComponent into geoMapModal.
  • Loading branch information
mtiessen1175 committed Jul 24, 2024
1 parent 22188bd commit 159dc83
Show file tree
Hide file tree
Showing 4 changed files with 55 additions and 23 deletions.
12 changes: 11 additions & 1 deletion src/resources/assets/js/geo/components/imageMap.vue
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,12 @@ export default {
type: Boolean,
default: false
},
overlays: {
type: Array,
default() {
return [];
},
},
},
data() {
return {
Expand Down Expand Up @@ -107,9 +113,13 @@ export default {
updateWhileInteracting: true,
});
let layers = [tileLayer];
Array.prototype.push.apply(layers, this.overlays);
layers.push(vectorLayer);
let map = new Map({
target: this.$el,
layers: [tileLayer, vectorLayer],
layers: layers,
view: new View(),
interactions: defaultInteractions({
altShiftDragRotate: false,
Expand Down
Original file line number Diff line number Diff line change
@@ -1,15 +1,12 @@
<template>
<div class="filter-select">
<geo-map-modal v-if="showModal" :volumeId="volumeId" v-on:on="submit" v-on:close-modal="hideModal" :geoOverlays="browsingOverlays"></geo-map-modal>
<geo-map-modal v-if="showModal" :volumeId="volumeId" v-on:on="submit" v-on:close-modal="hideModal"></geo-map-modal>
<button type="submit" class="btn btn-default pull-right position" @click="showModal = true">Add rule</button>
</div>
</template>

<script>
import GeoMapModal from './geoMapModal.vue';
import Api from '../api/geoOverlays';
import {handleErrorResponse} from '../../geo/import';
/**
* Base component for a filter select element
Expand All @@ -30,7 +27,6 @@ export default {
return {
selectedItem: [],
showModal: false,
browsingOverlays: [],
};
},
methods: {
Expand All @@ -42,16 +38,7 @@ export default {
hideModal() {
this.showModal = false;
}
},
created() {
Api.get({id: this.volumeId, layer_type: 'browsing_layer'})
.then((response) => {
if(response.status == 200) {
this.browsingOverlays = response.body;
}
})
.catch(handleErrorResponse);
},
}
};
</script>

Expand Down
46 changes: 39 additions & 7 deletions src/resources/assets/js/volumes/components/geoMapModal.vue
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,12 @@
>
<div class="content">
<div class="cell cell-map">
<image-map v-if="images.length" :images="images" :selectable="true" v-on:select="handleSelectedImages" :overlay="overlay"></image-map>
<image-map v-if="images.length" :images="images" :selectable="true" v-on:select="handleSelectedImages" :overlays="overlays"></image-map>
</div>
<div class="cell cell-edit">
<h4>Geo Overlays</h4>
<p>Select an overlay from the list below to show on map.</p>
<div v-for="overlay in geoOverlays" :key="overlay.id">
<div v-for="overlay in browsingOverlays" :key="overlay.id">
<button :id="overlay.id" :class="{active: activeLayerId === overlay.id}" class="list-group-item custom" v-on:click="toggleActive(overlay.id)">
<span class="ellipsis" v-text="overlay.name"></span>
</button>
Expand All @@ -36,7 +36,11 @@
import Modal from 'uiv/dist/Modal';
import ImageMap from '../../geo/components/imageMap';
import CoordApi from '../api/volumeImageWithCoord';
import GeoApi from '../api/geoOverlays';
import ImageLayer from 'ol/layer/Image';
import ImageStaticSource from 'ol/source/ImageStatic';
import {LoaderMixin} from '../import';
import {handleErrorResponse} from '../../geo/import';
export default {
Expand All @@ -49,10 +53,6 @@ export default {
volumeId: {
type: Number,
required: true,
},
geoOverlays: {
type: Array,
required: true
}
},
data() {
Expand All @@ -63,8 +63,28 @@ export default {
imageIds: [],
activeLayerId: null,
overlay: null,
browsingOverlays: [],
overlayUrl: '',
}
},
computed: {
overlays() {
return this.browsingOverlays.map((overlay) => {
return new ImageLayer({
source: new ImageStaticSource({

This comment has been minimized.

Copy link
@mtiessen1175

mtiessen1175 Jul 24, 2024

Author Collaborator

Hi @mzur,
the ImageStatic layer-source is probably not the way to go any more. Since I'm dealing with tiled image-files after processing the geoTIFF's within TileSingleOverlay.php, I had a look at how you dealt with Tiled Images and OpenLayers in biigle/core. Could I now use the same layer-source that you utilized there (Zoomify)? And in that case, would I require the image width/height of the overlay in pixels?

This comment has been minimized.

Copy link
@mzur

mzur Jul 25, 2024

Member

Yes and yes. You even must use Zoomify because you generate the tiled images in that format. The size of the overlay is best stored in the database when it is processed.

url: this.overlayUrl.replace(':id', overlay.id),
imageExtent: [
overlay.top_left_lng,
overlay.bottom_right_lat,
overlay.bottom_right_lng,
overlay.top_left_lat,
],
projection: 'EPSG:4326',
}),
});
});
},
},
methods: {
callback(msg) {
if (msg === "ok") {
Expand Down Expand Up @@ -97,7 +117,7 @@ export default {
if(id === null) {
this.overlay = null;
} else {
this.overlay = this.geoOverlays.find(x => x.id === id);
this.overlay = this.browsingOverlays.find(x => x.id === id);
}
}
},
Expand All @@ -109,6 +129,18 @@ export default {
CoordApi.get({id: this.volumeId})
.then(response => this.images = response.body, this.handleErrorResponse)
.finally(this.finishLoading);
// make overlay-url variable accessible
this.overlayUrl = biigle.$require('geo.overlayUrl');
// retrieve the geo-overlays for browsing layer
GeoApi.get({id: this.volumeId, layer_type: 'browsing_layer'})
.then((response) => {
if(response.status == 200) {
this.browsingOverlays = response.body;
}
})
.catch(handleErrorResponse);
},
}
</script>
Expand Down
3 changes: 3 additions & 0 deletions src/resources/views/volumesScripts.blade.php
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
@if ($volume->isImageVolume() && $volume->hasGeoInfo())
<script type="text/javascript">
biigle.$declare('geo.overlayUrl', '{!! url('api/v1/geo-overlays/:id/file') !!}');
</script>
<script src="{{ cachebust_asset('vendor/geo/scripts/volumes.js') }}"></script>
@endif

0 comments on commit 159dc83

Please sign in to comment.