feat: Added map in property location site.

src/index.css

@@ -41,3 +41,7 @@ canvas {
   width: 95%;
   margin: 10px auto;
 }
+
+#propertyLocationMap {
+  height: 30vh !important;
+}

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>
   );
 }