diff --git a/site/package-lock.json b/site/package-lock.json
index c24c060..576b257 100644
--- a/site/package-lock.json
+++ b/site/package-lock.json
@@ -14,6 +14,7 @@
         "pmtiles": "^3.0.5",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-floater": "^0.9.3",
         "react-map-gl": "^7.1.7"
       },
       "devDependencies": {
@@ -842,6 +843,11 @@
       "resolved": "https://registry.npmjs.org/@geoarrow/geoarrow-wasm/-/geoarrow-wasm-0.2.0-beta.4.tgz",
       "integrity": "sha512-kvLmRWhzQFMtfq6HEiL745Yrwobg2609NgESemRhC3hhLn2gy/jKzin2SyP08UHTv6Z6TsY9OcNvKqsha+T50w=="
     },
+    "node_modules/@gilbarbara/deep-equal": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@gilbarbara/deep-equal/-/deep-equal-0.3.1.tgz",
+      "integrity": "sha512-I7xWjLs2YSVMc5gGx1Z3ZG1lgFpITPndpi8Ku55GeEIKpACCPQNS/OTqQbxgTCfq0Ncvcc+CrFov96itVh6Qvw=="
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.14",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -1029,6 +1035,15 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@rollup/pluginutils": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.0.tgz",
@@ -2250,6 +2265,14 @@
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "dev": true
     },
+    "node_modules/deepmerge-ts": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/deepmerge-ts/-/deepmerge-ts-5.1.0.tgz",
+      "integrity": "sha512-eS8dRJOckyo9maw9Tu5O5RUi/4inFLrnoLkBe3cPfDMx3WZioXtmOew4TXQaxq7Rhl4xjDtR7c6x8nNTxOvbFw==",
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
     "node_modules/define-data-property": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
@@ -3528,6 +3551,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-lite": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-lite/-/is-lite-1.2.1.tgz",
+      "integrity": "sha512-pgF+L5bxC+10hLBgf6R2P4ZZUBOQIIacbdo8YvuCP8/JvsWxG7aZ9p10DYuLtifFci4l3VITphhMlMV4Y+urPw=="
+    },
     "node_modules/is-map": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
@@ -4450,6 +4478,21 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-floater": {
+      "version": "0.9.3",
+      "resolved": "https://registry.npmjs.org/react-floater/-/react-floater-0.9.3.tgz",
+      "integrity": "sha512-nyblYb8WXAjnP64Rf6AiwcTL6YpfmPuAVkrMTUKoU7S2jVYv+HRIfJN3Amty7QIERNBmbUZtP9PVKajalwGzcw==",
+      "dependencies": {
+        "@popperjs/core": "^2.11.8",
+        "deepmerge-ts": "^5.1.0",
+        "is-lite": "^1.2.0",
+        "tree-changes-hook": "^0.11.2"
+      },
+      "peerDependencies": {
+        "react": "16.8 - 18",
+        "react-dom": "16.8 - 18"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -5082,6 +5125,27 @@
         "node": ">=4"
       }
     },
+    "node_modules/tree-changes": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/tree-changes/-/tree-changes-0.11.2.tgz",
+      "integrity": "sha512-4gXlUthrl+RabZw6lLvcCDl6KfJOCmrC16BC5CRdut1EAH509Omgg0BfKLY+ViRlzrvYOTWR0FMS2SQTwzumrw==",
+      "dependencies": {
+        "@gilbarbara/deep-equal": "^0.3.1",
+        "is-lite": "^1.2.0"
+      }
+    },
+    "node_modules/tree-changes-hook": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/tree-changes-hook/-/tree-changes-hook-0.11.2.tgz",
+      "integrity": "sha512-Zsgkp1zjEE9F1BLCGv/QKNInikIZVOI97MJhuEMIGyaW/0K46N35el0/aMBnFkQexJYFza6VBElgpZ77zFjLtw==",
+      "dependencies": {
+        "@gilbarbara/deep-equal": "^0.3.1",
+        "tree-changes": "0.11.2"
+      },
+      "peerDependencies": {
+        "react": "16.8 - 18"
+      }
+    },
     "node_modules/tslib": {
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
diff --git a/site/package.json b/site/package.json
index a7917e1..6bc9d2a 100644
--- a/site/package.json
+++ b/site/package.json
@@ -17,6 +17,7 @@
     "pmtiles": "^3.0.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-floater": "^0.9.3",
     "react-map-gl": "^7.1.7"
   },
   "devDependencies": {
diff --git a/site/src/App.jsx b/site/src/App.jsx
index 4621e90..054a02a 100644
--- a/site/src/App.jsx
+++ b/site/src/App.jsx
@@ -7,6 +7,7 @@ import { useState, useEffect } from "react";
 
 function App() {
   const [modeName, setModeName] = useState("theme-dark");
+  const [zoom, setZoom] = useState(0);
 
   useEffect(() => {
     keepTheme(setModeName);
@@ -14,8 +15,14 @@ function App() {
 
   return (
     <MapProvider>
-      <Header mode={modeName} setMode={setModeName} />
-      <Map mode={modeName} />
+      <Header
+        mode={modeName}
+        setMode={setModeName}
+        zoom={zoom}
+        setZoom={setZoom}
+      />
+      <Map mode={modeName} setZoom={setZoom} />
+      <Footer mode={modeName} />
     </MapProvider>
   );
 }
diff --git a/site/src/Map.jsx b/site/src/Map.jsx
index 21dd25d..094cbd1 100644
--- a/site/src/Map.jsx
+++ b/site/src/Map.jsx
@@ -7,6 +7,7 @@ import {
 import "maplibre-gl/dist/maplibre-gl.css";
 import * as pmtiles from "pmtiles";
 import maplibregl from "maplibre-gl";
+
 import { useState, useEffect, useCallback, useRef } from "react";
 import { Layer, GeolocateControl } from "react-map-gl/maplibre";
 import InspectorPanel from "./InspectorPanel";
@@ -133,7 +134,7 @@ ThemeTypeLayer.propTypes = {
   extrusion: PropTypes.bool,
 };
 
-export default function Map({ mode }) {
+export default function Map({ mode, setZoom }) {
   const mapRef = useRef();
   const [cursor, setCursor] = useState("auto");
   const [mapEntity, setMapEntity] = useState({});
@@ -144,6 +145,7 @@ export default function Map({ mode }) {
   useEffect(() => {
     const protocol = new pmtiles.Protocol();
     maplibregl.addProtocol("pmtiles", protocol.tile);
+
     return () => {
       maplibregl.removeProtocol("pmtiles");
     };
@@ -173,6 +175,10 @@ export default function Map({ mode }) {
     }
   }, []);
 
+  const handleZoom = (event) => {
+    setZoom(event.target.getZoom());
+  };
+
   return (
     <>
       <div className={`map ${mode}`}>
@@ -185,6 +191,7 @@ export default function Map({ mode }) {
           onClick={onClick}
           cursor={cursor}
           hash={true}
+          onZoom={handleZoom}
           mapStyle={MAP_STYLE}
           interactiveLayerIds={interactiveLayerIds}
           initialViewState={INITIAL_VIEW_STATE}
@@ -318,6 +325,7 @@ export default function Map({ mode }) {
           {Object.keys(mapEntity).length > 0 && (
             <InspectorPanel entity={mapEntity} />
           )}
+
           <ThemeSelector visibleThemes={setVisibleThemes}></ThemeSelector>
         </div>
       </div>
diff --git a/site/src/nav/DownloadButton.css b/site/src/nav/DownloadButton.css
index 050520e..2ca497a 100644
--- a/site/src/nav/DownloadButton.css
+++ b/site/src/nav/DownloadButton.css
@@ -59,3 +59,7 @@ svg.icon-refresh > path.secondary {
 div.download-text {
   padding-left: 1px;
 }
+
+div.download-zoom-tip {
+  border-radius: 10px;
+}
diff --git a/site/src/nav/DownloadButton.jsx b/site/src/nav/DownloadButton.jsx
index d862d92..5b7a2cc 100644
--- a/site/src/nav/DownloadButton.jsx
+++ b/site/src/nav/DownloadButton.jsx
@@ -10,15 +10,20 @@ import {
 import downloadIcon from "/download.svg";
 import RefreshIcon from "../icons/icon-refresh.svg?react";
 import "./DownloadButton.css";
+import Floater from "react-floater";
 
-function DownloadButton() {
+const ZOOM_BOUND = 16;
+
+function DownloadButton({ mode, zoom, setZoom }) {
   const { myMap } = useMap();
 
   const [loading, setLoading] = useState(false);
+  const [showFloater, setShowFloater] = useState(false);
 
   useEffect(() => {
     if (myMap) {
       myMap.getBounds();
+      setZoom(myMap.getZoom());
     }
   }, [myMap]);
 
@@ -81,25 +86,74 @@ function DownloadButton() {
     setLoading(false);
   };
 
+  const handleToggleTooltip = () => {
+    if (zoom < ZOOM_BOUND) {
+      setShowFloater(!showFloater);
+    }
+  };
+
   return (
-    <div className="button--download">
-      <button
-        className={`button button--primary ${loading ? "disabled" : ""}`}
-        onClick={handleDownloadClick}
-      >
-        <div className="wrapper">
-          <div className="download-icon">
-            {!loading ? (
-              <img className={"dl-img"} src={downloadIcon} />
-            ) : (
-              <RefreshIcon />
-            )}
+    <div>
+      <Floater
+        styles={{
+          container: {
+            borderRadius: "10px",
+            padding: "10px",
+            color: mode === "theme-dark" ? "white" : "black",
+            fontSize: ".7rem",
+            background:
+              mode === "theme-dark"
+                ? "var(--ifm-navbar-background-color)"
+                : "var(--ifm-color-secondary-light)",
+          },
+          arrow: {
+            color:
+              mode === "theme-dark"
+                ? "var(--ifm-navbar-background-color)"
+                : "var(--ifm-color-secondary-light)",
+          },
+        }}
+        content={
+          <div>
+            The download button is disabled at zoom levels below {ZOOM_BOUND}.
+            This is done to prevent downloading large amounts of data. To
+            reenable the button, zoom further in. If you wish to download a
+            larger area of data points, consider using our python installer,
+            found at{" "}
+            <a
+              href={"https://github.com/OvertureMaps/overturemaps-py"}
+              target="_blank"
+              rel="noreferrer noopener"
+            >
+              our git repository
+            </a>
+            .
           </div>
-          <div className="download-text">
-            {loading ? "Downloading..." : "Download Visible"}
+        }
+        open={showFloater}
+        target={".button--download"}
+      />
+      <div className="button--download" onMouseDown={handleToggleTooltip}>
+        <button
+          className={`button button--primary ${
+            loading || zoom < ZOOM_BOUND ? "disabled" : ""
+          }`}
+          onClick={handleDownloadClick}
+        >
+          <div className="wrapper">
+            <div className="download-icon">
+              {!loading ? (
+                <img className={"dl-img"} src={downloadIcon} />
+              ) : (
+                <RefreshIcon />
+              )}
+            </div>
+            <div className="download-text">
+              {loading ? "Downloading..." : "Download Visible"}
+            </div>
           </div>
-        </div>
-      </button>
+        </button>
+      </div>
     </div>
   );
 }
diff --git a/site/src/nav/Header.jsx b/site/src/nav/Header.jsx
index cbc938e..307d93c 100644
--- a/site/src/nav/Header.jsx
+++ b/site/src/nav/Header.jsx
@@ -3,7 +3,7 @@ import OvertureWordmark from "./OvertureWordmark";
 import DarkModeToggle from "./DarkModeToggle";
 import PropTypes from "prop-types";
 
-export default function Header({ mode, setMode }) {
+export default function Header({ zoom, mode, setMode, setZoom }) {
   return (
     <nav aria-label="Main" className="navbar navbar--fixed-top">
       <div className="navbar__inner">
@@ -12,7 +12,7 @@ export default function Header({ mode, setMode }) {
         </div>
         <div className="navbar__items navbar__items--right">
           <DarkModeToggle mode={mode} setMode={setMode} />
-          <DownloadButton />
+          <DownloadButton zoom={zoom} mode={mode} setZoom={setZoom} />
         </div>
       </div>
     </nav>