added image and popups

maptimeLA · May 7, 2024 · 5a63414 · 5a63414
1 parent f0726b2
commit 5a63414
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 1 deletion.
diff --git a/src/images/cover.png b/src/images/cover.png
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,5 +1,7 @@
 ---
 import "../styles/global.css";
+import { Image } from 'astro:assets';
+import coverImage  from '../images/cover.png'
 ---
 
 <html lang="en">
@@ -38,6 +40,7 @@ import "../styles/global.css";
   <body>
     <div id="credit">
       <div id="title">
+		<img class="image" src={coverImage.src} alt="A bird sitting on a nest of eggs.">
         <p class="headline">2024 Arts Datathon</p>
         <p class="secondary mb-4">LACOUNTY CIVIC ART COLLECTION</p>
       </div>
@@ -52,7 +55,7 @@ import "../styles/global.css";
         Registrar
       </p>
       <p>
-        <a href="https://www.meetup.com/maptimela/"
+        <a href="https://www.meetup.com/maptimela/" target="_blank"
           >Made by Nina Kin and Omar Ureta of MaptimeLA</a
         >
       </p>
@@ -67,6 +70,9 @@ import "../styles/global.css";
 </html>
 
 <style>
+	.image {
+		width: 25%;
+	}
   body {
     font-family: "Comfortaa", sans-serif;
   }

diff --git a/src/scripts/map.js b/src/scripts/map.js
@@ -28,7 +28,9 @@ function createMarkers(data) {
 
     data.forEach(item => {
         let marker = L.marker([item.Latitude, item.Longitude]);
+        console.log(item)
         marker.addTo(markerLayer);
+        marker.bindPopup(`<b>${item["Title"]}</b><br>By: ${item.ArtistName}<br>Medium: ${item.Medium}<br><br>${item["Location Name"]}<br>${item.AddressStreet}<br>${item.AddressCity}`).openPopup();
     });
     map.addLayer(markerLayer);
 }