diff --git a/src/resources/assets/js/geo/components/imageMap.vue b/src/resources/assets/js/geo/components/imageMap.vue
index cf7cd6f..e5f6e16 100644
--- a/src/resources/assets/js/geo/components/imageMap.vue
+++ b/src/resources/assets/js/geo/components/imageMap.vue
@@ -51,6 +51,12 @@ export default {
             type: Boolean,
             default: false
         },
+        overlays: {
+            type: Array,
+            default() {
+                return [];
+            },
+        },
     },
     data() {
         return {
@@ -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,
diff --git a/src/resources/assets/js/volumes/components/filterByLocationComponent.vue b/src/resources/assets/js/volumes/components/filterByLocationComponent.vue
index ee6d4ba..87285db 100644
--- a/src/resources/assets/js/volumes/components/filterByLocationComponent.vue
+++ b/src/resources/assets/js/volumes/components/filterByLocationComponent.vue
@@ -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
@@ -30,7 +27,6 @@ export default {
         return {
             selectedItem: [],
             showModal: false,
-            browsingOverlays: [],
         };
     },
     methods: {
@@ -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>
 
diff --git a/src/resources/assets/js/volumes/components/geoMapModal.vue b/src/resources/assets/js/volumes/components/geoMapModal.vue
index 9aed8a5..3c9d758 100644
--- a/src/resources/assets/js/volumes/components/geoMapModal.vue
+++ b/src/resources/assets/js/volumes/components/geoMapModal.vue
@@ -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>
@@ -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 {
@@ -49,10 +53,6 @@ export default {
         volumeId: {
             type: Number,
             required: true,
-        },
-        geoOverlays: {
-            type: Array,
-            required: true
         }
     },
     data() {
@@ -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({
+                        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") {
@@ -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);
             }
         }
     },
@@ -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>
diff --git a/src/resources/views/volumesScripts.blade.php b/src/resources/views/volumesScripts.blade.php
index 3e11177..77c8b79 100644
--- a/src/resources/views/volumesScripts.blade.php
+++ b/src/resources/views/volumesScripts.blade.php
@@ -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