Add map

david-tejada · Mar 28, 2024 · 1a08fc1 · 1a08fc1
1 parent 541cf0d
commit 1a08fc1
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -4,11 +4,17 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <link rel="stylesheet" href="src/style.css" />
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+      integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+      crossorigin=""
+    />
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Frontend Mentor | IP Address Tracker</title>
   </head>
-  <body class="bg-gray-400">
+  <body class="grid h-screen grid-rows-[auto_1fr]">
     <header
       class="bg-[url('/pattern-bg-mobile.png')] bg-cover bg-no-repeat px-4 py-8 sm:bg-[url('/pattern-bg-desktop.png')]"
     >
@@ -39,7 +45,7 @@ <h1 class="text-center text-2xl font-bold text-white">
         </form>
 
         <ul
-          class="absolute top-[calc(100%+1rem)] mx-auto mt-4 grid w-full gap-4 rounded-xl bg-white p-6 text-center font-bold sm:grid-flow-col sm:text-left"
+          class="absolute top-[calc(100%+1rem)] z-[1000] mx-auto mt-4 grid w-full gap-4 rounded-xl bg-white p-6 text-center font-bold sm:grid-flow-col sm:text-left"
         >
           <li>
             <p class="text-xs uppercase text-gray-400">IP address</p>
@@ -67,7 +73,9 @@ <h1 class="text-center text-2xl font-bold text-white">
       </div>
     </header>
 
-    <main></main>
+    <main>
+      <div id="map" class="h-full w-full"></div>
+    </main>
 
     <script type="module" src="/src/main.ts"></script>
   </body>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
+    "@types/leaflet": "^1.9.8",
     "autoprefixer": "^10.4.19",
     "postcss": "^8.4.38",
     "prettier": "^3.2.5",
@@ -18,6 +19,7 @@
     "vite": "^5.2.0"
   },
   "dependencies": {
-    "@netlify/functions": "^2.6.0"
+    "@netlify/functions": "^2.6.0",
+    "leaflet": "^1.9.4"
   }
 }
diff --git a/src/main.ts b/src/main.ts
@@ -1,3 +1,5 @@
+import L from "leaflet";
+
 type LocationDataError = { code: number; messages: string };
 type LocationData = {
   ip: number;
@@ -13,6 +15,17 @@ type LocationData = {
 type LocationDataResponse = LocationDataError | LocationData;
 
 const searchForm = document.querySelector<HTMLFormElement>("#js-search");
+const map = L.map("map", { zoomControl: false }).setView([51.505, -0.09], 13);
+L.control
+  .zoom({
+    position: "bottomleft",
+  })
+  .addTo(map);
+L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
+  maxZoom: 19,
+  attribution:
+    '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+}).addTo(map);
 
 const pIp = document.querySelector("#js-ip")!;
 const pLocation = document.querySelector("#js-location")!;