diff --git a/src/components/HotspotsMapDrone/HexHotspotItem.tsx b/src/components/HotspotsMapDrone/HexHotspotItem.tsx
deleted file mode 100644
index 74aba2b..0000000
--- a/src/components/HotspotsMapDrone/HexHotspotItem.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-"use client"
-
-// import { usePreferences } from "@/context/usePreferences"
-import Link from "next/link"
-import { gaEvent } from "../GATracker"
-import { HeliumIotIcon } from "../icons/HeliumIotIcon"
-import { HeliumMobileIcon } from "../icons/HeliumMobileIcon"
-import { Hotspot } from "./HexHotspots"
-
-type HexHotSpotItemProps = {
-  hotspot: Hotspot
-}
-
-export const HexHotSpotItem = ({ hotspot }: HexHotSpotItemProps) => {
-  // const { provider } = usePreferences()
-  console.log("hheheshf")
-  const { cbrs, wifi, mobile } = hotspot.capabilities
-  const isMobile = cbrs || wifi || mobile
-  const Avatar = isMobile ? HeliumMobileIcon : HeliumIotIcon
-  // const subtitle = isMobile ? `Mobile Hotspot` : "IoT Hotspot"
-  const subtitle = "Air Space"
-
-  return (
-    <li key={hotspot.address}>
-      <div className="group relative flex items-center px-2 py-3">
-        <div>
-          <div
-            className="absolute inset-0 group-hover:bg-zinc-300/30 dark:group-hover:bg-zinc-700/30"
-            aria-hidden="true"
-          />
-          <div className="relative flex min-w-0 flex-1 items-center gap-4">
-            <Avatar className="inline-block h-8 w-8 flex-shrink-0" />
-            <div className="truncate">
-              <p className="truncate text-sm font-medium leading-5 text-gray-900 dark:text-zinc-100">
-                {hotspot.name}
-              </p>
-              <p className="truncate text-xs text-gray-600 dark:text-zinc-300">
-                {subtitle}
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </li>
-  )
-}
diff --git a/src/components/HotspotsMapDrone/HexHotspots.tsx b/src/components/HotspotsMapDrone/HexHotspots.tsx
deleted file mode 100644
index 1fad7e8..0000000
--- a/src/components/HotspotsMapDrone/HexHotspots.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-"use client"
-
-// import { Tooltip } from "@/app/stats/components/Tooltip"
-// import { PreferencesProvider } from "@/context/usePreferences"
-import clsx from "clsx"
-import { HexHotSpotItem } from "./HexHotspotItem"
-
-export type Hotspot = {
-  address: string
-  name: string
-  status: number
-  statusString: "active" | "inactive"
-  capabilities: {
-    mobile: boolean
-    iot: boolean
-    cbrs: boolean
-    wifi: boolean
-  }
-  location: {
-    hex: string
-  }
-}
-
-const RECENT = "recently rewarded"
-const NOT_RECENT = "not recently rewarded"
-
-const TOOLTIP_DESCRIPTIONS = {
-  [RECENT]: "A hotspot that has received rewards in the past 30 days.",
-  [NOT_RECENT]:
-    "A hotspot that has not received rewards in the past 30 days. Such a hotstop is most likely offline. It is also possible for it to be online but not rewarded if it is not transmitting data, not participating in PoC, or only recently online.",
-}
-
-function getGroupedHotspots(hotspots: Hotspot[]) {
-  const groupedHotspots: {
-    [RECENT]: Hotspot[]
-    [NOT_RECENT]: Hotspot[]
-  } = {
-    [RECENT]: [],
-    [NOT_RECENT]: [],
-  }
-
-  hotspots.forEach((hotspot) => {
-    const group = hotspot.status === 0 ? RECENT : NOT_RECENT
-    groupedHotspots[group].push(hotspot)
-  })
-
-  return groupedHotspots
-}
-
-export async function HexHotspots({ hexId }: { hexId: string }) {
-  // this is just for demo once we have real database we will fetch location detail with id
-  const hotspots: Hotspot[] = [
-    {
-      address: "112tAUfmQ5orU7A1mVWQ3PPQXwwi5GEReMkKgMo5LKXxHgqpoAdt",
-      name: "Air space",
-      status: 0,
-      statusString: "active",
-      capabilities: {
-        mobile: false,
-        iot: true,
-        cbrs: false,
-        wifi: false,
-      },
-      location: {
-        hex: "8c3dac39da5c5ff",
-      },
-    },
-  ]
-
-  const groupedList = getGroupedHotspots(hotspots)
-
-  if (hotspots.length === 0) {
-    console.log("dwdw")
-    return (
-      <div className="mb-2 text-sm font-medium text-gray-900 dark:text-zinc-200">
-        This hex contains no Hotspots.
-      </div>
-    )
-  }
-
-  return (
-    <div className="relative flex-1 overflow-y-auto">
-      {(Object.keys(groupedList) as Array<keyof typeof groupedList>).map(
-        (group) => {
-          if (groupedList[group].length === 0) return
-          return (
-            <div key={group}>
-              <div
-                className={clsx(
-                  "sticky top-0 z-10 flex items-center justify-between rounded-lg px-2.5 py-1 text-sm font-medium",
-                  "bg-zinc-300/80 text-gray-700",
-                  "dark:bg-zinc-500/50 dark:text-white"
-                )}
-              >
-                <div className="flex gap-2">
-                  <span className="capitalize">{group}</span>
-                  {/* <Tooltip
-                    id={group}
-                    description={TOOLTIP_DESCRIPTIONS[group]}
-                    width="tiny"
-                  /> */}
-                </div>
-                <span className="ml-2 text-xs font-normal">
-                  {groupedList[group].length} Hotspots
-                </span>
-              </div>
-              {/* <PreferencesProvider> */}
-              <ul
-                role="list"
-                className="z-0 flex-1 divide-y divide-gray-200 overflow-y-auto dark:divide-white/10"
-              >
-                {groupedList[group].map((hotspot) => (
-                  <HexHotSpotItem key={hotspot.address} hotspot={hotspot} />
-                ))}
-              </ul>
-              {/* </PreferencesProvider> */}
-            </div>
-          )
-        }
-      )}
-    </div>
-  )
-}
diff --git a/src/components/HotspotsMapDrone/LoadingHexHotspots.tsx b/src/components/HotspotsMapDrone/LoadingHexHotspots.tsx
deleted file mode 100644
index 348897f..0000000
--- a/src/components/HotspotsMapDrone/LoadingHexHotspots.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import clsx from "clsx"
-
-export function LoadingHexHotspots({ count }: { count: number }) {
-  return (
-    <div>
-      <div
-        className={clsx(
-          "flex items-center justify-between rounded-lg px-6 py-1 text-sm font-medium",
-          "bg-zinc-300/80 text-gray-700",
-          "dark:bg-zinc-500/50 dark:text-white"
-        )}
-      >
-        <span className="capitalize">Active</span>
-      </div>
-      <ul
-        role="list"
-        className="flex-1 divide-y divide-gray-200 overflow-y-auto dark:divide-white/10"
-      >
-        {[...Array(count).keys()].map((i) => (
-          <li key={i}>
-            <div className="group relative flex animate-pulse items-center px-5 py-6">
-              <div className="-m-1 block flex-1 p-1">
-                <div className="relative flex min-w-0 flex-1 items-center gap-4">
-                  <span className="relative inline-block flex-shrink-0">
-                    <div className="h-10 w-10 rounded-full bg-gray-500 dark:bg-gray-700" />
-                  </span>
-                  <div className="flex-1 space-y-6 py-1">
-                    <div className="h-2 rounded bg-gray-500 dark:bg-gray-700" />
-                    <div className="h-2 rounded bg-gray-500 dark:bg-gray-700" />
-                  </div>
-                </div>
-              </div>
-            </div>
-          </li>
-        ))}
-      </ul>
-    </div>
-  )
-}
diff --git a/src/components/HotspotsMapDrone/NetworkCoverageLayer.tsx b/src/components/HotspotsMapDrone/NetworkCoverageLayer.tsx
deleted file mode 100644
index 7c67a2a..0000000
--- a/src/components/HotspotsMapDrone/NetworkCoverageLayer.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { useTheme } from "next-themes"
-import { Fragment } from "react"
-import { Layer, Source } from "react-map-gl"
-import img from "public/images/cat.png"
-import {
-  MIN_HEXES_ZOOM,
-  MIN_HEX_LABELS_ZOOM,
-  NetworkCoverageLayerOption,
-  POINTS_AND_HEXES_OVERLAP,
-  getBlurredPointStyle,
-  getHexFillStyle,
-  getHexLabelStyle,
-  hexLabelLayout,
-  samplePointsData,
-  sampleHexesData,
-} from "./utils"
-
-export function NetworkCoverageLayer({
-  layer: { color },
-  ...props
-}: {
-  layer: NetworkCoverageLayerOption
-}) {
-  const { resolvedTheme } = useTheme()
-  return (
-    <Fragment {...props}>
-      <Source id="points_source" type="geojson" data={samplePointsData}>
-        <Layer
-          id="points_layer"
-          type="circle"
-          // source-layer="custom_points_layer"
-          maxzoom={MIN_HEXES_ZOOM + POINTS_AND_HEXES_OVERLAP}
-          paint={getBlurredPointStyle(color)}
-        />
-        {/* <Layer
-          id="hotspot_count_labels"
-          type="symbol"
-          source-layer="custom_points_layer"
-          minzoom={MIN_HEX_LABELS_ZOOM}
-          layout={hexLabelLayout}
-          paint={getHexLabelStyle(resolvedTheme)}
-        /> */}
-      </Source>
-      <Source id="hexes_source" type="geojson" data={sampleHexesData}>
-        <Layer
-          id="hexes_layer"
-          type="fill"
-          // source-layer="custom_hexes_layer"
-          paint={getHexFillStyle(color)}
-          minzoom={MIN_HEXES_ZOOM}
-        />
-      </Source>
-    </Fragment>
-  )
-}
diff --git a/src/components/HotspotsMapDrone/index.tsx b/src/components/HotspotsMapDrone/index.tsx
deleted file mode 100644
index 8f2086c..0000000
--- a/src/components/HotspotsMapDrone/index.tsx
+++ /dev/null
@@ -1,183 +0,0 @@
-"use client"
-
-import maplibregl from "maplibre-gl"
-import "maplibre-gl/dist/maplibre-gl.css"
-import { Protocol } from "pmtiles"
-
-import { cellToLatLng, cellsToMultiPolygon, getResolution } from "h3-js"
-import { useTheme } from "next-themes"
-import {
-  usePathname,
-  useRouter,
-  useSelectedLayoutSegment,
-  useSelectedLayoutSegments,
-} from "next/navigation"
-import { useCallback, useEffect, useMemo, useRef, useState } from "react"
-import Map, {
-  Layer,
-  MapLayerMouseEvent,
-  MapRef,
-  MapStyle,
-  NavigationControl,
-  Source,
-  Marker,
-  Popup,
-} from "react-map-gl"
-import { gaEvent } from "../GATracker"
-import { NetworkCoverageLayer } from "./NetworkCoverageLayer"
-import { mapLayersDark } from "./mapLayersDark"
-import { mapLayersLight } from "./mapLayersLight"
-import {
-  HexFeatureDetails,
-  INITIAL_MAP_VIEW_STATE,
-  MAP_CONTAINER_STYLE,
-  MAX_MAP_ZOOM,
-  MIN_MAP_ZOOM,
-  ZOOM_BY_HEX_RESOLUTION,
-  getHexOutlineStyle,
-  networkLayers,
-} from "./utils"
-
-export function HotspotsMapDrone() {
-  const { resolvedTheme } = useTheme()
-  const router = useRouter()
-  const pathname = usePathname()
-  const segments = useSelectedLayoutSegments()
-  const segment = useSelectedLayoutSegment()
-  const mapRef = useRef<MapRef>(null)
-  const [selectedHex, setSelectedHex] = useState<HexFeatureDetails | null>(null)
-  const [cursor, setCursor] = useState("")
-  const [tab, setTab] = useState("")
-
-  useEffect(() => {
-    let protocol = new Protocol()
-    maplibregl.addProtocol("pmtiles", protocol.tile)
-    return () => {
-      maplibregl.removeProtocol("pmtiles")
-    }
-  }, [])
-
-  const mapStyle = useMemo(() => {
-    const style: MapStyle = {
-      version: 8,
-      sources: {
-        protomaps: {
-          type: "vector",
-          tiles: [`${process.env.NEXT_PUBLIC_PMTILES_URL}/{z}/{x}/{y}.mvt`],
-        },
-      },
-      glyphs: "https://cdn.protomaps.com/fonts/pbf/{fontstack}/{range}.pbf",
-      layers: resolvedTheme === "dark" ? mapLayersDark : mapLayersLight,
-    }
-    return style
-  }, [resolvedTheme])
-
-  const selectHex = useCallback((hexId: string | null) => {
-    if (!hexId) {
-      setSelectedHex(null)
-      return
-    }
-
-    const selectedHex = {
-      hexId,
-      geojson: {
-        type: "MultiPolygon",
-        coordinates: cellsToMultiPolygon([hexId], true),
-      } as GeoJSON.Geometry,
-    }
-
-    setSelectedHex(selectedHex)
-
-    if (!mapRef.current) return
-    const map = mapRef.current.getMap()
-    const [lat, lng] = cellToLatLng(hexId)
-    const bounds = map.getBounds()
-    const zoom = map.getZoom()
-    const hexResolution = getResolution(hexId)
-    const newZoom = ZOOM_BY_HEX_RESOLUTION[hexResolution]
-    if (zoom < newZoom - 3 || !bounds.contains([lng, lat])) {
-      // Fly to the hex if it's not visible in the current viewport, or if it's not zoomed in enough
-      // TODO uncomment this after
-      // map.flyTo({ center: [lng, lat], zoom: newZoom })
-    }
-  }, [])
-
-  const selectHexByPathname = useCallback(() => {
-    if (!mapRef.current) return
-    console.log(mapRef)
-    if (segments.length === 2 && segments[0] === "hex") {
-      const hexId = segments[1]
-      if (selectedHex?.hexId !== hexId) {
-        selectHex(hexId)
-      }
-    } else if (pathname === "/" && selectedHex?.hexId) {
-      selectHex(null)
-    }
-  }, [pathname, segments, selectHex, selectedHex?.hexId])
-
-  useEffect(() => {
-    selectHexByPathname()
-  }, [selectHexByPathname])
-
-  const onClick = useCallback(
-    (event: MapLayerMouseEvent) => {
-      event.features?.forEach(({ layer, properties }) => {
-        console.log(layer, properties)
-        if (layer.id !== "hexes_layer" || !properties?.id) return
-        if (selectedHex?.hexId === properties.id) {
-          router.push("/")
-        } else {
-          router.push(`/hex/${properties.id}`)
-        }
-      })
-    },
-    [router, selectedHex?.hexId]
-  )
-
-  useEffect(() => {
-    gaEvent({ action: "map_load" })
-  }, [])
-
-  const onMouseEnter = useCallback(() => setCursor("pointer"), [])
-  const onMouseLeave = useCallback(() => setCursor(""), [])
-  const secondTab = true
-
-  return (
-    <Map
-      initialViewState={INITIAL_MAP_VIEW_STATE}
-      minZoom={MIN_MAP_ZOOM}
-      maxZoom={MAX_MAP_ZOOM}
-      style={MAP_CONTAINER_STYLE}
-      mapStyle={mapStyle}
-      localFontFamily="NotoSans-Regular"
-      // @ts-ignore
-      mapLib={maplibregl}
-      interactiveLayerIds={["hexes_layer"]}
-      onLoad={selectHexByPathname}
-      onClick={onClick}
-      onMouseEnter={onMouseEnter}
-      onMouseLeave={onMouseLeave}
-      cursor={cursor}
-      ref={mapRef}
-      attributionControl={false}
-    >
-      <NavigationControl position="bottom-left" showCompass={false} />
-      {/* {children} */}
-
-      {/* {segment !== "mobile" && (
-        <NetworkCoverageLayer layer={networkLayers.iot} />
-      )} */}
-      <NetworkCoverageLayer layer={networkLayers.custom} />
-      {secondTab && <NetworkCoverageLayer layer={networkLayers.custom} />}
-      {/* <Marker longitude={78} latitude={22} anchor="bottom" >
-        <img src="./camera-drone.png" width={30} height={30}/>
-      </Marker> */}
-
-      {selectedHex && (
-        <Source type="geojson" data={selectedHex.geojson}>
-          <Layer type="line" paint={getHexOutlineStyle(resolvedTheme)} />
-        </Source>
-      )}
-    </Map>
-  )
-}
diff --git a/src/components/HotspotsMapDrone/mapLayersDark.tsx b/src/components/HotspotsMapDrone/mapLayersDark.tsx
deleted file mode 100644
index 4691d16..0000000
--- a/src/components/HotspotsMapDrone/mapLayersDark.tsx
+++ /dev/null
@@ -1,665 +0,0 @@
-import { AnyLayer } from "react-map-gl"
-
-export const mapLayersDark: AnyLayer[] = [
-  {
-    id: "background",
-    type: "background",
-    paint: {
-      "background-color": "#2A2A2A",
-    },
-  },
-  {
-    id: "earth",
-    type: "fill",
-    source: "protomaps",
-    "source-layer": "earth",
-    paint: {
-      "fill-color": "#2A2A2A",
-    },
-  },
-  {
-    id: "landuse_park",
-    type: "fill",
-    source: "protomaps",
-    "source-layer": "landuse",
-    filter: ["any", ["==", "pmap:kind", "park"], ["==", "landuse", "cemetery"]],
-    paint: {
-      "fill-color": "#2A2A2A",
-    },
-  },
-  {
-    id: "landuse_hospital",
-    type: "fill",
-    source: "protomaps",
-    "source-layer": "landuse",
-    filter: ["any", ["==", "pmap:kind", "hospital"]],
-    paint: {
-      "fill-color": "#2A2A2A",
-    },
-  },
-  {
-    id: "landuse_industrial",
-    type: "fill",
-    source: "protomaps",
-    "source-layer": "landuse",
-    filter: ["any", ["==", "pmap:kind", "industrial"]],
-    paint: {
-      "fill-color": "#2A2A2A",
-    },
-  },
-  {
-    id: "landuse_school",
-    type: "fill",
-    source: "protomaps",
-    "source-layer": "landuse",
-    filter: ["any", ["==", "pmap:kind", "school"]],
-    paint: {
-      "fill-color": "#2A2A2A",
-    },
-  },
-  {
-    id: "natural_wood",
-    type: "fill",
-    source: "protomaps",
-    "source-layer": "natural",
-    filter: [
-      "any",
-      ["==", "natural", "wood"],
-      ["==", "leisure", "nature_reserve"],
-      ["==", "landuse", "forest"],
-    ],
-    paint: {
-      "fill-color": "#2A2A2A",
-    },
-  },
-  {
-    id: "landuse_pedestrian",
-    type: "fill",
-    source: "protomaps",
-    "source-layer": "landuse",
-    filter: ["any", ["==", "highway", "footway"]],
-    paint: {
-      "fill-color": "#2A2A2A",
-    },
-  },
-  {
-    id: "natural_glacier",
-    type: "fill",
-    source: "protomaps",
-    "source-layer": "natural",
-    filter: ["==", "natural", "glacier"],
-    paint: {
-      "fill-color": "#2A2A2A",
-    },
-  },
-  {
-    id: "natural_sand",
-    type: "fill",
-    source: "protomaps",
-    "source-layer": "natural",
-    filter: ["==", "natural", "sand"],
-    paint: {
-      "fill-color": "#2A2A2A",
-    },
-  },
-  {
-    id: "landuse_aerodrome",
-    type: "fill",
-    source: "protomaps",
-    "source-layer": "landuse",
-    filter: ["==", "aeroway", "aerodrome"],
-    paint: {
-      "fill-color": "#2A2A2A",
-    },
-  },
-  {
-    id: "transit_runway",
-    type: "line",
-    source: "protomaps",
-    "source-layer": "transit",
-    filter: ["has", "aeroway"],
-    paint: {
-      "line-color": "#2A2A2A",
-      "line-width": 6,
-    },
-  },
-  {
-    id: "landuse_runway",
-    type: "fill",
-    source: "protomaps",
-    "source-layer": "landuse",
-    filter: [
-      "any",
-      ["==", "aeroway", "runway"],
-      ["==", "area:aeroway", "runway"],
-      ["==", "area:aeroway", "taxiway"],
-    ],
-    paint: {
-      "fill-color": "#2A2A2A",
-    },
-  },
-  {
-    id: "water",
-    type: "fill",
-    source: "protomaps",
-    "source-layer": "water",
-    paint: {
-      "fill-color": "#202020",
-    },
-  },
-  {
-    id: "roads_tunnels_other",
-    type: "line",
-    source: "protomaps",
-    "source-layer": "roads",
-    filter: ["all", ["<", "pmap:level", 0], ["==", "pmap:kind", "other"]],
-    paint: {
-      "line-color": "#3D3D3D",
-      "line-dasharray": [1, 1],
-      "line-width": [
-        "interpolate",
-        ["exponential", 1.6],
-        ["zoom"],
-        14,
-        0,
-        14.5,
-        0.5,
-        20,
-        12,
-      ],
-    },
-  },
-  {
-    id: "roads_tunnels_minor",
-    type: "line",
-    source: "protomaps",
-    "source-layer": "roads",
-    filter: ["all", ["<", "pmap:level", 0], ["==", "pmap:kind", "minor_road"]],
-    paint: {
-      "line-color": "#3D3D3D",
-      "line-width": [
-        "interpolate",
-        ["exponential", 1.6],
-        ["zoom"],
-        12,
-        0,
-        12.5,
-        0.5,
-        20,
-        32,
-      ],
-    },
-  },
-  {
-    id: "roads_tunnels_medium",
-    type: "line",
-    source: "protomaps",
-    "source-layer": "roads",
-    filter: ["all", ["<", "pmap:level", 0], ["==", "pmap:kind", "medium_road"]],
-    paint: {
-      "line-color": "#3D3D3D",
-      "line-width": [
-        "interpolate",
-        ["exponential", 1.6],
-        ["zoom"],
-        7,
-        0,
-        7.5,
-        0.5,
-        20,
-        32,
-      ],
-    },
-  },
-  {
-    id: "roads_tunnels_major",
-    type: "line",
-    source: "protomaps",
-    "source-layer": "roads",
-    filter: ["all", ["<", "pmap:level", 0], ["==", "pmap:kind", "major_road"]],
-    paint: {
-      "line-color": "#3D3D3D",
-      "line-width": [
-        "interpolate",
-        ["exponential", 1.6],
-        ["zoom"],
-        7,
-        0,
-        7.5,
-        0.5,
-        19,
-        32,
-      ],
-    },
-  },
-  {
-    id: "roads_tunnels_highway",
-    type: "line",
-    source: "protomaps",
-    "source-layer": "roads",
-    filter: ["all", ["<", "pmap:level", 0], ["==", "pmap:kind", "highway"]],
-    paint: {
-      "line-color": "#3D3D3D",
-      "line-width": [
-        "interpolate",
-        ["exponential", 1.6],
-        ["zoom"],
-        3,
-        0,
-        3.5,
-        0.5,
-        18,
-        32,
-      ],
-    },
-  },
-  {
-    id: "physical_line_waterway",
-    type: "line",
-    source: "protomaps",
-    "source-layer": "physical_line",
-    filter: ["==", ["get", "pmap:kind"], "waterway"],
-    paint: {
-      "line-color": "#202020",
-      "line-width": 0.5,
-    },
-  },
-  {
-    id: "roads_other",
-    type: "line",
-    source: "protomaps",
-    "source-layer": "roads",
-    filter: ["all", ["==", "pmap:level", 0], ["==", "pmap:kind", "other"]],
-    paint: {
-      "line-color": "#3D3D3D",
-      "line-dasharray": [2, 1],
-      "line-width": [
-        "interpolate",
-        ["exponential", 1.6],
-        ["zoom"],
-        14,
-        0,
-        14.5,
-        0.5,
-        20,
-        12,
-      ],
-    },
-  },
-  {
-    id: "roads_minor",
-    type: "line",
-    source: "protomaps",
-    "source-layer": "roads",
-    filter: ["all", ["==", "pmap:level", 0], ["==", "pmap:kind", "minor_road"]],
-    paint: {
-      "line-color": "#3D3D3D",
-      "line-width": [
-        "interpolate",
-        ["exponential", 1.6],
-        ["zoom"],
-        12,
-        0,
-        12.5,
-        0.5,
-        20,
-        32,
-      ],
-    },
-  },
-  {
-    id: "roads_medium",
-    type: "line",
-    source: "protomaps",
-    "source-layer": "roads",
-    filter: [
-      "all",
-      ["==", "pmap:level", 0],
-      ["==", "pmap:kind", "medium_road"],
-    ],
-    paint: {
-      "line-color": "#3D3D3D",
-      "line-width": [
-        "interpolate",
-        ["exponential", 1.6],
-        ["zoom"],
-        7,
-        0,
-        7.5,
-        0.5,
-        20,
-        32,
-      ],
-    },
-  },
-  {
-    id: "roads_major",
-    type: "line",
-    source: "protomaps",
-    "source-layer": "roads",
-    filter: ["all", ["==", "pmap:level", 0], ["==", "pmap:kind", "major_road"]],
-    paint: {
-      "line-color": "#3D3D3D",
-      "line-width": [
-        "interpolate",
-        ["exponential", 1.6],
-        ["zoom"],
-        7,
-        0,
-        7.5,
-        0.5,
-        19,
-        32,
-      ],
-    },
-  },
-  {
-    id: "roads_highway",
-    type: "line",
-    source: "protomaps",
-    "source-layer": "roads",
-    filter: ["all", ["==", "pmap:level", 0], ["==", "pmap:kind", "highway"]],
-    paint: {
-      "line-color": "#3D3D3D",
-      "line-width": [
-        "interpolate",
-        ["exponential", 1.6],
-        ["zoom"],
-        3,
-        0,
-        3.5,
-        0.5,
-        18,
-        32,
-      ],
-    },
-  },
-  {
-    id: "transit_railway",
-    type: "line",
-    source: "protomaps",
-    "source-layer": "transit",
-    filter: ["all", ["==", "pmap:kind", "railway"]],
-    paint: {
-      "line-color": "#3D3D3D",
-      "line-width": 2,
-    },
-  },
-  {
-    id: "transit_railway_tracks",
-    type: "line",
-    source: "protomaps",
-    "source-layer": "transit",
-    filter: ["all", ["==", "pmap:kind", "railway"]],
-    paint: {
-      "line-color": "#3D3D3D",
-      "line-width": 0.8,
-      "line-dasharray": [6, 10],
-    },
-  },
-  {
-    id: "boundaries_country",
-    type: "line",
-    source: "protomaps",
-    "source-layer": "boundaries",
-    filter: ["<=", "pmap:min_admin_level", 2],
-    paint: {
-      "line-color": "#696969",
-      "line-width": 1.5,
-    },
-  },
-  {
-    id: "boundaries",
-    type: "line",
-    source: "protomaps",
-    "source-layer": "boundaries",
-    filter: [">", "pmap:min_admin_level", 2],
-    paint: {
-      "line-color": "#696969",
-      "line-width": 1,
-      "line-dasharray": [1, 2],
-    },
-  },
-  {
-    id: "roads_bridges_other",
-    type: "line",
-    source: "protomaps",
-    "source-layer": "roads",
-    filter: ["all", [">", "pmap:level", 0], ["==", "pmap:kind", "other"]],
-    paint: {
-      "line-color": "#3D3D3D",
-      "line-dasharray": [2, 1],
-      "line-width": [
-        "interpolate",
-        ["exponential", 1.6],
-        ["zoom"],
-        14,
-        0,
-        14.5,
-        0.5,
-        20,
-        12,
-      ],
-    },
-  },
-  {
-    id: "roads_bridges_minor",
-    type: "line",
-    source: "protomaps",
-    "source-layer": "roads",
-    filter: ["all", [">", "pmap:level", 0], ["==", "pmap:kind", "minor_road"]],
-    paint: {
-      "line-color": "#3D3D3D",
-      "line-width": [
-        "interpolate",
-        ["exponential", 1.6],
-        ["zoom"],
-        12,
-        0,
-        12.5,
-        0.5,
-        20,
-        32,
-      ],
-    },
-  },
-  {
-    id: "roads_bridges_medium",
-    type: "line",
-    source: "protomaps",
-    "source-layer": "roads",
-    filter: ["all", [">", "pmap:level", 0], ["==", "pmap:kind", "medium_road"]],
-    paint: {
-      "line-color": "#3D3D3D",
-      "line-width": [
-        "interpolate",
-        ["exponential", 1.6],
-        ["zoom"],
-        7,
-        0,
-        7.5,
-        0.5,
-        20,
-        32,
-      ],
-    },
-  },
-  {
-    id: "roads_bridges_major",
-    type: "line",
-    source: "protomaps",
-    "source-layer": "roads",
-    filter: ["all", [">", "pmap:level", 0], ["==", "pmap:kind", "major_road"]],
-    paint: {
-      "line-color": "#3D3D3D",
-      "line-width": [
-        "interpolate",
-        ["exponential", 1.6],
-        ["zoom"],
-        7,
-        0,
-        7.5,
-        0.5,
-        19,
-        32,
-      ],
-    },
-  },
-  {
-    id: "roads_bridges_highway",
-    type: "line",
-    source: "protomaps",
-    "source-layer": "roads",
-    filter: ["all", [">", "pmap:level", 0], ["==", "pmap:kind", "highway"]],
-    paint: {
-      "line-color": "#3D3D3D",
-      "line-width": [
-        "interpolate",
-        ["exponential", 1.6],
-        ["zoom"],
-        3,
-        0,
-        3.5,
-        0.5,
-        18,
-        32,
-      ],
-    },
-  },
-  {
-    id: "physical_line_waterway_label",
-    type: "symbol",
-    source: "protomaps",
-    "source-layer": "physical_line",
-    minzoom: 14,
-    layout: {
-      "symbol-placement": "line",
-      "text-font": ["NotoSans-Regular"],
-      "text-field": ["get", "name"],
-      "text-size": 10,
-      "text-letter-spacing": 0.3,
-    },
-    paint: {
-      "text-color": "#6D6D6D",
-      "text-halo-color": "#151515",
-      "text-halo-width": 1,
-    },
-  },
-  {
-    id: "roads_labels",
-    type: "symbol",
-    source: "protomaps",
-    "source-layer": "roads",
-    layout: {
-      "symbol-placement": "line",
-      "text-font": ["NotoSans-Regular"],
-      "text-field": ["get", "name"],
-      "text-size": 12,
-    },
-    paint: {
-      "text-color": "#6D6D6D",
-      "text-halo-color": "#151515",
-      "text-halo-width": 2,
-    },
-  },
-  {
-    id: "mask",
-    type: "fill",
-    source: "protomaps",
-    "source-layer": "mask",
-    paint: {
-      "fill-color": "#F3F3F1",
-    },
-  },
-  {
-    id: "physical_point_ocean",
-    type: "symbol",
-    source: "protomaps",
-    "source-layer": "physical_point",
-    filter: ["any", ["==", "place", "sea"], ["==", "place", "ocean"]],
-    layout: {
-      "text-font": ["NotoSans-Regular"],
-      "text-field": ["get", "name"],
-      "text-size": 13,
-      "text-letter-spacing": 0.2,
-    },
-    paint: {
-      "text-color": "#6D6D6D",
-    },
-  },
-  {
-    id: "places_subplace",
-    type: "symbol",
-    source: "protomaps",
-    "source-layer": "places",
-    filter: ["==", "pmap:kind", "neighbourhood"],
-    layout: {
-      "text-field": "{name:en}",
-      "text-font": ["NotoSans-Regular"],
-      "text-size": 10,
-      "text-transform": "uppercase",
-    },
-    paint: {
-      "text-color": "#6D6D6D",
-      "text-halo-color": "#151515",
-      "text-halo-width": 0.5,
-    },
-  },
-  {
-    id: "places_city",
-    type: "symbol",
-    source: "protomaps",
-    "source-layer": "places",
-    filter: ["==", "pmap:kind", "city"],
-    layout: {
-      "text-field": "{name:en}",
-      "text-font": ["NotoSans-Regular"],
-      "text-size": ["step", ["get", "pmap:rank"], 0, 1, 12, 2, 10],
-      "text-variable-anchor": ["bottom-left"],
-      "text-radial-offset": 0.2,
-    },
-    paint: {
-      "text-color": "#6D6D6D",
-      "text-halo-color": "#151515",
-      "text-halo-width": 1,
-    },
-  },
-  {
-    id: "places_state",
-    type: "symbol",
-    source: "protomaps",
-    "source-layer": "places",
-    filter: ["==", "pmap:kind", "state"],
-    layout: {
-      "text-field": "{name:en}",
-      "text-font": ["NotoSans-Regular"],
-      "text-size": 14,
-      "text-radial-offset": 0.2,
-      "text-anchor": "center",
-      "text-transform": "uppercase",
-      "text-letter-spacing": 0.1,
-    },
-    paint: {
-      "text-color": "#6D6D6D",
-      "text-halo-color": "#151515",
-      "text-halo-width": 1,
-    },
-  },
-  {
-    id: "places_country",
-    type: "symbol",
-    source: "protomaps",
-    "source-layer": "places",
-    filter: ["==", "place", "country"],
-    layout: {
-      "text-field": "{name:en}",
-      "text-font": ["NotoSans-Regular"],
-      "text-size": 10,
-    },
-    paint: {
-      "text-color": "#6D6D6D",
-      "text-halo-color": "#151515",
-      "text-halo-width": 1,
-    },
-  },
-]
diff --git a/src/components/HotspotsMapDrone/mapLayersLight.tsx b/src/components/HotspotsMapDrone/mapLayersLight.tsx
deleted file mode 100644
index 6981b29..0000000
--- a/src/components/HotspotsMapDrone/mapLayersLight.tsx
+++ /dev/null
@@ -1,665 +0,0 @@
-import { AnyLayer } from "react-map-gl"
-
-export const mapLayersLight: AnyLayer[] = [
-  {
-    id: "background",
-    type: "background",
-    paint: {
-      "background-color": "#F3F3F1",
-    },
-  },
-  {
-    id: "earth",
-    type: "fill",
-    source: "protomaps",
-    "source-layer": "earth",
-    paint: {
-      "fill-color": "#F3F3F1",
-    },
-  },
-  {
-    id: "landuse_park",
-    type: "fill",
-    source: "protomaps",
-    "source-layer": "landuse",
-    filter: ["any", ["==", "pmap:kind", "park"], ["==", "landuse", "cemetery"]],
-    paint: {
-      "fill-color": "#F3F3F1",
-    },
-  },
-  {
-    id: "landuse_hospital",
-    type: "fill",
-    source: "protomaps",
-    "source-layer": "landuse",
-    filter: ["any", ["==", "pmap:kind", "hospital"]],
-    paint: {
-      "fill-color": "#F3F3F1",
-    },
-  },
-  {
-    id: "landuse_industrial",
-    type: "fill",
-    source: "protomaps",
-    "source-layer": "landuse",
-    filter: ["any", ["==", "pmap:kind", "industrial"]],
-    paint: {
-      "fill-color": "#F3F3F1",
-    },
-  },
-  {
-    id: "landuse_school",
-    type: "fill",
-    source: "protomaps",
-    "source-layer": "landuse",
-    filter: ["any", ["==", "pmap:kind", "school"]],
-    paint: {
-      "fill-color": "#F3F3F1",
-    },
-  },
-  {
-    id: "natural_wood",
-    type: "fill",
-    source: "protomaps",
-    "source-layer": "natural",
-    filter: [
-      "any",
-      ["==", "natural", "wood"],
-      ["==", "leisure", "nature_reserve"],
-      ["==", "landuse", "forest"],
-    ],
-    paint: {
-      "fill-color": "#F3F3F1",
-    },
-  },
-  {
-    id: "landuse_pedestrian",
-    type: "fill",
-    source: "protomaps",
-    "source-layer": "landuse",
-    filter: ["any", ["==", "highway", "footway"]],
-    paint: {
-      "fill-color": "#F3F3F1",
-    },
-  },
-  {
-    id: "natural_glacier",
-    type: "fill",
-    source: "protomaps",
-    "source-layer": "natural",
-    filter: ["==", "natural", "glacier"],
-    paint: {
-      "fill-color": "#F3F3F1",
-    },
-  },
-  {
-    id: "natural_sand",
-    type: "fill",
-    source: "protomaps",
-    "source-layer": "natural",
-    filter: ["==", "natural", "sand"],
-    paint: {
-      "fill-color": "#F3F3F1",
-    },
-  },
-  {
-    id: "landuse_aerodrome",
-    type: "fill",
-    source: "protomaps",
-    "source-layer": "landuse",
-    filter: ["==", "aeroway", "aerodrome"],
-    paint: {
-      "fill-color": "#F3F3F1",
-    },
-  },
-  {
-    id: "transit_runway",
-    type: "line",
-    source: "protomaps",
-    "source-layer": "transit",
-    filter: ["has", "aeroway"],
-    paint: {
-      "line-color": "#F3F3F1",
-      "line-width": 6,
-    },
-  },
-  {
-    id: "landuse_runway",
-    type: "fill",
-    source: "protomaps",
-    "source-layer": "landuse",
-    filter: [
-      "any",
-      ["==", "aeroway", "runway"],
-      ["==", "area:aeroway", "runway"],
-      ["==", "area:aeroway", "taxiway"],
-    ],
-    paint: {
-      "fill-color": "#F3F3F1",
-    },
-  },
-  {
-    id: "water",
-    type: "fill",
-    source: "protomaps",
-    "source-layer": "water",
-    paint: {
-      "fill-color": "#CAD2D3",
-    },
-  },
-  {
-    id: "roads_tunnels_other",
-    type: "line",
-    source: "protomaps",
-    "source-layer": "roads",
-    filter: ["all", ["<", "pmap:level", 0], ["==", "pmap:kind", "other"]],
-    paint: {
-      "line-color": "#fff",
-      "line-dasharray": [1, 1],
-      "line-width": [
-        "interpolate",
-        ["exponential", 1.6],
-        ["zoom"],
-        14,
-        0,
-        14.5,
-        0.5,
-        20,
-        12,
-      ],
-    },
-  },
-  {
-    id: "roads_tunnels_minor",
-    type: "line",
-    source: "protomaps",
-    "source-layer": "roads",
-    filter: ["all", ["<", "pmap:level", 0], ["==", "pmap:kind", "minor_road"]],
-    paint: {
-      "line-color": "#fff",
-      "line-width": [
-        "interpolate",
-        ["exponential", 1.6],
-        ["zoom"],
-        12,
-        0,
-        12.5,
-        0.5,
-        20,
-        32,
-      ],
-    },
-  },
-  {
-    id: "roads_tunnels_medium",
-    type: "line",
-    source: "protomaps",
-    "source-layer": "roads",
-    filter: ["all", ["<", "pmap:level", 0], ["==", "pmap:kind", "medium_road"]],
-    paint: {
-      "line-color": "#fff",
-      "line-width": [
-        "interpolate",
-        ["exponential", 1.6],
-        ["zoom"],
-        7,
-        0,
-        7.5,
-        0.5,
-        20,
-        32,
-      ],
-    },
-  },
-  {
-    id: "roads_tunnels_major",
-    type: "line",
-    source: "protomaps",
-    "source-layer": "roads",
-    filter: ["all", ["<", "pmap:level", 0], ["==", "pmap:kind", "major_road"]],
-    paint: {
-      "line-color": "#fff",
-      "line-width": [
-        "interpolate",
-        ["exponential", 1.6],
-        ["zoom"],
-        7,
-        0,
-        7.5,
-        0.5,
-        19,
-        32,
-      ],
-    },
-  },
-  {
-    id: "roads_tunnels_highway",
-    type: "line",
-    source: "protomaps",
-    "source-layer": "roads",
-    filter: ["all", ["<", "pmap:level", 0], ["==", "pmap:kind", "highway"]],
-    paint: {
-      "line-color": "#fff",
-      "line-width": [
-        "interpolate",
-        ["exponential", 1.6],
-        ["zoom"],
-        3,
-        0,
-        3.5,
-        0.5,
-        18,
-        32,
-      ],
-    },
-  },
-  {
-    id: "physical_line_waterway",
-    type: "line",
-    source: "protomaps",
-    "source-layer": "physical_line",
-    filter: ["==", ["get", "pmap:kind"], "waterway"],
-    paint: {
-      "line-color": "#fff",
-      "line-width": 0.5,
-    },
-  },
-  {
-    id: "roads_other",
-    type: "line",
-    source: "protomaps",
-    "source-layer": "roads",
-    filter: ["all", ["==", "pmap:level", 0], ["==", "pmap:kind", "other"]],
-    paint: {
-      "line-color": "#fff",
-      "line-dasharray": [2, 1],
-      "line-width": [
-        "interpolate",
-        ["exponential", 1.6],
-        ["zoom"],
-        14,
-        0,
-        14.5,
-        0.5,
-        20,
-        12,
-      ],
-    },
-  },
-  {
-    id: "roads_minor",
-    type: "line",
-    source: "protomaps",
-    "source-layer": "roads",
-    filter: ["all", ["==", "pmap:level", 0], ["==", "pmap:kind", "minor_road"]],
-    paint: {
-      "line-color": "#fff",
-      "line-width": [
-        "interpolate",
-        ["exponential", 1.6],
-        ["zoom"],
-        12,
-        0,
-        12.5,
-        0.5,
-        20,
-        32,
-      ],
-    },
-  },
-  {
-    id: "roads_medium",
-    type: "line",
-    source: "protomaps",
-    "source-layer": "roads",
-    filter: [
-      "all",
-      ["==", "pmap:level", 0],
-      ["==", "pmap:kind", "medium_road"],
-    ],
-    paint: {
-      "line-color": "#fff",
-      "line-width": [
-        "interpolate",
-        ["exponential", 1.6],
-        ["zoom"],
-        7,
-        0,
-        7.5,
-        0.5,
-        20,
-        32,
-      ],
-    },
-  },
-  {
-    id: "roads_major",
-    type: "line",
-    source: "protomaps",
-    "source-layer": "roads",
-    filter: ["all", ["==", "pmap:level", 0], ["==", "pmap:kind", "major_road"]],
-    paint: {
-      "line-color": "#fff",
-      "line-width": [
-        "interpolate",
-        ["exponential", 1.6],
-        ["zoom"],
-        7,
-        0,
-        7.5,
-        0.5,
-        19,
-        32,
-      ],
-    },
-  },
-  {
-    id: "roads_highway",
-    type: "line",
-    source: "protomaps",
-    "source-layer": "roads",
-    filter: ["all", ["==", "pmap:level", 0], ["==", "pmap:kind", "highway"]],
-    paint: {
-      "line-color": "#fff",
-      "line-width": [
-        "interpolate",
-        ["exponential", 1.6],
-        ["zoom"],
-        3,
-        0,
-        3.5,
-        0.5,
-        18,
-        32,
-      ],
-    },
-  },
-  {
-    id: "transit_railway",
-    type: "line",
-    source: "protomaps",
-    "source-layer": "transit",
-    filter: ["all", ["==", "pmap:kind", "railway"]],
-    paint: {
-      "line-color": "#fff",
-      "line-width": 2,
-    },
-  },
-  {
-    id: "transit_railway_tracks",
-    type: "line",
-    source: "protomaps",
-    "source-layer": "transit",
-    filter: ["all", ["==", "pmap:kind", "railway"]],
-    paint: {
-      "line-color": "#fff",
-      "line-width": 0.8,
-      "line-dasharray": [6, 10],
-    },
-  },
-  {
-    id: "boundaries_country",
-    type: "line",
-    source: "protomaps",
-    "source-layer": "boundaries",
-    filter: ["<=", "pmap:min_admin_level", 2],
-    paint: {
-      "line-color": "#9e9e9e",
-      "line-width": 1,
-    },
-  },
-  {
-    id: "boundaries",
-    type: "line",
-    source: "protomaps",
-    "source-layer": "boundaries",
-    filter: [">", "pmap:min_admin_level", 2],
-    paint: {
-      "line-color": "#9e9e9e",
-      "line-width": 1,
-      "line-dasharray": [1, 2],
-    },
-  },
-  {
-    id: "roads_bridges_other",
-    type: "line",
-    source: "protomaps",
-    "source-layer": "roads",
-    filter: ["all", [">", "pmap:level", 0], ["==", "pmap:kind", "other"]],
-    paint: {
-      "line-color": "#fff",
-      "line-dasharray": [2, 1],
-      "line-width": [
-        "interpolate",
-        ["exponential", 1.6],
-        ["zoom"],
-        14,
-        0,
-        14.5,
-        0.5,
-        20,
-        12,
-      ],
-    },
-  },
-  {
-    id: "roads_bridges_minor",
-    type: "line",
-    source: "protomaps",
-    "source-layer": "roads",
-    filter: ["all", [">", "pmap:level", 0], ["==", "pmap:kind", "minor_road"]],
-    paint: {
-      "line-color": "#fff",
-      "line-width": [
-        "interpolate",
-        ["exponential", 1.6],
-        ["zoom"],
-        12,
-        0,
-        12.5,
-        0.5,
-        20,
-        32,
-      ],
-    },
-  },
-  {
-    id: "roads_bridges_medium",
-    type: "line",
-    source: "protomaps",
-    "source-layer": "roads",
-    filter: ["all", [">", "pmap:level", 0], ["==", "pmap:kind", "medium_road"]],
-    paint: {
-      "line-color": "#fff",
-      "line-width": [
-        "interpolate",
-        ["exponential", 1.6],
-        ["zoom"],
-        7,
-        0,
-        7.5,
-        0.5,
-        20,
-        32,
-      ],
-    },
-  },
-  {
-    id: "roads_bridges_major",
-    type: "line",
-    source: "protomaps",
-    "source-layer": "roads",
-    filter: ["all", [">", "pmap:level", 0], ["==", "pmap:kind", "major_road"]],
-    paint: {
-      "line-color": "#fff",
-      "line-width": [
-        "interpolate",
-        ["exponential", 1.6],
-        ["zoom"],
-        7,
-        0,
-        7.5,
-        0.5,
-        19,
-        32,
-      ],
-    },
-  },
-  {
-    id: "roads_bridges_highway",
-    type: "line",
-    source: "protomaps",
-    "source-layer": "roads",
-    filter: ["all", [">", "pmap:level", 0], ["==", "pmap:kind", "highway"]],
-    paint: {
-      "line-color": "#fff",
-      "line-width": [
-        "interpolate",
-        ["exponential", 1.6],
-        ["zoom"],
-        3,
-        0,
-        3.5,
-        0.5,
-        18,
-        32,
-      ],
-    },
-  },
-  {
-    id: "physical_line_waterway_label",
-    type: "symbol",
-    source: "protomaps",
-    "source-layer": "physical_line",
-    minzoom: 14,
-    layout: {
-      "symbol-placement": "line",
-      "text-font": ["NotoSans-Regular"],
-      "text-field": ["get", "name"],
-      "text-size": 10,
-      "text-letter-spacing": 0.3,
-    },
-    paint: {
-      "text-color": "#6D6D6D",
-      "text-halo-color": "#fff",
-      "text-halo-width": 1,
-    },
-  },
-  {
-    id: "roads_labels",
-    type: "symbol",
-    source: "protomaps",
-    "source-layer": "roads",
-    layout: {
-      "symbol-placement": "line",
-      "text-font": ["NotoSans-Regular"],
-      "text-field": ["get", "name"],
-      "text-size": 12,
-    },
-    paint: {
-      "text-color": "#6D6D6D",
-      "text-halo-color": "#fff",
-      "text-halo-width": 2,
-    },
-  },
-  {
-    id: "mask",
-    type: "fill",
-    source: "protomaps",
-    "source-layer": "mask",
-    paint: {
-      "fill-color": "#F3F3F1",
-    },
-  },
-  {
-    id: "physical_point_ocean",
-    type: "symbol",
-    source: "protomaps",
-    "source-layer": "physical_point",
-    filter: ["any", ["==", "place", "sea"], ["==", "place", "ocean"]],
-    layout: {
-      "text-font": ["NotoSans-Regular"],
-      "text-field": ["get", "name"],
-      "text-size": 13,
-      "text-letter-spacing": 0.2,
-    },
-    paint: {
-      "text-color": "#6D6D6D",
-    },
-  },
-  {
-    id: "places_subplace",
-    type: "symbol",
-    source: "protomaps",
-    "source-layer": "places",
-    filter: ["==", "pmap:kind", "neighbourhood"],
-    layout: {
-      "text-field": "{name:en}",
-      "text-font": ["NotoSans-Regular"],
-      "text-size": 10,
-      "text-transform": "uppercase",
-    },
-    paint: {
-      "text-color": "#6D6D6D",
-      "text-halo-color": "#fff",
-      "text-halo-width": 0.5,
-    },
-  },
-  {
-    id: "places_city",
-    type: "symbol",
-    source: "protomaps",
-    "source-layer": "places",
-    filter: ["==", "pmap:kind", "city"],
-    layout: {
-      "text-field": "{name:en}",
-      "text-font": ["NotoSans-Regular"],
-      "text-size": ["step", ["get", "pmap:rank"], 0, 1, 12, 2, 10],
-      "text-variable-anchor": ["bottom-left"],
-      "text-radial-offset": 0.2,
-    },
-    paint: {
-      "text-color": "#6D6D6D",
-      "text-halo-color": "#fff",
-      "text-halo-width": 1,
-    },
-  },
-  {
-    id: "places_state",
-    type: "symbol",
-    source: "protomaps",
-    "source-layer": "places",
-    filter: ["==", "pmap:kind", "state"],
-    layout: {
-      "text-field": "{name:en}",
-      "text-font": ["NotoSans-Regular"],
-      "text-size": 14,
-      "text-radial-offset": 0.2,
-      "text-anchor": "center",
-      "text-transform": "uppercase",
-      "text-letter-spacing": 0.1,
-    },
-    paint: {
-      "text-color": "#A8A8A8",
-      "text-halo-color": "#fff",
-      "text-halo-width": 1,
-    },
-  },
-  {
-    id: "places_country",
-    type: "symbol",
-    source: "protomaps",
-    "source-layer": "places",
-    filter: ["==", "place", "country"],
-    layout: {
-      "text-field": "{name:en}",
-      "text-font": ["NotoSans-Regular"],
-      "text-size": 10,
-    },
-    paint: {
-      "text-color": "#848484",
-      "text-halo-color": "#fff",
-      "text-halo-width": 1,
-    },
-  },
-]
diff --git a/src/components/HotspotsMapDrone/utils.ts b/src/components/HotspotsMapDrone/utils.ts
deleted file mode 100644
index e93e3af..0000000
--- a/src/components/HotspotsMapDrone/utils.ts
+++ /dev/null
@@ -1,354 +0,0 @@
-import { CoordPair, cellsToMultiPolygon } from "h3-js"
-import * as h3 from "h3-js"
-import { HeliumIotIcon } from "../icons/HeliumIotIcon"
-import { HeliumMobileIcon } from "../icons/HeliumMobileIcon"
-
-export const MIN_MAP_ZOOM = 2
-export const MAX_MAP_ZOOM = 14
-
-const WORLD_BOUNDS: [CoordPair, CoordPair] = [
-  [-134.827109, 57.785781],
-  [129.767893, -30.955724],
-]
-
-export const INITIAL_MAP_VIEW_STATE = {
-  bounds: WORLD_BOUNDS,
-}
-
-export const MAP_CONTAINER_STYLE: React.CSSProperties = {
-  height: "100%",
-  width: "100%",
-  overflow: "hidden",
-  position: "relative",
-  backgroundColor: "rgb(19,24,37)",
-}
-
-export const MIN_HEXES_ZOOM = 7
-export const MIN_HEX_LABELS_ZOOM = 11
-export const POINTS_AND_HEXES_OVERLAP = 2
-
-export const HELIUM_IOT_COLOR = "#27E"
-export const HELIUM_MOBILE_COLOR = "#009FF9"
-
-const h3Indexes = ["89283082813ffff", "8928308281bffff"]
-// this is for testing actual data will come from api remove this once api set
-// Sample data structure for custom points
-// console.log(h3.cellToLatLng(h3Indexes[0]))
-// export const samplePointsData = {
-//   type: "FeatureCollection",
-//   features: [
-//     {
-//       type: "Feature",
-//       geometry: {
-//         type: "Point",
-//         coordinates: h3.cellToLatLng(h3Indexes[0])
-//       },
-//       properties: {
-//         id: "sample-point-1",
-//         name: "Sample Point 1"
-//       }
-//     },
-//     {
-//       type: "Feature",
-//       geometry: {
-//         type: "Point",
-//         coordinates: h3.cellToLatLng(h3Indexes[1])
-//       },
-//       properties: {
-//         id: "sample-point-2",
-//         name: "Sample Point 2"
-//       }
-//     }
-//   ]
-// };
-
-// // Sample data structure for custom hexes
-
-// export const sampleHexesData = {
-//   type: "FeatureCollection",
-//   features: [
-//     {
-//       type: "Feature",
-//       geometry: {
-//         type: "MultiPolygon",
-//         coordinates: cellsToMultiPolygon(h3Indexes, true)
-//       },
-//       properties: {
-
-//       }
-//     }
-//   ]
-// };
-
-export const samplePointsData = {
-  type: "FeatureCollection",
-  features: [
-    {
-      type: "Feature",
-      geometry: {
-        type: "Point",
-        coordinates: [77.4126, 23.2599], // Bhopal
-      },
-      properties: {
-        id: "point1",
-        name: "Sample Point 1",
-      },
-    },
-    {
-      type: "Feature",
-      geometry: {
-        type: "Point",
-        coordinates: [78.4126, 25.2599], // Jaipur
-      },
-      properties: {
-        id: "point2",
-        name: "Sample Point 2",
-      },
-    },
-    {
-      type: "Feature",
-      geometry: {
-        type: "Point",
-        coordinates: [72.8777, 19.076], // Mumbai
-      },
-      properties: {
-        id: "point3",
-        name: "Sample Point 3",
-      },
-    },
-    // {
-    //   type: "Feature",
-    //   geometry: {
-    //     type: "Point",
-    //     coordinates: [77.1025, 28.7041] // Delhi
-    //   },
-    //   properties: {
-    //     id: "point4",
-    //     name: "Sample Point 4"
-    //   }
-    // },
-    // {
-    //   type: "Feature",
-    //   geometry: {
-    //     type: "Point",
-    //     coordinates: [88.3639, 22.5726] // Kolkata
-    //   },
-    //   properties: {
-    //     id: "point5",
-    //     name: "Sample Point 5"
-    //   }
-    // }
-  ],
-}
-
-// Sample data structure for custom hexes
-export const sampleHexesData = {
-  type: "FeatureCollection",
-  features: [
-    {
-      type: "Feature",
-      geometry: {
-        type: "MultiPolygon",
-        coordinates: [
-          [
-            [
-              [77.4126, 23.2599], // Bhopal
-              [77.4136, 23.2609],
-              [77.4146, 23.2609],
-              [77.4156, 23.2599],
-              [77.4146, 23.2589],
-              [77.4136, 23.2589],
-              [77.4126, 23.2599],
-            ],
-          ],
-        ],
-      },
-      properties: {
-        id: "89283082813ffff",
-        count: 10,
-      },
-    },
-    {
-      type: "Feature",
-      geometry: {
-        type: "MultiPolygon",
-        coordinates: [
-          [
-            [
-              [78.4126, 25.2599], // Jaipur
-              [78.4136, 25.2609],
-              [78.4146, 25.2609],
-              [78.4156, 25.2599],
-              [78.4146, 25.2589],
-              [78.4136, 25.2589],
-              [78.4126, 25.2599],
-            ],
-          ],
-        ],
-      },
-      properties: {
-        id: "89283082813ffff",
-        count: 15,
-      },
-    },
-    {
-      type: "Feature",
-      geometry: {
-        type: "MultiPolygon",
-        coordinates: [
-          [
-            [
-              [72.8777, 19.076], // Mumbai
-              [72.8787, 19.077],
-              [72.8797, 19.077],
-              [72.8807, 19.076],
-              [72.8797, 19.075],
-              [72.8787, 19.075],
-              [72.8777, 19.076],
-            ],
-          ],
-        ],
-      },
-      properties: {
-        id: "hex3",
-        count: 20,
-      },
-    },
-  ],
-}
-
-export const getHexFillStyle = (color: string): mapboxgl.FillPaint => ({
-  "fill-color": color,
-  "fill-opacity": 0.4,
-})
-
-export const getBlurredPointStyle = (color: string): mapboxgl.CirclePaint => ({
-  "circle-color": color,
-  "circle-opacity": [
-    "interpolate",
-    ["exponential", 2],
-    ["zoom"],
-    MIN_MAP_ZOOM,
-    0.05,
-    MIN_HEXES_ZOOM + POINTS_AND_HEXES_OVERLAP,
-    0.4,
-  ],
-  "circle-radius": [
-    "interpolate",
-    ["exponential", 2],
-    ["zoom"],
-    MIN_MAP_ZOOM,
-    3,
-    MIN_HEXES_ZOOM + POINTS_AND_HEXES_OVERLAP,
-    2,
-  ],
-})
-
-export const getHexOutlineStyle = (
-  theme: string | undefined
-): mapboxgl.LinePaint => ({
-  "line-color": theme === "dark" ? "#fff" : "rgb(113,113,122)",
-  "line-width": 4,
-})
-
-export const getHexLabelStyle = (
-  theme: string | undefined
-): mapboxgl.SymbolPaint => ({
-  "text-color": theme === "dark" ? "white" : "#6D6D6D",
-})
-
-export const hexLabelLayout: mapboxgl.SymbolLayout = {
-  "text-font": ["NotoSans-Regular"],
-  "text-field": ["get", "count"],
-  "text-allow-overlap": false,
-  "text-size": 23,
-}
-
-export interface HexFeatureDetails {
-  hexId: string
-  geojson: GeoJSON.Geometry
-}
-
-export const ZOOM_BY_HEX_RESOLUTION: { [resolution: number]: number } = {
-  10: 14,
-  9: 14,
-  8: 13,
-  7: 12,
-  6: 11,
-  5: 10,
-  4: 9,
-}
-
-interface LayerConfig {
-  sourcePath: string
-  sourceLayer: string
-}
-
-export interface NetworkCoverageLayerOption {
-  name: string
-  icon: (props: any) => JSX.Element
-  color: string
-  sourceDomain: string
-  points: LayerConfig
-  hexes: LayerConfig
-}
-
-export const networkLayers: { [network: string]: NetworkCoverageLayerOption } =
-  {
-    mobile: {
-      name: "MOBILE",
-      icon: HeliumMobileIcon,
-      color: HELIUM_MOBILE_COLOR,
-      sourceDomain: process.env.NEXT_PUBLIC_HOTSPOTTY_TILESERVER_URL!,
-      points: {
-        sourcePath: "public.helium_mobile_points.json",
-        sourceLayer: "public.helium_mobile_points",
-      },
-      hexes: {
-        sourcePath: "public.helium_mobile_hexes.json",
-        sourceLayer: "public.helium_mobile_hexes",
-      },
-    },
-    iot: {
-      name: "IOT",
-      icon: HeliumIotIcon,
-      color: HELIUM_IOT_COLOR,
-      sourceDomain: process.env.NEXT_PUBLIC_HELIUMGEEK_TILESERVER_URL!,
-      points: {
-        sourcePath: "hg.gateways-rewarded-r8.points.json",
-        sourceLayer: "hg.gateways-rewarded-r8.points",
-      },
-      hexes: {
-        sourcePath: "hg.gateways-rewarded-r8.hexes.json",
-        sourceLayer: "hg.gateways-rewarded-r8.hexes",
-      },
-    },
-    custom: {
-      name: "CUSTOM",
-      icon: HeliumMobileIcon,
-      color: "#27EE",
-      sourceDomain: "",
-      points: {
-        sourcePath: "",
-        sourceLayer: "custom_points_layer",
-      },
-      hexes: {
-        sourcePath: "",
-        sourceLayer: "custom_hexes_layer",
-      },
-    },
-    customDrone: {
-      name: "CUSTOM",
-      icon: HeliumMobileIcon,
-      color: "#27EE00",
-      sourceDomain: "",
-      points: {
-        sourcePath: "",
-        sourceLayer: "custom_points_layer",
-      },
-      hexes: {
-        sourcePath: "",
-        sourceLayer: "custom_hexes_layer",
-      },
-    },
-  }