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";