diff --git a/afrc/celery.py b/afrc/celery.py
index 03435be..b9b1bd2 100644
--- a/afrc/celery.py
+++ b/afrc/celery.py
@@ -7,7 +7,7 @@
 if platform.system().lower() == "windows":
     os.environ.setdefault("FORKED_BY_MULTIPROCESSING", "1")
 
-os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'afrc.settings')
-app = Celery('afrc')
-app.config_from_object('django.conf:settings', namespace='CELERY')
+os.environ.setdefault("DJANGO_SETTINGS_MODULE", "afrc.settings")
+app = Celery("afrc")
+app.config_from_object("django.conf:settings", namespace="CELERY")
 app.autodiscover_tasks()
diff --git a/afrc/src/afrc/Search/SearchPage.vue b/afrc/src/afrc/Search/SearchPage.vue
index 1da5c30..136efeb 100644
--- a/afrc/src/afrc/Search/SearchPage.vue
+++ b/afrc/src/afrc/Search/SearchPage.vue
@@ -1,19 +1,38 @@
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
+import type { Ref } from "vue";
+import { useGettext } from "vue3-gettext";
 
 import Toast from "primevue/toast";
+import { useToast } from "primevue/usetoast";
 import Button from "primevue/button";
+import {
+    DEFAULT_ERROR_TOAST_LIFE,
+    ERROR,
+} from "@/afrc/Search/constants.ts";
 
 import SimpleSearchFilter from "@/afrc/Search/components/SimpleSearchFilter.vue";
 import SearchResultItem from "@/afrc/Search/components/SearchResultItem.vue";
-import MapView from "@/afrc/Search/components/MapView.vue";
+import InteractiveMap from "@/afrc/Search/components/InteractiveMap/InteractiveMap.vue";
+import { fetchMapData } from "@/afrc/Search/api.ts";
 import type { GenericObject } from "@/afrc/Search/types";
+import type {
+    Basemap,
+    MapLayer,
+    MapSource,
+} from "@/afrc/Search/types.ts";
 
 let query = getQueryObject(null);
 let queryString = ref(JSON.stringify(query));
 let searchResults = ref([]);
 let resultsCount = ref("calculating...");
 const showMap = ref(false);
+const basemaps: Ref<Basemap[]> = ref([]);
+const overlays: Ref<MapLayer[]> = ref([]);
+const sources: Ref<MapSource[]> = ref([]);
+const dataLoaded = ref(false);
+const toast = useToast();
+const { $gettext } = useGettext();
 
 watch(queryString, () => {
     doQuery();
@@ -118,8 +137,38 @@ const doQuery = function () {
     // });
 };
 
-onMounted(() => {
+async function fetchSystemMapData() {
+    try {
+        const mapData = await fetchMapData();
+        const layers = mapData.map_layers;
+
+        // omit search results layer for now
+        overlays.value = layers.filter(
+            (layer: MapLayer) =>
+                layer.isoverlay &&
+                layer.maplayerid !== "6b9d3c6a-60a4-4630-b4f8-4c5159b68cec",
+        );
+
+        layers.filter((layer: MapLayer) => !layer.isoverlay).forEach((layer: MapLayer) => {
+            basemaps.value.push({name: layer.name, active: layer.addtomap, value: layer.name, id: layer.name});
+        });
+
+        sources.value = mapData.map_sources;
+
+    } catch (error) {
+        toast.add({
+            severity: ERROR,
+            life: DEFAULT_ERROR_TOAST_LIFE,
+            summary: $gettext("Unable to fetch map data."),
+            detail: error instanceof Error ? error.message : undefined,
+        });
+    }
+}
+
+onMounted(async () =>{
     doQuery();
+    await fetchSystemMapData();
+    dataLoaded.value = true;
 });
 </script>
 
@@ -163,7 +212,16 @@ onMounted(() => {
                 </div>
             </section>
 
-            <MapView v-if="showMap" />
+            <div
+                v-if="showMap && dataLoaded"
+                style="width: 100%; height: 100%"
+            >
+                <InteractiveMap
+                    :basemaps="basemaps"
+                    :overlays="overlays"
+                    :sources="sources"
+                />
+            </div>
 
             <aside v-if="!showMap">
                 <div>Search Facets</div>
diff --git a/afrc/src/afrc/Search/api.ts b/afrc/src/afrc/Search/api.ts
new file mode 100644
index 0000000..ec01685
--- /dev/null
+++ b/afrc/src/afrc/Search/api.ts
@@ -0,0 +1,66 @@
+import arches from "arches";
+import Cookies from "js-cookie";
+
+import type { FeatureCollection } from "geojson";
+
+function getToken() {
+    const token = Cookies.get("csrftoken");
+    if (!token) {
+        throw new Error("Missing csrftoken");
+    }
+    return token;
+}
+
+export const fetchGeoJSONBounds = async (features: FeatureCollection) => {
+    const response = await fetch(arches.urls["api-geojson-bounds"], {
+        method: "POST",
+        headers: { "X-CSRFTOKEN": getToken() },
+        body: JSON.stringify(features),
+    });
+    try {
+        const responseJson = await response.json();
+        if (response.ok) {
+            return responseJson;
+        }
+        throw new Error(responseJson.message);
+    } catch (error) {
+        throw new Error((error as Error).message || response.statusText);
+    }
+};
+
+export const fetchDrawnFeaturesBuffer = async (features: FeatureCollection) => {
+    const response = await fetch(arches.urls["api-feature-buffer"], {
+        method: "POST",
+        headers: { "X-CSRFTOKEN": getToken() },
+        body: JSON.stringify({ features }),
+    });
+    try {
+        const responseJson = await response.json();
+        if (response.ok) {
+            return responseJson;
+        }
+        throw new Error(responseJson.message);
+    } catch (error) {
+        throw new Error((error as Error).message || response.statusText);
+    }
+};
+
+export const createRequest = (url: string) => {
+    return async () => {
+        const response = await fetch(url);
+        try {
+            const responseJson = await response.json();
+            if (response.ok) {
+                return responseJson;
+            }
+            throw new Error(responseJson.message);
+        } catch (error) {
+            throw new Error((error as Error).message || response.statusText);
+        }
+    };
+};
+
+export const fetchSettings = createRequest(arches.urls["api-settings"]);
+export const fetchMapData = createRequest(arches.urls["api-map-data"]);
+
+
diff --git a/afrc/src/afrc/Search/components/InteractiveMap/InteractiveMap.vue b/afrc/src/afrc/Search/components/InteractiveMap/InteractiveMap.vue
new file mode 100644
index 0000000..14f4cd5
--- /dev/null
+++ b/afrc/src/afrc/Search/components/InteractiveMap/InteractiveMap.vue
@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import { onMounted, provide, ref, watch } from "vue";
+
+import { useGettext } from "vue3-gettext";
+import { useToast } from "primevue/usetoast";
+
+import MapComponent from "@/afrc/Search/components/InteractiveMap/components/MapComponent.vue";
+import MapFilter from "@/afrc/Search/components/InteractiveMap/components/MapFilter/MapFilter.vue";
+import InteractionsDrawer from "@/afrc/Search/components/InteractiveMap/components/InteractionsDrawer.vue";
+import OverlayControls from "@/afrc/Search/components/InteractiveMap/components/OverlayControls.vue";
+import BasemapControls from "@/afrc/Search/components/InteractiveMap/components/BasemapControls.vue";
+
+import { fetchSettings } from "@/afrc/Search/api.ts";
+
+import {
+    DEFAULT_ERROR_TOAST_LIFE,
+    ERROR,
+} from "@/afrc/Search/constants.ts";
+
+import type { Ref } from "vue";
+import type { Feature, Map } from "maplibre-gl";
+
+import type {
+    Basemap,
+    MapInteractionItem,
+    MapLayer,
+    MapSource,
+    Settings,
+} from "@/afrc/Search/types.ts";
+
+const toast = useToast();
+const { $gettext } = useGettext();
+
+const props = defineProps<{
+    overlays: MapLayer[];
+    basemaps: Basemap[];
+    sources: MapSource[];
+}>();
+
+const map: Ref<Map | null> = ref(null);
+const settings: Ref<Settings | null> = ref(null);
+
+const mapInteractionItems: MapInteractionItem[] = [
+    {
+        name: "Foo",
+        header: "Map Foo",
+        component: MapFilter,
+        icon: "pi pi-star",
+    },
+    {
+        name: "Bar",
+        header: "Map Bar",
+        component: OverlayControls,
+        icon: "pi pi-hashtag",
+    },
+    {
+        name: "Baz",
+        header: "Map Baz",
+        component: BasemapControls,
+        icon: "pi pi-globe",
+    },
+];
+
+const basemap: Ref<Basemap | null> = ref(null);
+
+const selectedDrawnFeature: Ref<Feature | null> = ref(null);
+
+const emits = defineEmits(["drawnFeatureSelected", "drawnFeaturesUpdated"]);
+console.log(props);
+provide("overlays", props.overlays);
+provide("basemaps", props.basemaps);
+provide("selectedDrawnFeature", selectedDrawnFeature);
+
+watch(
+    () => props.basemaps,
+    (updatedBasemaps) => {
+        for (let updatedBasemap of updatedBasemaps) {
+            if (updatedBasemap.active) {
+                basemap.value = updatedBasemap;
+                break;
+            }
+        }
+    },
+    { deep: true, immediate: true },
+);
+
+onMounted(async () => {
+    await fetchSystemSettings();
+});
+
+async function fetchSystemSettings() {
+    try {
+        console.log("Fetching settings");
+        settings.value = await fetchSettings();
+    } catch (error) {
+        toast.add({
+            severity: ERROR,
+            life: DEFAULT_ERROR_TOAST_LIFE,
+            summary: $gettext("Unable to fetch settings."),
+            detail: error instanceof Error ? error.message : undefined,
+        });
+    }
+}
+
+function updateSelectedDrawnFeature(feature: Feature) {
+    selectedDrawnFeature.value = feature;
+    emits("drawnFeatureSelected", feature);
+}
+</script>
+
+<template>
+    <div
+        v-if="settings"
+        style="display: flex; height: 100%; width: 100%"
+    >
+        <MapComponent
+            :settings="settings"
+            :basemap="basemap"
+            :overlays="overlays"
+            :sources="sources"
+            :is-drawing-enabled="true"
+            @map-initialized="
+                (mapInstance) => {
+                    map = mapInstance;
+                }
+            "
+            @drawn-features-updated="
+                (features) => {
+                    emits('drawnFeaturesUpdated', features);
+                }
+            "
+            @drawn-feature-selected="updateSelectedDrawnFeature"
+        />
+        <InteractionsDrawer
+            v-if="map"
+            :map="map"
+            :settings="settings"
+            :items="mapInteractionItems"
+        />
+    </div>
+</template>
diff --git a/afrc/src/afrc/Search/components/InteractiveMap/components/BasemapControls.vue b/afrc/src/afrc/Search/components/InteractiveMap/components/BasemapControls.vue
new file mode 100644
index 0000000..af9bd2b
--- /dev/null
+++ b/afrc/src/afrc/Search/components/InteractiveMap/components/BasemapControls.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { inject, onMounted, ref, watch } from "vue";
+
+import RadioButton from "primevue/radiobutton";
+
+import type { Map } from "maplibre-gl";
+import type { PropType } from "vue";
+
+import type { Basemap } from "@/afrc/Search/types.ts";
+
+defineProps({
+    map: {
+        type: Object as PropType<Map>,
+        required: true,
+    },
+    settings: {
+        type: Object as PropType<Record<string, unknown> | null>,
+        default: null,
+    },
+});
+
+const basemaps: Basemap[] = inject("basemaps", []);
+const selectedBasemap = ref<Basemap | null>(null);
+
+watch(selectedBasemap, (newBasemap) => {
+    basemaps.forEach((basemap) => {
+        basemap.active = basemap === newBasemap;
+    });
+});
+
+onMounted(() => {
+    const activeBasemap = basemaps.find((basemap) => basemap.active);
+    if (activeBasemap) {
+        selectedBasemap.value = activeBasemap;
+    }
+});
+</script>
+
+<template>
+    <div
+        v-for="basemap in basemaps"
+        :key="basemap.id"
+    >
+        <RadioButton
+            v-model="selectedBasemap"
+            :value="basemap"
+            :label="basemap.name"
+        />
+        <label>{{ basemap.name }}</label>
+    </div>
+</template>
diff --git a/afrc/src/afrc/Search/components/InteractiveMap/components/InteractionsDrawer.vue b/afrc/src/afrc/Search/components/InteractiveMap/components/InteractionsDrawer.vue
new file mode 100644
index 0000000..4350d5a
--- /dev/null
+++ b/afrc/src/afrc/Search/components/InteractiveMap/components/InteractionsDrawer.vue
@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import { computed, ref, shallowRef } from "vue";
+import Button from "primevue/button";
+
+import {
+    ACTIVE_LANGUAGE_DIRECTION,
+    LTR,
+    LEFT,
+    RIGHT,
+} from "@/afrc/Search/constants.ts";
+
+import type { Component, Ref } from "vue";
+import type { Map } from "maplibre-gl";
+import type {
+    MapInteractionItem,
+    Settings,
+} from "@/afrc/Search/types.ts";
+
+const props = defineProps<{
+    map: Map;
+    items: MapInteractionItem[];
+    settings: Settings | null;
+}>();
+
+const headerContent: Ref<string | null> = ref(null);
+const selectedComponent: Ref<Component | null> = shallowRef(null);
+const isOverlayVisible = ref(false);
+
+const drawerPosition = computed(() => {
+    if (props.settings![ACTIVE_LANGUAGE_DIRECTION] === LTR) {
+        return RIGHT;
+    } else {
+        return LEFT;
+    }
+});
+
+const openDrawer = (item: MapInteractionItem) => {
+    headerContent.value = item.header;
+    selectedComponent.value = item.component;
+    isOverlayVisible.value = true;
+};
+</script>
+
+<template>
+    <div class="sidebar-container">
+        <aside class="sidebar">
+            <div
+                v-for="item in items"
+                :key="item.name"
+            >
+                <Button
+                    :icon="item.icon"
+                    @click="
+                        () => {
+                            if (selectedComponent === item.component) {
+                                isOverlayVisible = !isOverlayVisible;
+                            } else {
+                                openDrawer(item);
+                            }
+                        }
+                    "
+                />
+            </div>
+        </aside>
+
+        <div
+            class="sliding-panel"
+            :class="[drawerPosition, { 'is-visible': isOverlayVisible }]"
+        >
+            <div class="sliding-panel-header">
+                <span>{{ headerContent }}</span>
+                <button
+                    class="close-button"
+                    aria-label="Close"
+                    @click="isOverlayVisible = false"
+                >
+                    ×
+                </button>
+            </div>
+
+            <component
+                :is="selectedComponent"
+                :map="props.map"
+                :settings="props.settings"
+            />
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.sidebar-container {
+    position: relative;
+    display: flex;
+    height: 100%;
+}
+
+.sidebar {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 3rem;
+    border-right: 1px solid var(--p-menubar-border-color);
+    z-index: 1;
+}
+
+.sliding-panel {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 18rem;
+    background-color: var(--p-content-background);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease;
+    z-index: 2;
+    overflow: auto;
+}
+
+.sliding-panel.left {
+    left: 3rem;
+    transform: translateX(-100%);
+}
+
+.sliding-panel.left.is-visible {
+    transform: translateX(0);
+}
+
+.sliding-panel.right {
+    right: 0;
+    transform: translateX(100%);
+}
+
+.sliding-panel.right.is-visible {
+    transform: translateX(0);
+}
+
+.sliding-panel-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem;
+    font-weight: bold;
+    border-bottom: 1px solid var(--p-content-color);
+}
+
+.close-button {
+    background: none;
+    border: none;
+    font-size: 1.5rem;
+    line-height: 1;
+    cursor: pointer;
+    color: var(--p-content-color);
+    padding: 0;
+    margin: 0;
+}
+
+.close-button:focus {
+    outline: none;
+}
+</style>
diff --git a/afrc/src/afrc/Search/components/InteractiveMap/components/MapComponent.vue b/afrc/src/afrc/Search/components/InteractiveMap/components/MapComponent.vue
new file mode 100644
index 0000000..b3ba9cc
--- /dev/null
+++ b/afrc/src/afrc/Search/components/InteractiveMap/components/MapComponent.vue
@@ -0,0 +1,447 @@
+<script setup lang="ts">
+import { onMounted, ref, useTemplateRef, watch } from "vue";
+
+import MapboxDraw from "@mapbox/mapbox-gl-draw";
+import maplibregl from "maplibre-gl";
+
+import "@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css";
+import "maplibre-gl/dist/maplibre-gl.css";
+
+import PopupContainer from "@/afrc/Search/components/InteractiveMap/components/PopupContainer/PopupContainer.vue";
+
+import {
+    fetchDrawnFeaturesBuffer,
+    fetchGeoJSONBounds,
+} from "@/afrc/Search/api.ts";
+
+import {
+    ACTIVE_LANGUAGE_DIRECTION,
+    BUFFER_LAYER_ID,
+    CLICK_EVENT,
+    DIRECT_SELECT,
+    DRAW_CREATE_EVENT,
+    DRAW_DELETE_EVENT,
+    DRAW_SELECTION_CHANGE_EVENT,
+    DRAW_UPDATE_EVENT,
+    GEOMETRY_TYPE_LINESTRING,
+    GEOMETRY_TYPE_POINT,
+    GEOMETRY_TYPE_POLYGON,
+    IDLE,
+    LTR,
+    METERS,
+    SIMPLE_SELECT,
+    STYLE_LOAD_EVENT,
+    TOP_LEFT,
+    TOP_RIGHT,
+} from "@/afrc/Search/constants.ts";
+
+import type { Ref } from "vue";
+
+import type { Feature, FeatureCollection } from "geojson";
+import type {
+    AddLayerObject,
+    Map,
+    MapMouseEvent,
+    GeoJSONSource,
+    ControlPosition,
+    Popup,
+    SourceSpecification,
+} from "maplibre-gl";
+
+import type {
+    Basemap,
+    Buffer,
+    DrawEvent,
+    LayerDefinition,
+    MapLayer,
+    MapSource,
+    Settings,
+} from "@/afrc/Search/types.ts";
+
+interface Props {
+    settings: Settings | null;
+    basemap: Basemap | null;
+    overlays: MapLayer[];
+    sources: MapSource[];
+    isDrawingEnabled?: boolean;
+    drawnFeatures?: Feature[];
+    drawnFeaturesBuffer?: Buffer;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    settings: null,
+    basemap: null,
+    overlays: () => [],
+    sources: () => [],
+    isDrawingEnabled: false,
+    drawnFeatures: () => [],
+    drawnFeaturesBuffer: undefined,
+});
+
+const {
+    settings,
+    basemap,
+    overlays,
+    sources,
+    isDrawingEnabled,
+    drawnFeatures,
+    drawnFeaturesBuffer,
+} = props;
+
+const emits = defineEmits([
+    "mapInitialized",
+    "drawnFeatureSelected",
+    "drawnFeaturesUpdated",
+]);
+
+let draw: typeof MapboxDraw;
+const map: Ref<Map | null> = ref(null);
+const mapContainer = useTemplateRef("mapContainer");
+const popupContainer = useTemplateRef("popupContainer");
+const resourceOverlaysClickHandlers: {
+    [key: string]: (e: MapMouseEvent) => void;
+} = {};
+
+const popupInstance: Ref<Popup | null> = ref(null);
+const clickedFeatures: Ref<Feature[]> = ref([]);
+const clickedCoordinates: Ref<[number, number]> = ref([0, 0]);
+const popupContainerRerenderKey = ref(0);
+
+watch(
+    () => basemap,
+    (basemap) => {
+        if (basemap) {
+            updateBasemap(basemap as Basemap);
+        }
+    },
+);
+
+watch(
+    () => overlays,
+    (overlays) => {
+        updateMapOverlays(overlays as MapLayer[]);
+    },
+    { deep: true },
+);
+
+watch(
+    () => drawnFeaturesBuffer,
+    () => {
+        updateDrawnFeatures();
+    },
+);
+
+watch(clickedFeatures, () => {
+    if (popupInstance.value) {
+        popupInstance.value.remove();
+    }
+    popupInstance.value = new maplibregl.Popup()
+        .setLngLat(clickedCoordinates.value)
+        .setDOMContent(popupContainer.value!.$el)
+        .addTo(map.value!);
+});
+
+onMounted(() => {
+    createMap();
+    if (basemap) {
+        updateBasemap(basemap as Basemap);
+    }
+    addMapControls();
+
+    map.value!.once(STYLE_LOAD_EVENT, () => {
+        if (isDrawingEnabled || drawnFeatures) {
+            addDrawControls();
+        }
+        if (drawnFeaturesBuffer?.distance && drawnFeaturesBuffer?.units) {
+            addBufferLayer();
+        }
+        // if (overlays) {
+        //     updateMapOverlays(overlays);
+        // }
+    });
+});
+
+async function bufferFeatures(features: FeatureCollection) {
+    const featuresToBuffer = {
+        ...features,
+        features: features.features.filter(
+            (feature: Feature) => feature.properties!.buffer_distance,
+        ),
+    };
+
+    const bufferedFeatures = await fetchDrawnFeaturesBuffer(featuresToBuffer);
+
+    const source = map.value!.getSource(BUFFER_LAYER_ID) as GeoJSONSource;
+    source.setData(bufferedFeatures);
+
+    return bufferedFeatures;
+}
+
+async function fitBoundsOfFeatures(features: FeatureCollection) {
+    const bounds = await fetchGeoJSONBounds(features);
+
+    map.value!.fitBounds(bounds, {
+        padding: { top: 50, right: 100, bottom: 50, left: 50 },
+    });
+}
+
+function addBufferLayer() {
+    map.value!.addSource(BUFFER_LAYER_ID, {
+        type: "geojson",
+        data: {
+            type: "FeatureCollection",
+            features: [],
+        },
+    });
+
+    map.value!.addLayer({
+        id: BUFFER_LAYER_ID,
+        type: "fill",
+        source: BUFFER_LAYER_ID,
+        layout: {},
+        paint: {
+            "fill-color": "#888888",
+            "fill-opacity": 0.5,
+        },
+    });
+}
+
+function selectNewlyDrawnFeature(e: DrawEvent) {
+    const feature = e.features[0];
+    const featureId = feature.id as string;
+
+    map.value!.once(IDLE, () => {
+        if (feature.geometry.type === GEOMETRY_TYPE_POINT) {
+            draw.changeMode(SIMPLE_SELECT, { featureIds: [featureId] });
+        } else if (
+            feature.geometry.type === GEOMETRY_TYPE_LINESTRING ||
+            feature.geometry.type === GEOMETRY_TYPE_POLYGON
+        ) {
+            draw.changeMode(DIRECT_SELECT, { featureId });
+        }
+    });
+}
+
+async function updateDrawnFeatures() {
+    const drawnFeatures = draw.getAll();
+
+    for (let feature of drawnFeatures.features) {
+        if (!feature.properties.buffer_distance) {
+            feature.properties.buffer_distance = 0;
+        }
+        if (!feature.properties.buffer_units) {
+            feature.properties.buffer_units = METERS;
+        }
+    }
+
+    const bufferedFeatures = await bufferFeatures(drawnFeatures);
+
+    emits("drawnFeaturesUpdated", drawnFeatures);
+
+    if (drawnFeatures.features.length) {
+        fitBoundsOfFeatures({
+            type: "FeatureCollection",
+            features: [...drawnFeatures.features, ...bufferedFeatures.features],
+        });
+    }
+}
+
+function createMap() {
+    map.value = new maplibregl.Map({
+        container: mapContainer.value!,
+        zoom: 10,
+        center: [-118.805, 34.027],
+    });
+
+    emits("mapInitialized", map.value);
+}
+
+function updateBasemap(basemap: Basemap) {
+    console.log(basemap);
+    console.log(overlays);
+    map.value!.setStyle(
+        'https://demotiles.maplibre.org/style.json',
+    );
+
+    map.value!.once(IDLE, () => {
+        updateMapOverlays(overlays);
+        addBufferLayer();
+        bufferFeatures(draw.getAll());
+    });
+}
+
+function addMapControls() {
+    let mapControlsPosition: ControlPosition;
+
+    if (settings) {
+        if (settings[ACTIVE_LANGUAGE_DIRECTION] === LTR) {
+            mapControlsPosition = TOP_LEFT;
+        } else {
+            mapControlsPosition = TOP_RIGHT;
+        }
+
+        map.value!.addControl(
+            new maplibregl.NavigationControl(),
+            mapControlsPosition,
+        );
+        map.value!.addControl(
+            new maplibregl.FullscreenControl(),
+            mapControlsPosition,
+        );
+    }
+}
+
+function addDrawControls() {
+    draw = new MapboxDraw({
+        displayControlsDefault: false,
+        controls: {
+            point: false,
+            line_string: false,
+            polygon: false,
+        },
+    });
+
+    map.value!.addControl(draw);
+
+    map.value!.on(DRAW_CREATE_EVENT, selectNewlyDrawnFeature);
+
+    map.value!.on(DRAW_CREATE_EVENT, updateDrawnFeatures);
+    map.value!.on(DRAW_UPDATE_EVENT, updateDrawnFeatures);
+    map.value!.on(DRAW_DELETE_EVENT, updateDrawnFeatures);
+
+    map.value!.on(DRAW_UPDATE_EVENT, (e) => {
+        emits("drawnFeatureSelected", e.features[0]);
+    });
+    map.value!.on(DRAW_SELECTION_CHANGE_EVENT, (e) => {
+        emits("drawnFeatureSelected", e.features[0] || null);
+    });
+    map.value!.on(DRAW_DELETE_EVENT, () => {
+        emits("drawnFeatureSelected", null);
+    });
+}
+
+function addOverlayToMap(overlay: MapLayer) {
+    overlay.layerdefinitions.forEach((layerDefinition: LayerDefinition) => {
+        if (!map.value!.getSource(layerDefinition.source!)) {
+            const source = sources.find(
+                (source) => source.name === layerDefinition.source,
+            );
+
+            if (source) {
+                map.value!.addSource(
+                    layerDefinition.source!,
+                    source.source as SourceSpecification,
+                );
+            }
+        }
+
+        if (!map.value!.getLayer(layerDefinition.id)) {
+            map.value!.addLayer(layerDefinition as AddLayerObject);
+        }
+    });
+
+    if (
+        overlay.maplayerid === "8914d88e-ac00-4140-a7d8-81893099b0ad" // Cultural Resource - Primary
+    ) {
+        resourceOverlaysClickHandlers[overlay.maplayerid] = function (
+            e: MapMouseEvent,
+        ) {
+            const features = map.value!.queryRenderedFeatures(e.point, {
+                layers: overlay.layerdefinitions.map(
+                    (layerDefinition) => layerDefinition.id,
+                ),
+            });
+            if (features.length) {
+                popupContainerRerenderKey.value += 1;
+                clickedCoordinates.value = [e.lngLat.lng, e.lngLat.lat];
+                clickedFeatures.value = features;
+            }
+        };
+
+        map.value!.on(
+            CLICK_EVENT,
+            resourceOverlaysClickHandlers[overlay.maplayerid],
+        );
+    }
+}
+
+function removeOverlayFromMap(overlay: MapLayer) {
+    const sourcesToRemove: { [key: string]: boolean } = {};
+
+    overlay.layerdefinitions.forEach((layerDefinition: LayerDefinition) => {
+        if (map.value!.getLayer(layerDefinition.id)) {
+            map.value!.removeLayer(layerDefinition.id);
+
+            sourcesToRemove[layerDefinition.source!] = true;
+        }
+    });
+
+    // verify if any remaining layers are still using the sources
+    map.value!.getStyle()?.layers.forEach((layer: LayerDefinition) => {
+        if (layer.source && sourcesToRemove[layer.source as string]) {
+            delete sourcesToRemove[layer.source as string];
+        }
+    });
+
+    for (let source of Object.keys(sourcesToRemove)) {
+        if (map.value!.getSource(source)) {
+            map.value!.removeSource(source);
+        }
+    }
+
+    if (overlay.maplayerid) {
+        if (resourceOverlaysClickHandlers[overlay.maplayerid]) {
+            map.value!.off(
+                CLICK_EVENT,
+                resourceOverlaysClickHandlers[overlay.maplayerid],
+            );
+            delete resourceOverlaysClickHandlers[overlay.maplayerid];
+        }
+    }
+}
+
+function updateMapOverlays(overlays: Array<MapLayer>) {
+    for (let overlay of overlays) {
+        if (overlay.addtomap) {
+            addOverlayToMap(overlay);
+        } else {
+            removeOverlayFromMap(overlay);
+        }
+    }
+}
+</script>
+
+<template>
+    <div
+        ref="mapContainer"
+        class="map"
+    >
+        <PopupContainer
+            ref="popupContainer"
+            :key="popupContainerRerenderKey"
+            :features="clickedFeatures"
+        />
+    </div>
+</template>
+
+<style scoped>
+.map {
+    height: 100%;
+    width: 100%;
+}
+</style>
+
+<style>
+.maplibregl-popup-close-button {
+    color: black;
+    font-size: 1.5rem;
+}
+
+.maplibregl-popup-content {
+    color: black;
+    padding: 0;
+    padding-top: 2rem;
+    width: 20rem;
+    height: 20rem;
+}
+</style>
diff --git a/afrc/src/afrc/Search/components/InteractiveMap/components/MapFilter/MapFilter.vue b/afrc/src/afrc/Search/components/InteractiveMap/components/MapFilter/MapFilter.vue
new file mode 100644
index 0000000..7ad5041
--- /dev/null
+++ b/afrc/src/afrc/Search/components/InteractiveMap/components/MapFilter/MapFilter.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+import { useGettext } from "vue3-gettext";
+
+import DrawControls from "@/afrc/Search/components/InteractiveMap/components/MapFilter/components/DrawControls.vue";
+import FeatureUploader from "@/afrc/Search/components/InteractiveMap/components/MapFilter/components/FeatureUploader.vue";
+import BufferControls from "@/afrc/Search/components/InteractiveMap/components/MapFilter/components/BufferControls.vue";
+
+import type { Map } from "maplibre-gl";
+import type { PropType } from "vue";
+
+const { $gettext } = useGettext();
+
+defineProps({
+    map: {
+        type: Object as PropType<Map>,
+        required: true,
+    },
+    settings: {
+        type: Object as PropType<Record<string, unknown> | null>,
+        default: null,
+    },
+});
+
+const drawControlsRef = ref<InstanceType<typeof DrawControls> | null>(null);
+const bufferControlsRef = ref<InstanceType<typeof BufferControls> | null>(null);
+
+function deleteSelectedFeature() {
+    drawControlsRef.value?.deleteSelectedDrawnFeature();
+}
+
+function clearAllDrawnFeatures() {
+    drawControlsRef.value?.deleteAllDrawnFeatures();
+}
+</script>
+
+<template>
+    <BufferControls
+        ref="bufferControlsRef"
+        :map="map"
+    />
+    <DrawControls
+        ref="drawControlsRef"
+        :map="map"
+    />
+    <FeatureUploader :map="map" />
+
+    <button @click="deleteSelectedFeature">
+        {{ $gettext("Delete Selected Feature") }}
+    </button>
+    <button @click="clearAllDrawnFeatures">
+        {{ $gettext("Clear All Features") }}
+    </button>
+</template>
diff --git a/afrc/src/afrc/Search/components/InteractiveMap/components/MapFilter/components/BufferControls.vue b/afrc/src/afrc/Search/components/InteractiveMap/components/MapFilter/components/BufferControls.vue
new file mode 100644
index 0000000..13c8547
--- /dev/null
+++ b/afrc/src/afrc/Search/components/InteractiveMap/components/MapFilter/components/BufferControls.vue
@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { ref, watch, inject } from "vue";
+import { useGettext } from "vue3-gettext";
+
+import MapboxDraw from "@mapbox/mapbox-gl-draw";
+
+import type { Feature, Map } from "maplibre-gl";
+import type { PropType, Ref } from "vue";
+import {
+    DRAW_UPDATE_EVENT,
+    METERS,
+} from "@/afrc/Search/constants.ts";
+
+const { $gettext } = useGettext();
+
+const props = defineProps({
+    map: {
+        type: Object as PropType<Map>,
+        required: true,
+    },
+});
+
+const selectedDrawnFeature = inject("selectedDrawnFeature", ref(null));
+
+const bufferDistance: Ref<number | ""> = ref(0);
+const selectedUnits: Ref<string> = ref(METERS);
+
+watch([bufferDistance, selectedUnits], () => {
+    if (bufferDistance.value === "" || bufferDistance.value < 0) {
+        bufferDistance.value = 0;
+    }
+
+    if (selectedDrawnFeature.value) {
+        let draw = props.map._controls.find(
+            (control) => control instanceof MapboxDraw,
+        ) as typeof MapboxDraw;
+
+        (selectedDrawnFeature.value as Feature).properties.buffer_distance =
+            bufferDistance.value;
+        (selectedDrawnFeature.value as Feature).properties.buffer_units =
+            selectedUnits.value;
+
+        draw.add(selectedDrawnFeature.value);
+        props.map.fire(DRAW_UPDATE_EVENT, {
+            features: [selectedDrawnFeature.value],
+        });
+    }
+});
+
+watch(
+    selectedDrawnFeature,
+    (feature: Feature | null) => {
+        if (feature) {
+            if (
+                Number.isInteger(feature.properties.buffer_distance) &&
+                feature.properties.buffer_units
+            ) {
+                bufferDistance.value = feature.properties.buffer_distance;
+                selectedUnits.value = feature.properties.buffer_units;
+
+                return;
+            }
+        }
+
+        bufferDistance.value = 0;
+        selectedUnits.value = METERS;
+    },
+    { immediate: true },
+);
+</script>
+
+<template>
+    <div>
+        <label for="bufferDistance">{{ $gettext("Buffer Distance:") }}</label>
+        <input
+            id="bufferDistance"
+            v-model.number="bufferDistance"
+            type="number"
+            min="0"
+            step="1"
+        />
+
+        <label for="unit">{{ $gettext("Unit:") }}</label>
+        <select
+            id="unit"
+            v-model="selectedUnits"
+        >
+            <option value="meters">{{ $gettext("Meters") }}</option>
+            <option value="feet">{{ $gettext("Feet") }}</option>
+            <option value="miles">{{ $gettext("Miles") }}</option>
+            <option value="kilometers">{{ $gettext("Kilometers") }}</option>
+        </select>
+    </div>
+</template>
+
+<style scoped>
+label {
+    margin-right: 10px;
+}
+
+input {
+    padding: 5px;
+    width: 100px;
+}
+</style>
diff --git a/afrc/src/afrc/Search/components/InteractiveMap/components/MapFilter/components/DrawControls.vue b/afrc/src/afrc/Search/components/InteractiveMap/components/MapFilter/components/DrawControls.vue
new file mode 100644
index 0000000..3a7bf3d
--- /dev/null
+++ b/afrc/src/afrc/Search/components/InteractiveMap/components/MapFilter/components/DrawControls.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref, watch } from "vue";
+
+import MapboxDraw from "@mapbox/mapbox-gl-draw";
+import { useGettext } from "vue3-gettext";
+
+import "@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css";
+
+import type { Map } from "maplibre-gl";
+import type { PropType } from "vue";
+
+import {
+    POINT,
+    LINE,
+    POLYGON,
+    DRAW_POINT,
+    DRAW_LINE_STRING,
+    DRAW_POLYGON,
+    DRAW_CREATE_EVENT,
+} from "@/afrc/Search/constants.ts";
+
+const { $gettext } = useGettext();
+
+const props = defineProps({
+    map: {
+        type: Object as PropType<Map>,
+        required: true,
+    },
+});
+
+defineExpose({
+    deleteSelectedDrawnFeature,
+    deleteAllDrawnFeatures,
+});
+
+let draw: typeof MapboxDraw;
+const selectedDrawType = ref("");
+
+const options = [
+    { label: $gettext("Draw a Marker"), value: POINT },
+    { label: $gettext("Draw a Polyline"), value: LINE },
+    { label: $gettext("Draw a Polygon"), value: POLYGON },
+];
+
+watch(
+    () => selectedDrawType.value,
+    (newDrawType) => {
+        if (newDrawType) {
+            props.map.getCanvas().style.cursor = "crosshair";
+
+            if (newDrawType === POINT) {
+                draw.changeMode(DRAW_POINT);
+            } else if (newDrawType === LINE) {
+                draw.changeMode(DRAW_LINE_STRING);
+            } else if (newDrawType === POLYGON) {
+                draw.changeMode(DRAW_POLYGON);
+            }
+        } else {
+            props.map.getCanvas().style.cursor = "";
+        }
+    },
+);
+
+onMounted(() => {
+    draw = props.map._controls.find(
+        (control) => control instanceof MapboxDraw,
+    ) as typeof MapboxDraw;
+
+    props.map.on(DRAW_CREATE_EVENT, updateDropdown);
+});
+
+onUnmounted(() => {
+    props.map.off(DRAW_CREATE_EVENT, updateDropdown);
+});
+
+function updateDropdown() {
+    selectedDrawType.value = "";
+}
+
+function deleteAllDrawnFeatures() {
+    draw.deleteAll();
+    props.map.fire("draw.delete");
+}
+
+function deleteSelectedDrawnFeature() {
+    const selectedFeatures = draw.getSelected();
+
+    if (selectedFeatures.features.length) {
+        const featureId = selectedFeatures.features[0].id;
+        draw.delete(featureId);
+        props.map.fire("draw.delete");
+    }
+}
+</script>
+
+<template>
+    <div>
+        <select v-model="selectedDrawType">
+            <option
+                disabled
+                value=""
+            >
+                {{ $gettext("Draw a") }}
+            </option>
+            <option
+                v-for="option in options"
+                :key="option.value"
+                :value="option.value"
+            >
+                {{ option.label }}
+            </option>
+        </select>
+    </div>
+</template>
+
+<style scoped>
+select {
+    margin: 10px;
+    padding: 5px;
+}
+</style>
diff --git a/afrc/src/afrc/Search/components/InteractiveMap/components/MapFilter/components/FeatureUploader.vue b/afrc/src/afrc/Search/components/InteractiveMap/components/MapFilter/components/FeatureUploader.vue
new file mode 100644
index 0000000..cc26a1a
--- /dev/null
+++ b/afrc/src/afrc/Search/components/InteractiveMap/components/MapFilter/components/FeatureUploader.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import arches from "arches";
+import Cookies from "js-cookie";
+import { useGettext } from "vue3-gettext";
+import MapboxDraw from "@mapbox/mapbox-gl-draw";
+
+import FileUpload from "primevue/fileupload";
+import { useToast } from "primevue/usetoast";
+
+import {
+    DEFAULT_ERROR_TOAST_LIFE,
+    DRAW_CREATE_EVENT,
+    ERROR,
+} from "@/afrc/Search/constants.ts";
+
+import type { Feature } from "geojson";
+import type { Map } from "maplibre-gl";
+import type {
+    FileUploadBeforeSendEvent,
+    FileUploadErrorEvent,
+    FileUploadUploadEvent,
+} from "primevue/fileupload";
+
+const { $gettext } = useGettext();
+const toast = useToast();
+
+const props = defineProps<{ map: Map }>();
+
+function addHeader(event: FileUploadBeforeSendEvent) {
+    const token = Cookies.get("csrftoken");
+    if (token) {
+        event.xhr.setRequestHeader("X-CSRFToken", token);
+    }
+}
+
+function upload(event: FileUploadUploadEvent) {
+    if (event.xhr.status !== 200) {
+        showError(event);
+        return;
+    }
+    const featureCollection = JSON.parse(event.xhr.responseText);
+    const draw = props.map._controls.find(
+        (control) => (control as typeof MapboxDraw).add,
+    )! as typeof MapboxDraw;
+    featureCollection.features.forEach((feat: Feature) => {
+        feat.id = draw.add(feat)[0];
+    });
+    props.map.fire(DRAW_CREATE_EVENT, featureCollection);
+}
+
+function showError(event?: FileUploadErrorEvent | FileUploadUploadEvent) {
+    toast.add({
+        severity: ERROR,
+        life: DEFAULT_ERROR_TOAST_LIFE,
+        summary: event?.xhr?.statusText || $gettext("Boundary upload failed"),
+        detail: JSON.parse(event?.xhr?.responseText ?? "{}").message,
+    });
+}
+</script>
+
+<template>
+    <FileUpload
+        accept="application/geo+json"
+        :url="arches.urls['api-geojson-parse']"
+        :auto="true"
+        :max-file-size="5e6"
+        :with-credentials="true"
+        :show-cancel-button="false"
+        :show-upload-button="false"
+        choose-icon="pi pi-plus-circle"
+        :choose-label="$gettext('Upload features')"
+        name="geojson"
+        @before-send="addHeader($event)"
+        @upload="upload($event)"
+        @error="showError($event)"
+    >
+        <template #content>
+            <span>{{ $gettext("Formats: GeoJSON") }}</span>
+        </template>
+    </FileUpload>
+</template>
diff --git a/afrc/src/afrc/Search/components/InteractiveMap/components/OverlayControls.vue b/afrc/src/afrc/Search/components/InteractiveMap/components/OverlayControls.vue
new file mode 100644
index 0000000..2b057f7
--- /dev/null
+++ b/afrc/src/afrc/Search/components/InteractiveMap/components/OverlayControls.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { inject, ref } from "vue";
+
+import ToggleSwitch from "primevue/toggleswitch";
+
+import type { Map } from "maplibre-gl";
+import type { PropType, Ref } from "vue";
+
+import type { MapLayer } from "@/afrc/Search/types.ts";
+
+defineProps({
+    map: {
+        type: Object as PropType<Map>,
+        required: true,
+    },
+    settings: {
+        type: Object as PropType<Record<string, unknown> | null>,
+        default: null,
+    },
+});
+
+const overlays: Ref<Array<MapLayer>> = inject("overlays", ref([]));
+</script>
+
+<template>
+    <div
+        v-for="overlay in overlays"
+        :key="overlay.id"
+    >
+        <div style="display: flex; align-items: center">
+            <ToggleSwitch v-model="overlay.addtomap" />
+            <label>{{ overlay.name }}</label>
+        </div>
+    </div>
+</template>
diff --git a/afrc/src/afrc/Search/components/InteractiveMap/components/PopupContainer/PopupContainer.vue b/afrc/src/afrc/Search/components/InteractiveMap/components/PopupContainer/PopupContainer.vue
new file mode 100644
index 0000000..9605d0d
--- /dev/null
+++ b/afrc/src/afrc/Search/components/InteractiveMap/components/PopupContainer/PopupContainer.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+
+import Button from "primevue/button";
+
+import PopupContent from "@/afrc/Search/components/InteractiveMap/components/PopupContainer/components/PopupContent.vue";
+
+import type { Feature } from "geojson";
+
+const props = defineProps<{ features: Feature[] }>();
+
+const currentIndex = ref(0);
+
+const displayedFeature = computed(() => props.features?.[currentIndex.value]);
+
+function previousFeature() {
+    if (currentIndex.value > 0) {
+        currentIndex.value -= 1;
+    }
+}
+
+function nextFeature() {
+    if (currentIndex.value < props.features.length - 1) {
+        currentIndex.value += 1;
+    }
+}
+</script>
+
+<template>
+    <div class="feature-container">
+        <PopupContent
+            :resource-id="displayedFeature?.properties?.resourceinstanceid"
+        />
+        <div
+            v-if="props.features?.length > 1"
+            class="feature-footer"
+        >
+            <Button
+                icon="pi pi-chevron-left"
+                :disabled="currentIndex === 0"
+                class="p-button-rounded p-button-text"
+                @click="previousFeature"
+            />
+            <span>{{ currentIndex + 1 }} / {{ props.features.length }}</span>
+            <Button
+                icon="pi pi-chevron-right"
+                :disabled="currentIndex === props.features.length - 1"
+                class="p-button-rounded p-button-text"
+                @click="nextFeature"
+            />
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.feature-container {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    height: 100%;
+}
+
+.feature-footer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #f8f9fa;
+}
+</style>
diff --git a/afrc/src/afrc/Search/components/InteractiveMap/components/PopupContainer/components/PopupContent.vue b/afrc/src/afrc/Search/components/InteractiveMap/components/PopupContainer/components/PopupContent.vue
new file mode 100644
index 0000000..614cfc9
--- /dev/null
+++ b/afrc/src/afrc/Search/components/InteractiveMap/components/PopupContainer/components/PopupContent.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+const { resourceId } = defineProps<{ resourceId?: string }>();
+</script>
+
+<template>
+    <div
+        v-if="resourceId"
+        class="feature-content"
+    >
+        {{ resourceId }}
+    </div>
+</template>
+
+<style scoped>
+.feature-content {
+    flex: 1;
+    overflow-y: auto;
+    background-color: #fff;
+}
+</style>
diff --git a/afrc/src/afrc/Search/constants.ts b/afrc/src/afrc/Search/constants.ts
new file mode 100644
index 0000000..3bad3a0
--- /dev/null
+++ b/afrc/src/afrc/Search/constants.ts
@@ -0,0 +1,34 @@
+import type { InjectionKey } from "vue";
+
+import type { UserRefAndSetter } from "@/afrc/Search/types.ts";
+
+export const ACTIVE_LANGUAGE_DIRECTION = "ACTIVE_LANGUAGE_DIRECTION";
+export const ANONYMOUS = "anonymous";
+export const BUFFER_LAYER_ID = "buffer-layer";
+export const CLICK_EVENT = "click";
+export const DEFAULT_ERROR_TOAST_LIFE = 8000;
+export const DIRECT_SELECT = "direct_select";
+export const DRAW_CREATE_EVENT = "draw.create";
+export const DRAW_DELETE_EVENT = "draw.delete";
+export const DRAW_UPDATE_EVENT = "draw.update";
+export const DRAW_SELECTION_CHANGE_EVENT = "draw.selectionchange";
+export const DRAW_LINE_STRING = "draw_line_string";
+export const DRAW_POINT = "draw_point";
+export const DRAW_POLYGON = "draw_polygon";
+export const ERROR = "error";
+export const GEOMETRY_TYPE_LINESTRING = "LineString";
+export const GEOMETRY_TYPE_POINT = "Point";
+export const GEOMETRY_TYPE_POLYGON = "Polygon";
+export const IDLE = "idle";
+export const LEFT = "left";
+export const LINE = "line";
+export const LTR = "ltr";
+export const METERS = "meters";
+export const POINT = "point";
+export const POLYGON = "polygon";
+export const RIGHT = "right";
+export const SIMPLE_SELECT = "simple_select";
+export const STYLE_LOAD_EVENT = "style.load";
+export const TOP_LEFT = "top-left";
+export const TOP_RIGHT = "top-right";
+export const USER_KEY = Symbol() as InjectionKey<UserRefAndSetter>;
diff --git a/afrc/src/afrc/Search/types.ts b/afrc/src/afrc/Search/types.ts
index c1d3a03..fddc722 100644
--- a/afrc/src/afrc/Search/types.ts
+++ b/afrc/src/afrc/Search/types.ts
@@ -1,2 +1,101 @@
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type GenericObject = { [key: string]: any };
+import type { Component, Ref } from "vue";
+import type { Feature, FeatureCollection, Geometry, GeoJSON } from "geojson";
+import type { FilterSpecification } from "maplibre-gl";
+
+export interface MapInteractionItem {
+    name: string;
+    header: string;
+    component: Component;
+    icon: string;
+}
+
+export interface DrawEvent {
+    features: Feature<Geometry>[];
+}
+
+export interface Basemap {
+    id: string;
+    name: string;
+    value: string;
+    active: boolean;
+}
+export interface MapLayer {
+    activated?: boolean;
+    addtomap: boolean;
+    centerx?: number | null;
+    centery?: number | null;
+    icon: string;
+    id: number;
+    isoverlay: boolean;
+    ispublic?: boolean;
+    layer_json?: string;
+    layerdefinitions: LayerDefinition[];
+    legend?: string | null;
+    maplayerid?: string;
+    name: string;
+    searchonly?: boolean;
+    sortorder?: number;
+    visible: boolean;
+    zoom?: number | null;
+    nodeid?: string;
+}
+
+export interface LayerDefinition {
+    id: string;
+    type: string;
+    source?: string;
+    "source-layer"?: string;
+    layout?: Record<string, unknown>;
+    paint?: Record<string, unknown>;
+    filter?: FilterSpecification;
+    minzoom?: number;
+    maxzoom?: number;
+}
+
+export interface MapSource {
+    id: number;
+    name: string;
+    source: {
+        type: string;
+        url: string;
+        data?: GeoJSON;
+        tileSize?: number;
+        coordinates?: [number, number];
+    };
+    source_json: string;
+}
+
+export interface Settings {
+    ACTIVE_LANGUAGE: string;
+    ACTIVE_LANGUAGE_DIRECTION: string;
+    ARCGIS_TOKEN: string;
+}
+
+export interface WithinGeometryAndBufferRequestData {
+    drawnFeatures: FeatureCollection;
+    bufferedFeatures: FeatureCollection;
+}
+
+export interface BufferRequestData {
+    features: FeatureCollection;
+    distance: number;
+    units: string;
+}
+
+export interface Buffer {
+    distance: number;
+    units: string;
+}
+
+export interface User {
+    first_name: string;
+    last_name: string;
+    username: string;
+}
+
+export interface UserRefAndSetter {
+    user: Ref<User | null>;
+    setUser: (userToSet: User | null) => void;
+}
diff --git a/afrc/src/afrc/declarations.d.ts b/afrc/src/afrc/declarations.d.ts
index 6e9a067..952a3ab 100644
--- a/afrc/src/afrc/declarations.d.ts
+++ b/afrc/src/afrc/declarations.d.ts
@@ -2,3 +2,4 @@
 // Module homepage on npmjs.com uses logos "TS" or "DT" to indicate if typed
 
 import("@/arches/declarations.d.ts");
+declare module "@mapbox/mapbox-gl-draw";
diff --git a/afrc/templates/arches_urls.htm b/afrc/templates/arches_urls.htm
new file mode 100644
index 0000000..5eef4d9
--- /dev/null
+++ b/afrc/templates/arches_urls.htm
@@ -0,0 +1,15 @@
+{% extends "arches_urls.htm" %}
+
+{% load static %}
+{% load l10n %}
+{% load i18n %}
+
+{% block arches_urls %}
+{{ block.super }}
+<div class="arches-urls"
+    api-settings="{% url 'api-settings' %}"
+    api-map-data="{% url 'api-map-data' %}"
+    api-feature-buffer="{% url 'api-feature-buffer' %}"
+    api-geojson-bounds="{% url 'api-geojson-bounds' %}"
+></div>
+{% endblock arches_urls %}
diff --git a/afrc/urls.py b/afrc/urls.py
index b541b3f..211ce08 100644
--- a/afrc/urls.py
+++ b/afrc/urls.py
@@ -2,13 +2,19 @@
 from django.conf.urls.static import static
 from django.conf.urls.i18n import i18n_patterns
 from django.urls import include, path
+from afrc.views.settings_api import SettingsAPI
+from afrc.views.map_api import MapDataAPI, FeatureBufferAPI, GeoJSONBoundsAPI
 
 urlpatterns = [
     # project-level urls
+    path("api-settings", SettingsAPI.as_view(), name="api-settings"),
+    path("api-map-data", MapDataAPI.as_view(), name="api-map-data"),
+    path("api-feature-buffer", FeatureBufferAPI.as_view(), name="api-feature-buffer"),
+    path("api-geojson-bounds", GeoJSONBoundsAPI.as_view(), name="api-geojson-bounds"),
 ]
 
 # Ensure Arches core urls are superseded by project-level urls
-urlpatterns.append(path('', include('arches.urls')))
+urlpatterns.append(path("", include("arches.urls")))
 
 # Adds URL pattern to serve media files during development
 urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
diff --git a/afrc/views/map_api.py b/afrc/views/map_api.py
new file mode 100644
index 0000000..24452b9
--- /dev/null
+++ b/afrc/views/map_api.py
@@ -0,0 +1,132 @@
+import json
+from http import HTTPStatus
+
+from django.utils.translation import gettext as _
+from django.views.generic import View
+
+from arches.app.datatypes.datatypes import DataTypeFactory
+from arches.app.models import models
+from arches.app.models.concept import Concept
+from arches.app.models.system_settings import settings
+from arches.app.search.search_engine_factory import SearchEngineFactory
+from arches.app.search.mappings import RESOURCES_INDEX
+from arches.app.utils.file_validator import FileValidator
+from arches.app.utils.response import JSONResponse, JSONErrorResponse
+from arches.app.utils.permission_backend import user_can_read_map_layers
+from arches.app.utils.geo_utils import GeoUtils
+
+
+class MapDataAPI(View):
+    def get(self, request):
+        map_layers = user_can_read_map_layers(request.user)
+        map_sources = list(models.MapSource.objects.all())
+        for map_source in map_sources:
+            if "tiles" in map_source.source:
+                if not map_source.source["tiles"][0].startswith("http"):
+                    source = "{}{}".format(
+                        settings.PUBLIC_SERVER_ADDRESS, map_source.source["tiles"][0]
+                    )
+                    map_source.source["tiles"][0] = source
+
+        return JSONResponse(
+            {
+                "map_layers": map_layers,
+                "map_sources": map_sources,
+                # "resource_map_layers": resource_map_layers,
+                # "resource_map_sources": resource_map_sources,
+            }
+        )
+
+
+class FeatureGeometriesAPI(View):
+    def get(self, request):
+        resource_instance_id = request.GET.get("resource_instance_id")
+
+        se = SearchEngineFactory().create()
+        document = se.search(index=RESOURCES_INDEX, id=resource_instance_id)
+
+        geo_utils = GeoUtils()
+
+        for geometry in document["_source"]["geometries"]:
+            geometry["centroid"] = geo_utils.get_centroid(geometry["geom"])
+
+        return JSONResponse(document["_source"]["geometries"])
+
+
+class ResourceInstancesWithinGeometryAndBufferAPI(View):
+    def post(self, request):
+        data = json.loads(request.body)
+
+        geo_utils = GeoUtils()
+
+        intersection_and_difference_of_feature_collections = (
+            geo_utils.get_intersection_and_difference_of_feature_collections(
+                data["drawnFeatures"], data["bufferedFeatures"]
+            )
+        )
+
+        return JSONResponse(
+            {
+                "resources_intersecting_drawn_features": geo_utils.get_resource_instances_within_feature_collection(
+                    data["drawnFeatures"]
+                ),
+                "resources_intersecting_buffered_features": geo_utils.get_resource_instances_within_feature_collection(
+                    data["bufferedFeatures"]
+                ),
+                "resources_intersecting_buffers": geo_utils.get_resource_instances_within_feature_collection(
+                    {
+                        "type": "FeatureCollection",
+                        "features": [
+                            feature
+                            for feature in intersection_and_difference_of_feature_collections[
+                                "features"
+                            ]
+                            if feature["properties"].get("feature_type")
+                            == "difference_from_second"
+                        ],
+                    }
+                ),
+            }
+        )
+
+
+class FeatureBufferAPI(View):
+    def post(self, request):
+        data = json.loads(request.body)
+        features = data["features"]
+        geo_utils = GeoUtils()
+        return JSONResponse(features)
+
+
+class GeoJSONBoundsAPI(View):
+    def post(self, request):
+        geo_utils = GeoUtils()
+
+        return JSONResponse(geo_utils.get_bounds_from_geojson(json.loads(request.body)))
+
+
+class GeoJSONParseIntoCollectionAPI(View):
+    """Reshape arbitrary GeoJSON into a feature collection. The reshaping could
+    be done without a trip to the server, but doing so allows us to enforce
+    consistent (project-wide) file validation rules.
+    """
+
+    def post(self, request):
+        feature_file = request.FILES.get("geojson")
+        if not feature_file:
+            return JSONErrorResponse(
+                message=_("A geojson file is required."),
+                status=HTTPStatus.BAD_REQUEST,
+            )
+
+        validator = FileValidator()
+        if file_type_errors := validator.validate_file_type(feature_file):
+            return JSONErrorResponse(
+                message="\n".join(file_type_errors),
+                status=HTTPStatus.BAD_REQUEST,
+            )
+
+        feature_file.seek(0)
+        geojson_obj = json.load(feature_file)
+
+        return JSONResponse(GeoUtils.shape_geojson_as_feature_collection(geojson_obj))
diff --git a/afrc/views/settings_api.py b/afrc/views/settings_api.py
new file mode 100644
index 0000000..a3fe2ec
--- /dev/null
+++ b/afrc/views/settings_api.py
@@ -0,0 +1,15 @@
+from django.views.generic import View
+from django.utils.translation import get_language, get_language_bidi
+
+from arches.app.utils.response import JSONResponse
+from arches.app.models.system_settings import settings
+
+
+class SettingsAPI(View):
+    def get(self, request):
+        return JSONResponse(
+            {
+                "ACTIVE_LANGUAGE": get_language(),
+                "ACTIVE_LANGUAGE_DIRECTION": "rtl" if get_language_bidi() else "ltr",
+            }
+        )
diff --git a/afrc/wsgi.py b/afrc/wsgi.py
index ccdeff4..31a99f7 100644
--- a/afrc/wsgi.py
+++ b/afrc/wsgi.py
@@ -1,4 +1,4 @@
-'''
+"""
 ARCHES - a program developed to inventory and manage immovable cultural heritage.
 Copyright (C) 2013 J. Paul Getty Trust and World Monuments Fund
 
@@ -14,11 +14,12 @@
 
 You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <http://www.gnu.org/licenses/>.
-'''
+"""
 
 import os
 import sys
 import inspect
+
 path = os.path.dirname(os.path.abspath(inspect.getfile(inspect.currentframe())))
 
 if path not in sys.path:
@@ -27,10 +28,12 @@
 # reverting back to the old style of setting the DJANGO_SETTINGS_MODULE env variable
 # refer to the following blog post under the heading "Leaking of process environment variables."
 # http://blog.dscpl.com.au/2012/10/requests-running-in-wrong-django.html
-os.environ['DJANGO_SETTINGS_MODULE'] = "afrc.settings"
+os.environ["DJANGO_SETTINGS_MODULE"] = "afrc.settings"
 
 from django.core.wsgi import get_wsgi_application
+
 application = get_wsgi_application()
 
 from arches.app.models.system_settings import settings
+
 settings.update_from_db()
diff --git a/manage.py b/manage.py
index ecdc91e..44a8cd2 100644
--- a/manage.py
+++ b/manage.py
@@ -1,6 +1,6 @@
 #!/usr/bin/env python
 
-'''
+"""
 ARCHES - a program developed to inventory and manage immovable cultural heritage.
 Copyright (C) 2013 J. Paul Getty Trust and World Monuments Fund
 
@@ -16,7 +16,7 @@
 
 You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <http://www.gnu.org/licenses/>.
-'''
+"""
 
 
 import os
diff --git a/package-lock.json b/package-lock.json
index 0ce10c5..c5727f1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,7 +7,8 @@
             "name": "afrc",
             "license": "AGPL-3.0-only",
             "dependencies": {
-                "arches": "archesproject/arches#stable/7.6.2"
+                "arches": "archesproject/arches#stable/7.6.2",
+                "maplibre-gl": "^4.6.0"
             },
             "devDependencies": {
                 "arches-dev-dependencies": "archesproject/arches-dev-dependencies#stable/7.6.2"
@@ -2610,6 +2611,44 @@
                 "node": ">=6.0.0"
             }
         },
+        "node_modules/@maplibre/maplibre-gl-style-spec": {
+            "version": "20.4.0",
+            "resolved": "https://registry.npmjs.org/@maplibre/maplibre-gl-style-spec/-/maplibre-gl-style-spec-20.4.0.tgz",
+            "integrity": "sha512-AzBy3095fTFPjDjmWpR2w6HVRAZJ6hQZUCwk5Plz6EyfnfuQW1odeW5i2Ai47Y6TBA2hQnC+azscjBSALpaWgw==",
+            "license": "ISC",
+            "dependencies": {
+                "@mapbox/jsonlint-lines-primitives": "~2.0.2",
+                "@mapbox/unitbezier": "^0.0.1",
+                "json-stringify-pretty-compact": "^4.0.0",
+                "minimist": "^1.2.8",
+                "quickselect": "^2.0.0",
+                "rw": "^1.3.3",
+                "tinyqueue": "^3.0.0"
+            },
+            "bin": {
+                "gl-style-format": "dist/gl-style-format.mjs",
+                "gl-style-migrate": "dist/gl-style-migrate.mjs",
+                "gl-style-validate": "dist/gl-style-validate.mjs"
+            }
+        },
+        "node_modules/@maplibre/maplibre-gl-style-spec/node_modules/@mapbox/unitbezier": {
+            "version": "0.0.1",
+            "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.1.tgz",
+            "integrity": "sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw==",
+            "license": "BSD-2-Clause"
+        },
+        "node_modules/@maplibre/maplibre-gl-style-spec/node_modules/rw": {
+            "version": "1.3.3",
+            "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+            "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==",
+            "license": "BSD-3-Clause"
+        },
+        "node_modules/@maplibre/maplibre-gl-style-spec/node_modules/tinyqueue": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-3.0.0.tgz",
+            "integrity": "sha512-gRa9gwYU3ECmQYv3lslts5hxuIa90veaEcxDYuu3QGOIAEM2mOZkVHp48ANJuu1CURtRdHKUBY5Lm1tHV+sD4g==",
+            "license": "ISC"
+        },
         "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
             "version": "5.1.1-v1",
             "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
@@ -4938,6 +4977,15 @@
             "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.8.tgz",
             "integrity": "sha512-1rkryxURpr6aWP7R786/UQOkJ3PcpQiWkAXBmdWc7ryFWqN6a4xfK7BtjXvFBKO9LjQ+MWQSWxYeZX1OApnArA=="
         },
+        "node_modules/@types/geojson-vt": {
+            "version": "3.2.5",
+            "resolved": "https://registry.npmjs.org/@types/geojson-vt/-/geojson-vt-3.2.5.tgz",
+            "integrity": "sha512-qDO7wqtprzlpe8FfQ//ClPV9xiuoh2nkIgiouIptON9w5jvD/fA4szvP9GBlDVdJ5dldAl0kX/sy3URbWwLx0g==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/geojson": "*"
+            }
+        },
         "node_modules/@types/glob": {
             "version": "7.2.0",
             "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.2.0.tgz",
@@ -5017,6 +5065,23 @@
                 "@types/node": "*"
             }
         },
+        "node_modules/@types/mapbox__point-geometry": {
+            "version": "0.1.4",
+            "resolved": "https://registry.npmjs.org/@types/mapbox__point-geometry/-/mapbox__point-geometry-0.1.4.tgz",
+            "integrity": "sha512-mUWlSxAmYLfwnRBmgYV86tgYmMIICX4kza8YnE/eIlywGe2XoOxlpVnXWwir92xRLjwyarqwpu2EJKD2pk0IUA==",
+            "license": "MIT"
+        },
+        "node_modules/@types/mapbox__vector-tile": {
+            "version": "1.3.4",
+            "resolved": "https://registry.npmjs.org/@types/mapbox__vector-tile/-/mapbox__vector-tile-1.3.4.tgz",
+            "integrity": "sha512-bpd8dRn9pr6xKvuEBQup8pwQfD4VUyqO/2deGjfpe6AwC8YRlyEipvefyRJUSiCJTZuCb8Pl1ciVV5ekqJ96Bg==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/geojson": "*",
+                "@types/mapbox__point-geometry": "*",
+                "@types/pbf": "*"
+            }
+        },
         "node_modules/@types/mime": {
             "version": "1.3.5",
             "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.5.tgz",
@@ -5060,6 +5125,12 @@
             "resolved": "https://registry.npmjs.org/@types/parse5/-/parse5-5.0.3.tgz",
             "integrity": "sha512-kUNnecmtkunAoQ3CnjmMkzNU/gtxG8guhi+Fk2U/kOpIKjIMKnXGp4IJCgQJrXSgMsWYimYG4TGjz/UzbGEBTw=="
         },
+        "node_modules/@types/pbf": {
+            "version": "3.0.5",
+            "resolved": "https://registry.npmjs.org/@types/pbf/-/pbf-3.0.5.tgz",
+            "integrity": "sha512-j3pOPiEcWZ34R6a6mN07mUkM4o4Lwf6hPNt8eilOeZhTFbxFXmKhvXl9Y28jotFPaI1bpPDJsbCprUoNke6OrA==",
+            "license": "MIT"
+        },
         "node_modules/@types/qs": {
             "version": "6.9.16",
             "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.16.tgz",
@@ -5125,6 +5196,15 @@
                 "@types/node": "*"
             }
         },
+        "node_modules/@types/supercluster": {
+            "version": "7.1.3",
+            "resolved": "https://registry.npmjs.org/@types/supercluster/-/supercluster-7.1.3.tgz",
+            "integrity": "sha512-Z0pOY34GDFl3Q6hUFYf3HkTwKEE02e7QgtJppBt+beEAxnyOpJua+voGFvxINBHa06GwLFFym7gRPY2SiKIfIA==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/geojson": "*"
+            }
+        },
         "node_modules/@types/unist": {
             "version": "2.0.11",
             "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
@@ -11470,6 +11550,12 @@
             "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
             "dev": true
         },
+        "node_modules/json-stringify-pretty-compact": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/json-stringify-pretty-compact/-/json-stringify-pretty-compact-4.0.0.tgz",
+            "integrity": "sha512-3CNZ2DnrpByG9Nqj6Xo8vqbjT4F6N+tb4Gb28ESAZjYZ5yqvmc56J+/kuIwkaAMOyblTQhUW7PxMkUb8Q36N3Q==",
+            "license": "MIT"
+        },
         "node_modules/json5": {
             "version": "2.2.3",
             "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
@@ -11859,6 +11945,157 @@
             "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
             "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ=="
         },
+        "node_modules/maplibre-gl": {
+            "version": "4.7.1",
+            "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-4.7.1.tgz",
+            "integrity": "sha512-lgL7XpIwsgICiL82ITplfS7IGwrB1OJIw/pCvprDp2dhmSSEBgmPzYRvwYYYvJGJD7fxUv1Tvpih4nZ6VrLuaA==",
+            "license": "BSD-3-Clause",
+            "dependencies": {
+                "@mapbox/geojson-rewind": "^0.5.2",
+                "@mapbox/jsonlint-lines-primitives": "^2.0.2",
+                "@mapbox/point-geometry": "^0.1.0",
+                "@mapbox/tiny-sdf": "^2.0.6",
+                "@mapbox/unitbezier": "^0.0.1",
+                "@mapbox/vector-tile": "^1.3.1",
+                "@mapbox/whoots-js": "^3.1.0",
+                "@maplibre/maplibre-gl-style-spec": "^20.3.1",
+                "@types/geojson": "^7946.0.14",
+                "@types/geojson-vt": "3.2.5",
+                "@types/mapbox__point-geometry": "^0.1.4",
+                "@types/mapbox__vector-tile": "^1.3.4",
+                "@types/pbf": "^3.0.5",
+                "@types/supercluster": "^7.1.3",
+                "earcut": "^3.0.0",
+                "geojson-vt": "^4.0.2",
+                "gl-matrix": "^3.4.3",
+                "global-prefix": "^4.0.0",
+                "kdbush": "^4.0.2",
+                "murmurhash-js": "^1.0.0",
+                "pbf": "^3.3.0",
+                "potpack": "^2.0.0",
+                "quickselect": "^3.0.0",
+                "supercluster": "^8.0.1",
+                "tinyqueue": "^3.0.0",
+                "vt-pbf": "^3.1.3"
+            },
+            "engines": {
+                "node": ">=16.14.0",
+                "npm": ">=8.1.0"
+            },
+            "funding": {
+                "url": "https://github.com/maplibre/maplibre-gl-js?sponsor=1"
+            }
+        },
+        "node_modules/maplibre-gl/node_modules/@mapbox/tiny-sdf": {
+            "version": "2.0.6",
+            "resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-2.0.6.tgz",
+            "integrity": "sha512-qMqa27TLw+ZQz5Jk+RcwZGH7BQf5G/TrutJhspsca/3SHwmgKQ1iq+d3Jxz5oysPVYTGP6aXxCo5Lk9Er6YBAA==",
+            "license": "BSD-2-Clause"
+        },
+        "node_modules/maplibre-gl/node_modules/@mapbox/unitbezier": {
+            "version": "0.0.1",
+            "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.1.tgz",
+            "integrity": "sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw==",
+            "license": "BSD-2-Clause"
+        },
+        "node_modules/maplibre-gl/node_modules/@types/geojson": {
+            "version": "7946.0.14",
+            "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.14.tgz",
+            "integrity": "sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg==",
+            "license": "MIT"
+        },
+        "node_modules/maplibre-gl/node_modules/earcut": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/earcut/-/earcut-3.0.0.tgz",
+            "integrity": "sha512-41Fs7Q/PLq1SDbqjsgcY7GA42T0jvaCNGXgGtsNdvg+Yv8eIu06bxv4/PoREkZ9nMDNwnUSG9OFB9+yv8eKhDg==",
+            "license": "ISC"
+        },
+        "node_modules/maplibre-gl/node_modules/geojson-vt": {
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/geojson-vt/-/geojson-vt-4.0.2.tgz",
+            "integrity": "sha512-AV9ROqlNqoZEIJGfm1ncNjEXfkz2hdFlZf0qkVfmkwdKa8vj7H16YUOT81rJw1rdFhyEDlN2Tds91p/glzbl5A==",
+            "license": "ISC"
+        },
+        "node_modules/maplibre-gl/node_modules/global-prefix": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-4.0.0.tgz",
+            "integrity": "sha512-w0Uf9Y9/nyHinEk5vMJKRie+wa4kR5hmDbEhGGds/kG1PwGLLHKRoNMeJOyCQjjBkANlnScqgzcFwGHgmgLkVA==",
+            "license": "MIT",
+            "dependencies": {
+                "ini": "^4.1.3",
+                "kind-of": "^6.0.3",
+                "which": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=16"
+            }
+        },
+        "node_modules/maplibre-gl/node_modules/ini": {
+            "version": "4.1.3",
+            "resolved": "https://registry.npmjs.org/ini/-/ini-4.1.3.tgz",
+            "integrity": "sha512-X7rqawQBvfdjS10YU1y1YVreA3SsLrW9dX2CewP2EbBJM4ypVNLDkO5y04gejPwKIY9lR+7r9gn3rFPt/kmWFg==",
+            "license": "ISC",
+            "engines": {
+                "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+            }
+        },
+        "node_modules/maplibre-gl/node_modules/isexe": {
+            "version": "3.1.1",
+            "resolved": "https://registry.npmjs.org/isexe/-/isexe-3.1.1.tgz",
+            "integrity": "sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ==",
+            "license": "ISC",
+            "engines": {
+                "node": ">=16"
+            }
+        },
+        "node_modules/maplibre-gl/node_modules/kdbush": {
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-4.0.2.tgz",
+            "integrity": "sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA==",
+            "license": "ISC"
+        },
+        "node_modules/maplibre-gl/node_modules/potpack": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/potpack/-/potpack-2.0.0.tgz",
+            "integrity": "sha512-Q+/tYsFU9r7xoOJ+y/ZTtdVQwTWfzjbiXBDMM/JKUux3+QPP02iUuIoeBQ+Ot6oEDlC+/PGjB/5A3K7KKb7hcw==",
+            "license": "ISC"
+        },
+        "node_modules/maplibre-gl/node_modules/quickselect": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-3.0.0.tgz",
+            "integrity": "sha512-XdjUArbK4Bm5fLLvlm5KpTFOiOThgfWWI4axAZDWg4E/0mKdZyI9tNEfds27qCi1ze/vwTR16kvmmGhRra3c2g==",
+            "license": "ISC"
+        },
+        "node_modules/maplibre-gl/node_modules/supercluster": {
+            "version": "8.0.1",
+            "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-8.0.1.tgz",
+            "integrity": "sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==",
+            "license": "ISC",
+            "dependencies": {
+                "kdbush": "^4.0.2"
+            }
+        },
+        "node_modules/maplibre-gl/node_modules/tinyqueue": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-3.0.0.tgz",
+            "integrity": "sha512-gRa9gwYU3ECmQYv3lslts5hxuIa90veaEcxDYuu3QGOIAEM2mOZkVHp48ANJuu1CURtRdHKUBY5Lm1tHV+sD4g==",
+            "license": "ISC"
+        },
+        "node_modules/maplibre-gl/node_modules/which": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/which/-/which-4.0.0.tgz",
+            "integrity": "sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg==",
+            "license": "ISC",
+            "dependencies": {
+                "isexe": "^3.1.1"
+            },
+            "bin": {
+                "node-which": "bin/which.js"
+            },
+            "engines": {
+                "node": "^16.13.0 || >=18.0.0"
+            }
+        },
         "node_modules/mathml-tag-names": {
             "version": "2.1.3",
             "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz",
diff --git a/package.json b/package.json
index fb8baa0..82144e5 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,8 @@
         "vitest": "vitest --run --coverage"
     },
     "dependencies": {
-        "arches": "archesproject/arches#stable/7.6.2"
+        "arches": "archesproject/arches#stable/7.6.2",
+        "maplibre-gl": "^4.6.0"
     },
     "devDependencies": {
         "arches-dev-dependencies": "archesproject/arches-dev-dependencies#stable/7.6.2"
diff --git a/tests/search_indexes/sample_index_tests.py b/tests/search_indexes/sample_index_tests.py
index 059e876..c44a1b7 100644
--- a/tests/search_indexes/sample_index_tests.py
+++ b/tests/search_indexes/sample_index_tests.py
@@ -4,21 +4,34 @@
 from afrc.search_indexes.sample_index import SampleIndex
 from django.test import TestCase
 
+
 class TestSampleIndex(TestCase):
     def test_prepare_index(self):
         sample_index = SampleIndex(index_name="Sample Index")
         sample_index.prepare_index()
 
-        expected_index_metadata = {"mappings": {"properties": {"tile_count": {"type": "keyword"}, "graph_id": {"type": "keyword"}}}}
+        expected_index_metadata = {
+            "mappings": {
+                "properties": {
+                    "tile_count": {"type": "keyword"},
+                    "graph_id": {"type": "keyword"},
+                }
+            }
+        }
         self.assertEqual(sample_index.index_metadata, expected_index_metadata)
 
     def test_get_documents_to_index(self):
         sample_index = SampleIndex(index_name="Sample Index")
-        
+
         mock_resourceinstance = Mock(graph_id="test_graph_id")
         mock_tiles = [Mock(), Mock(), Mock()]  # Mock tiles list
 
-        documents, doc_id = sample_index.get_documents_to_index(mock_resourceinstance, mock_tiles)
+        documents, doc_id = sample_index.get_documents_to_index(
+            mock_resourceinstance, mock_tiles
+        )
 
-        self.assertEqual(documents, {"tile_count": len(mock_tiles), "graph_id": mock_resourceinstance.graph_id})
+        self.assertEqual(
+            documents,
+            {"tile_count": len(mock_tiles), "graph_id": mock_resourceinstance.graph_id},
+        )
         self.assertEqual(doc_id, str(mock_resourceinstance.resourceinstanceid))
diff --git a/tests/test_settings.py b/tests/test_settings.py
index c80a2ab..239906b 100644
--- a/tests/test_settings.py
+++ b/tests/test_settings.py
@@ -43,14 +43,9 @@
         "PASSWORD": "postgis",
         "PORT": "5432",
         "POSTGIS_TEMPLATE": "template_postgis",
-        "TEST": {
-            "CHARSET": None,
-            "COLLATION": None,
-            "MIRROR": None,
-            "NAME": None
-        },
+        "TEST": {"CHARSET": None, "COLLATION": None, "MIRROR": None, "NAME": None},
         "TIME_ZONE": None,
-        "USER": "postgres"
+        "USER": "postgres",
     }
 }