diff --git a/src/components/ObsDetails/DetailsTab/DetailsMapContainer.js b/src/components/ObsDetails/DetailsTab/DetailsMapContainer.js
deleted file mode 100644
index 4d282505d..000000000
--- a/src/components/ObsDetails/DetailsTab/DetailsMapContainer.js
+++ /dev/null
@@ -1,79 +0,0 @@
-// @flow
-
-import Clipboard from "@react-native-clipboard/clipboard";
-import DetailsMap from "components/ObsDetails/DetailsTab/DetailsMap";
-import checkCamelAndSnakeCase from "components/ObsDetails/helpers/checkCamelAndSnakeCase";
-import { t } from "i18next";
-import type { Node } from "react";
-import React, { useRef, useState } from "react";
-import openMap from "react-native-open-maps";
-
-type Props = {
-  observation: Object,
-  latitude: number,
-  longitude: number,
-  closeModal: Function,
-  obscured: bool,
-  tileMapParams: ?Object
-}
-
-const DetailsMapContainer = ( {
-  observation, latitude, longitude, closeModal, obscured, tileMapParams
-}: Props ): Node => {
-  const coordinateString = t( "Lat-Lon", {
-    latitude,
-    longitude
-  } );
-
-  const [showNotificationModal, setShowNotificationModal] = useState( false );
-  const displayCoordinates = t( "Lat-Lon-Acc", {
-    latitude,
-    longitude,
-    accuracy: observation?.positional_accuracy?.toFixed( 0 ) || t( "none" )
-  } );
-  let displayLocation = (
-    checkCamelAndSnakeCase( observation, "placeGuess" )
-    || checkCamelAndSnakeCase( observation, "privatePlaceGuess" )
-  );
-
-  if ( !displayLocation ) {
-    displayLocation = t( "No-Location" );
-  }
-
-  const closeShowNotificationModal = () => {
-    setShowNotificationModal( false );
-  };
-  const copyCoordinates = () => {
-    Clipboard.setString( coordinateString );
-    setShowNotificationModal( true );
-    // notification disappears after 2 secs
-    setTimeout( closeShowNotificationModal, 2000 );
-  };
-
-  const shareMap = () => {
-    // takes in a provider prop but opens in browser instead of in app(google maps on iOS)
-    openMap( { query: `${latitude}, ${longitude}` } );
-  };
-
-  const mapViewRef = useRef<any>( null );
-
-  return (
-    <DetailsMap
-      mapViewRef={mapViewRef}
-      latitude={latitude}
-      longitude={longitude}
-      obscured={obscured}
-      positionalAccuracy={observation.positional_accuracy}
-      displayLocation={displayLocation}
-      displayCoordinates={displayCoordinates}
-      copyCoordinates={copyCoordinates}
-      shareMap={shareMap}
-      showNotificationModal={showNotificationModal}
-      closeNotificationsModal={closeShowNotificationModal}
-      closeModal={closeModal}
-      tileMapParams={tileMapParams}
-    />
-  );
-};
-
-export default DetailsMapContainer;
diff --git a/src/components/ObsDetails/DetailsTab/DetailsMapHeader.js b/src/components/ObsDetails/DetailsTab/DetailsMapHeader.js
new file mode 100644
index 000000000..a763cee7b
--- /dev/null
+++ b/src/components/ObsDetails/DetailsTab/DetailsMapHeader.js
@@ -0,0 +1,38 @@
+// @flow
+
+import {
+  Body4,
+  ObservationLocation
+} from "components/SharedComponents";
+import { View } from "components/styledComponents";
+import type { Node } from "react";
+import React from "react";
+import { useTranslation } from "sharedHooks";
+
+type Props = {
+  observation: Object,
+  obscured?: boolean
+}
+
+const DetailsMapHeader = ( {
+  observation,
+  obscured
+}: Props ): Node => {
+  const { t } = useTranslation( );
+  return (
+    <View className="flex-col ml-4">
+      <ObservationLocation
+        observation={observation}
+        obscured={obscured}
+        withCoordinates
+      />
+      {obscured && (
+        <Body4 className="italic">
+          {t( "Obscured-observation-location-map-description" )}
+        </Body4>
+      ) }
+    </View>
+  );
+};
+
+export default DetailsMapHeader;
diff --git a/src/components/ObsDetails/DetailsTab/DetailsTab.js b/src/components/ObsDetails/DetailsTab/DetailsTab.js
index f35c740f4..27f866457 100644
--- a/src/components/ObsDetails/DetailsTab/DetailsTab.js
+++ b/src/components/ObsDetails/DetailsTab/DetailsTab.js
@@ -7,6 +7,7 @@ import {
   Body4,
   Button,
   DateDisplay,
+  DetailsMap,
   Divider,
   Heading4,
   ObservationLocation,
@@ -28,12 +29,14 @@ import {
 } from "sharedHooks";
 
 import Attribution from "./Attribution";
-import DetailsMapContainer from "./DetailsMapContainer";
+import DetailsMapHeader from "./DetailsMapHeader";
 
 type Props = {
   observation: Object
 }
 
+const DETAILS_MAP_MODAL_STYLE = { margin: 0 };
+
 const ViewInBrowserButton = ( { id } ) => {
   const url = `https://inaturalist.org/observations/${id}`;
   const handlePress = useCallback( async () => {
@@ -175,13 +178,15 @@ const DetailsTab = ( { observation }: Props ): Node => {
           positionalAccuracy={positionalAccuracy}
           tileMapParams={tileMapParams}
           withObsTiles={tileMapParams !== null}
+          scrollEnabled={false}
+          zoomEnabled={false}
+          zoomTapEnabled={false}
         />
       ) }
 
       <View className={`mt-[11px] space-y-[11px] ${sectionClass}`}>
         <ObservationLocation observation={observation} obscured={isObscured} details />
-        {isObscured
-        && (
+        {isObscured && (
           <Body4 className="italic ml-[20px]">
             {t( "Obscured-observation-location-map-description" )}
           </Body4>
@@ -222,18 +227,13 @@ const DetailsTab = ( { observation }: Props ): Node => {
       </View>
       <Divider />
 
-      <View className={sectionClass}>
-        <Heading4 className={headingClass}>{t( "PROJECTS" )}</Heading4>
-        <Heading4 className={headingClass}>
-          {
-          // eslint-disable-next-line i18next/no-literal-string
-          }
-          TODO: this section does nothing
-        </Heading4>
-        <Button text={t( "VIEW-PROJECTS" )} />
-      </View>
-
-      <Divider />
+      {/*
+        <View className={sectionClass}>
+          <Heading4 className={headingClass}>{t( "PROJECTS" )}</Heading4>
+          <Button text={t( "VIEW-PROJECTS" )} />
+        </View>
+        <Divider />
+      */}
 
       <View className={`${sectionClass} space-y-[11px]`}>
         <Heading4 className={headingClass}>{t( "OTHER-DATA" )}</Heading4>
@@ -249,16 +249,23 @@ const DetailsTab = ( { observation }: Props ): Node => {
         showModal={showMapModal}
         closeModal={( ) => setShowMapModal( false )}
         disableSwipeDirection
-        // eslint-disable-next-line react-native/no-inline-styles
-        style={{ margin: 0 }}
+        style={DETAILS_MAP_MODAL_STYLE}
         modal={(
-          <DetailsMapContainer
-            observation={observation}
+          <DetailsMap
             latitude={latitude}
             longitude={longitude}
             obscured={isObscured}
+            coordinateString={coordinateString}
             closeModal={( ) => setShowMapModal( false )}
+            positionalAccuracy={observation.positional_accuracy}
             tileMapParams={tileMapParams}
+            showLocationIndicator
+            headerTitle={(
+              <DetailsMapHeader
+                observation={observation}
+                obscured={isObscured}
+              />
+            )}
           />
         )}
       />
diff --git a/src/components/ObsDetails/DetailsTab/DetailsMap.js b/src/components/SharedComponents/DetailsMap.js
similarity index 68%
rename from src/components/ObsDetails/DetailsTab/DetailsMap.js
rename to src/components/SharedComponents/DetailsMap.js
index cc4c2185c..c886a6954 100644
--- a/src/components/ObsDetails/DetailsTab/DetailsMap.js
+++ b/src/components/SharedComponents/DetailsMap.js
@@ -1,10 +1,12 @@
 // @flow
 
+import Clipboard from "@react-native-clipboard/clipboard";
 import { HeaderBackButton } from "@react-navigation/elements";
 import classnames from "classnames";
+import CoordinatesCopiedNotification
+  from "components/ObsDetails/DetailsTab/CoordinatesCopiedNotification";
 import {
-  Body2,
-  Body4,
+  Heading2,
   INatIconButton,
   Map,
   Modal
@@ -15,32 +17,24 @@ import {
 } from "components/styledComponents";
 import { t } from "i18next";
 import type { Node } from "react";
-import React from "react";
+import React, { useState } from "react";
+import openMap from "react-native-open-maps";
 import { useTheme } from "react-native-paper";
 import IconMaterial from "react-native-vector-icons/MaterialCommunityIcons";
 import { getShadowForColor } from "styles/global";
 
-import CoordinatesCopiedNotification from "./CoordinatesCopiedNotification";
-
-const HEADER_BACK_BUTTON_STYLE = {
-  marginBottom: 15,
-  marginLeft: 15
-};
-
 type Props = {
   latitude: number,
   longitude: number,
   obscured?: boolean,
-  positionalAccuracy: number,
+  positionalAccuracy?: number,
   mapViewRef: any,
-  showNotificationModal: boolean,
-  displayLocation: string,
-  displayCoordinates: string,
-  closeNotificationsModal: Function,
-  copyCoordinates: Function,
-  shareMap: Function,
+  region?: Object,
   closeModal: Function,
-  tileMapParams: Object
+  tileMapParams: Object,
+  headerTitle?: Object,
+  showLocationIndicator: boolean,
+  coordinateString?: string
 }
 
 const FloatingActionButton = ( {
@@ -82,58 +76,56 @@ const FloatingActionButton = ( {
 
 const DetailsMap = ( {
   closeModal,
-  closeNotificationsModal,
-  copyCoordinates,
-  displayCoordinates,
-  displayLocation,
   latitude,
   longitude,
   mapViewRef,
   obscured,
   positionalAccuracy,
-  shareMap,
-  showNotificationModal,
-  tileMapParams
+  tileMapParams,
+  headerTitle,
+  showLocationIndicator,
+  region,
+  coordinateString
 }: Props ): Node => {
   const theme = useTheme( );
+  const [showNotificationModal, setShowNotificationModal] = useState( false );
+
+  const closeShowNotificationModal = () => {
+    setShowNotificationModal( false );
+  };
+  const copyCoordinates = () => {
+    if ( coordinateString ) {
+      Clipboard.setString( coordinateString );
+      setShowNotificationModal( true );
+      // notification disappears after 2 secs
+      setTimeout( closeShowNotificationModal, 2000 );
+    }
+  };
+
+  const shareMap = () => {
+    // takes in a provider prop but opens in browser instead of in app(google maps on iOS)
+    openMap( { query: `${latitude}, ${longitude}` } );
+  };
+
   return (
     <SafeAreaView className="flex-1">
-      <View className="bg-white w-fit flex-row items-end">
+      <View
+        className="bg-white w-fit flex-row py-[22px] items-start"
+      >
         <HeaderBackButton
           tintColor={theme.colors.primary}
           onPress={( ) => closeModal()}
-          style={HEADER_BACK_BUTTON_STYLE}
         />
-        <View className="pt-5 pr-5 pb-5 flex-1">
-          <Body2
-            className="text-darkGray"
-            numberOfLines={1}
-            ellipsizeMode="tail"
-          >
-            {displayLocation}
-          </Body2>
-
-          <Body2
-            className="text-darkGray"
-            numberOfLines={1}
-            ellipsizeMode="tail"
-          >
-            {displayCoordinates}
-          </Body2>
-          {obscured && (
-            <Body4 className="italic">
-              {t( "Obscured-observation-location-map-description" )}
-            </Body4>
-          ) }
-        </View>
+        {headerTitle || <Heading2 className="m-0">{t( "Map-Area" )}</Heading2>}
       </View>
       <View className="flex-1 h-full">
         <Map
-          showLocationIndicator
+          showLocationIndicator={showLocationIndicator}
           showCurrentLocationButton
           showSwitchMapTypeButton
           obsLatitude={latitude}
           obsLongitude={longitude}
+          region={region}
           mapHeight="100%"
           obscured={obscured}
           positionalAccuracy={positionalAccuracy}
@@ -141,7 +133,7 @@ const DetailsMap = ( {
           withObsTiles={tileMapParams !== null}
           tileMapParams={tileMapParams}
         >
-          { !obscured && (
+          { ( !obscured && showLocationIndicator ) && (
             <>
               <FloatingActionButton
                 icon="copy"
@@ -169,7 +161,7 @@ const DetailsMap = ( {
         animationIn="fadeIn"
         animationOut="fadeOut"
         showModal={showNotificationModal}
-        closeModal={( ) => closeNotificationsModal( false )}
+        closeModal={( ) => closeShowNotificationModal( )}
         modal={(
           <CoordinatesCopiedNotification />
         )}
diff --git a/src/components/SharedComponents/Map.js b/src/components/SharedComponents/Map.js
index 8b59a7699..d0c8c0fdf 100644
--- a/src/components/SharedComponents/Map.js
+++ b/src/components/SharedComponents/Map.js
@@ -86,6 +86,7 @@ type Props = {
   permissionRequested?: boolean,
   positionalAccuracy?: number,
   region?: Object,
+  scrollEnabled?: boolean,
   showCurrentLocationButton?: boolean,
   showLocationIndicator?: boolean,
   showsCompass?: boolean,
@@ -98,6 +99,8 @@ type Props = {
   tileMapParams?: Object,
   withObsTiles?: boolean,
   withPressableObsTiles?: boolean,
+  zoomEnabled?: boolean,
+  zoomTapEnabled?: boolean
 }
 
 const getShadow = shadowColor => getShadowStyle( {
@@ -135,6 +138,7 @@ const Map = ( {
   permissionRequested: permissionRequestedProp,
   positionalAccuracy,
   region,
+  scrollEnabled = true,
   showCurrentLocationButton,
   showLocationIndicator,
   showsCompass,
@@ -146,7 +150,9 @@ const Map = ( {
   testID,
   tileMapParams,
   withObsTiles,
-  withPressableObsTiles
+  withPressableObsTiles,
+  zoomEnabled = true,
+  zoomTapEnabled = true
 }: Props ): Node => {
   const { screenWidth } = useDeviceOrientation( );
   const [currentZoom, setCurrentZoom] = useState(
@@ -449,6 +455,9 @@ const Map = ( {
         minZoomLevel={minZoomLevel}
         rotateEnabled={false}
         pitchEnabled={false}
+        scrollEnabled={scrollEnabled}
+        zoomEnabled={zoomEnabled}
+        zoomTapEnabled={zoomTapEnabled}
       >
         <ObsUrlTile />
         {( showLocationIndicator && ( !obscured ) ) && (
diff --git a/src/components/SharedComponents/ObservationLocation.js b/src/components/SharedComponents/ObservationLocation.js
index 12a2affea..1dca54fa8 100644
--- a/src/components/SharedComponents/ObservationLocation.js
+++ b/src/components/SharedComponents/ObservationLocation.js
@@ -1,7 +1,7 @@
 // @flow
 import classNames from "classnames";
 import checkCamelAndSnakeCase from "components/ObsDetails/helpers/checkCamelAndSnakeCase";
-import { Body3, Body4 } from "components/SharedComponents";
+import { Body4 } from "components/SharedComponents";
 import ContentWithIcon from "components/SharedComponents/ObsDetails/ContentWithIcon";
 import { View } from "components/styledComponents";
 import type { Node } from "react";
@@ -9,15 +9,21 @@ import React, { useCallback, useMemo } from "react";
 import { useTranslation } from "sharedHooks";
 
 type Props = {
-  observation: Object,
-  obscured?: boolean,
   classNameMargin?: string,
-  details?: boolean,
-  large?: boolean
+  details?: boolean, // Same as withCoordinates && withGeoprivacy
+  obscured?: boolean,
+  observation: Object,
+  withCoordinates?: boolean,
+  withGeoprivacy?: boolean,
 };
 
 const ObservationLocation = ( {
-  observation, classNameMargin, details, large, obscured
+  classNameMargin,
+  details,
+  obscured,
+  observation,
+  withCoordinates,
+  withGeoprivacy
 }: Props ): Node => {
   const { t } = useTranslation( );
   const geoprivacy = observation?.geoprivacy;
@@ -35,10 +41,6 @@ const ObservationLocation = ( {
     return t( "Open" );
   }, [geoprivacy, t] );
 
-  const TextComponent = large
-    ? Body3
-    : Body4;
-
   const displayCoords = useMemo( ( ) => {
     if ( ( observation?.latitude !== null && observation?.latitude !== undefined )
         && ( observation?.longitude != null && observation?.longitude !== undefined )
@@ -81,20 +83,53 @@ const ObservationLocation = ( {
     if ( displayPrivacy === null || displayPrivacy === "open" ) {
       displayPrivacy = "Open";
     }
+    const geoprivacyInner = (
+      <View className="flex-row space-x-[2px]">
+        <Body4
+          className="text-darkGray"
+          numberOfLines={1}
+          ellipsizeMode="tail"
+        >
+          {t( "Geoprivacy-status", { status: t( displayPrivacy ) } )}
+        </Body4>
+      </View>
+    );
     return (
       <ContentWithIcon icon="globe-outline" size={14} classNameMargin="mt-[11px]">
-        <View className="flex-row space-x-[2px]">
-          <TextComponent
-            className="text-darkGray"
-            numberOfLines={1}
-            ellipsizeMode="tail"
-          >
-            {t( "Geoprivacy-status", { status: t( displayPrivacy ) } )}
-          </TextComponent>
-        </View>
+        { geoprivacyInner }
       </ContentWithIcon>
     );
-  }, [displayGeoprivacy, t] );
+  }, [
+    displayGeoprivacy,
+    t
+  ] );
+
+  const inner = useMemo( ( ) => (
+    <View className="flex-col space-y-[11px]">
+      <Body4
+        className="text-darkGray"
+        numberOfLines={1}
+        ellipsizeMode="tail"
+      >
+        {displayLocation}
+      </Body4>
+      {( ( details || withCoordinates ) && displayCoords )
+       && (
+         <Body4
+           className="text-darkGray"
+           numberOfLines={1}
+           ellipsizeMode="tail"
+         >
+           {displayCoords}
+         </Body4>
+       )}
+    </View>
+  ), [
+    details,
+    displayCoords,
+    displayLocation,
+    withCoordinates
+  ] );
 
   if ( !observation ) {
     return null;
@@ -109,29 +144,8 @@ const ObservationLocation = ( {
         text: displayLocation
       }}
     >
-      <ContentWithIcon icon="location" size={14}>
-        <View className="flex-col space-y-[11px]">
-          <TextComponent
-            className="text-darkGray"
-            numberOfLines={1}
-            ellipsizeMode="tail"
-          >
-            {displayLocation}
-          </TextComponent>
-          {( details && displayCoords )
-           && (
-             <TextComponent
-               className="text-darkGray"
-               numberOfLines={1}
-               ellipsizeMode="tail"
-             >
-               {displayCoords}
-             </TextComponent>
-           )}
-        </View>
-      </ContentWithIcon>
-      {details
-        && showGeoprivacy()}
+      <ContentWithIcon icon="location" size={14}>{ inner }</ContentWithIcon>
+      {( details || withGeoprivacy ) && showGeoprivacy()}
     </View>
   );
 };
diff --git a/src/components/SharedComponents/index.js b/src/components/SharedComponents/index.js
index 980a83cbe..438f27c52 100644
--- a/src/components/SharedComponents/index.js
+++ b/src/components/SharedComponents/index.js
@@ -14,6 +14,7 @@ export { default as Checkbox } from "./Checkbox";
 export { default as ConfidenceInterval } from "./ConfidenceInterval";
 export { default as DateDisplay } from "./DateDisplay";
 export { default as DateTimePicker } from "./DateTimePicker";
+export { default as DetailsMap } from "./DetailsMap";
 export { default as DisplayTaxon } from "./DisplayTaxon";
 export { default as DisplayTaxonName } from "./DisplayTaxonName";
 export { default as Divider } from "./Divider/Divider";
diff --git a/src/components/TaxonDetails/TaxonDetails.js b/src/components/TaxonDetails/TaxonDetails.js
index a3d00f813..fe5b1aec3 100644
--- a/src/components/TaxonDetails/TaxonDetails.js
+++ b/src/components/TaxonDetails/TaxonDetails.js
@@ -36,6 +36,7 @@ import { useAuthenticatedQuery, useTranslation, useUserMe } from "sharedHooks";
 import EstablishmentMeans from "./EstablishmentMeans";
 import TaxonDetailsMediaViewerHeader from "./TaxonDetailsMediaViewerHeader";
 import TaxonDetailsTitle from "./TaxonDetailsTitle";
+import TaxonMapPreview from "./TaxonMapPreview";
 import Taxonomy from "./Taxonomy";
 import Wikipedia from "./Wikipedia";
 
@@ -119,10 +120,11 @@ const TaxonDetails = ( ): Node => {
     }
 
     return (
-      <View className="mx-3">
+      <View className="mx-3 mb-3">
         <EstablishmentMeans taxon={taxon} />
         <Wikipedia taxon={taxon} />
         <Taxonomy taxon={taxon} />
+        <TaxonMapPreview taxon={taxon} />
       </View>
     );
   };
diff --git a/src/components/TaxonDetails/TaxonDetailsTitle.js b/src/components/TaxonDetails/TaxonDetailsTitle.js
index ff96cccd2..080e7a3da 100644
--- a/src/components/TaxonDetails/TaxonDetailsTitle.js
+++ b/src/components/TaxonDetails/TaxonDetailsTitle.js
@@ -30,7 +30,7 @@ const TaxonDetailsTitle = ( {
   const { t } = useTranslation( );
 
   return (
-    <View className="flex-1 flex-col">
+    <View className="flex-1 flex-col ml-4">
       { taxon?.rank && (
         <View className="flex-row items-center">
           <Heading4 className={optionalClasses}>
diff --git a/src/components/TaxonDetails/TaxonMapPreview.js b/src/components/TaxonDetails/TaxonMapPreview.js
new file mode 100644
index 000000000..b523990a2
--- /dev/null
+++ b/src/components/TaxonDetails/TaxonMapPreview.js
@@ -0,0 +1,116 @@
+// @flow
+
+import { searchObservations } from "api/observations";
+import {
+  DetailsMap,
+  Heading4,
+  Map,
+  Modal
+} from "components/SharedComponents";
+import {
+  View
+} from "components/styledComponents";
+import type { Node } from "react";
+import React, { useState } from "react";
+import { useTranslation } from "sharedHooks";
+import useAuthenticatedQuery from "sharedHooks/useAuthenticatedQuery";
+
+import TaxonDetailsTitle from "./TaxonDetailsTitle";
+
+type Props = {
+  taxon: Object
+}
+
+function getMapRegion( bounds: { nelat: number, nelng: number, swlat: number, swlng: number } ) {
+  const {
+    nelat, nelng, swlat, swlng
+  } = bounds;
+  // Deltas shouldn't be negative
+  const latDelta = Math.abs( Number( nelat ) - Number( swlat ) );
+  const lngDelta = Math.abs( Number( nelng ) - Number( swlng ) );
+  const lat = nelat - ( latDelta / 2 );
+  const lng = nelng - ( lngDelta / 2 );
+
+  return {
+    latitude: lat,
+    longitude: lng,
+    // Pad the detlas so the user sees the full range, make sure we don't
+    // specify impossible deltas like 190 degrees of latitude
+    latitudeDelta: Math.min( latDelta + 5, 175 ),
+    longitudeDelta: Math.min( lngDelta + 5, 355 )
+  };
+}
+
+const TaxonMapPreview = ( {
+  taxon
+}: Props ): Node => {
+  const { t } = useTranslation( );
+  const [showMapModal, setShowMapModal] = useState( false );
+  const obsParams = {
+    taxon_id: taxon.id,
+    verifiable: true
+  };
+
+  // TODO: add a loading indicator for map preview
+  const {
+    data: obsSearchResponse
+  } = useAuthenticatedQuery(
+    ["fetchTaxonBoundingBox"],
+    optsWithAuth => searchObservations( {
+      ...obsParams,
+      return_bounds: true,
+      per_page: 0,
+      ttl: -1
+    }, optsWithAuth )
+  );
+
+  if ( obsSearchResponse?.total_bounds ) {
+    const region = getMapRegion( obsSearchResponse?.total_bounds );
+
+    return (
+      <View className="relative h-[390px]">
+        <Heading4 className="mb-3">{t( "MAP" )}</Heading4>
+        <Map
+          region={region}
+          mapHeight={230}
+          openMapScreen={() => setShowMapModal( true )}
+          tileMapParams={obsParams}
+          withObsTiles
+          mapViewClassName="-mx-3"
+          // Disable interaction
+          zoomEnabled={false}
+          zoomTapEnabled={false}
+          scrollEnabled={false}
+        />
+        <Modal
+          animationIn="fadeIn"
+          animationOut="fadeOut"
+          showModal={showMapModal}
+          closeModal={( ) => setShowMapModal( false )}
+          disableSwipeDirection
+          // eslint-disable-next-line react-native/no-inline-styles
+          style={{ margin: 0 }}
+          modal={(
+            <DetailsMap
+              region={region}
+              latitude={region.latitude}
+              longitude={region.longitude}
+              closeModal={( ) => setShowMapModal( false )}
+              tileMapParams={obsParams}
+              showLocationIndicator={false}
+              headerTitle={<TaxonDetailsTitle taxon={taxon} />}
+            />
+          )}
+        />
+      </View>
+
+    );
+  }
+
+  return (
+    <View className="relative h-[390px]" />
+
+  );
+};
+
+export default TaxonMapPreview;