From 25ec30ea57c064855683062d7b87546004838321 Mon Sep 17 00:00:00 2001
From: Denis Thiessen <mail@denisthiessen.de>
Date: Thu, 6 Jun 2024 12:08:39 +0200
Subject: [PATCH] feat: Added map in property location site.

---
 src/index.css                                 |  4 +++
 .../tab_content/PropertyLocation.jsx          | 28 +++++++++++++++----
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/index.css b/src/index.css
index 70961ba..7a99ae5 100644
--- a/src/index.css
+++ b/src/index.css
@@ -40,4 +40,8 @@ canvas {
   height: 75vh;
   width: 95%;
   margin: 10px auto;
+}
+
+#propertyLocationMap {
+  height: 30vh !important;
 }
\ No newline at end of file
diff --git a/src/pages/study_site_5/tab_content/PropertyLocation.jsx b/src/pages/study_site_5/tab_content/PropertyLocation.jsx
index 4654693..b61f2f0 100644
--- a/src/pages/study_site_5/tab_content/PropertyLocation.jsx
+++ b/src/pages/study_site_5/tab_content/PropertyLocation.jsx
@@ -1,13 +1,29 @@
 import { Text } from "@geist-ui/core";
+import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
 
 function PropertyLocation() {
+  const position = [52.3728, 4.8875];
+
   return (
-    <Text>
-      Situated in the vibrant district of Jordaan, the flat is within walking
-      distance to key landmarks, shopping districts, and public transportation
-      hubs. Nearby attractions include the Anne Frank House, the Westermarkt,
-      and the bustling Dam Square.
-    </Text>
+    <div>
+      <Text>
+        Situated in the vibrant district of Jordaan, the flat is within walking
+        distance to key landmarks, shopping districts, and public transportation
+        hubs. Nearby attractions include the Anne Frank House, the Westermarkt,
+        and the bustling Dam Square.
+      </Text>
+      <MapContainer center={position} zoom={13} id="propertyLocationMap">
+        <TileLayer
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+        />
+        <Marker position={position}>
+          <Popup>
+            Herengracht 221<br />1016 BG Amsterdam
+          </Popup>
+        </Marker>
+      </MapContainer>
+    </div>
   );
 }