popups working

domlet · Jan 4, 2024 · 5ebce6b · 5ebce6b
1 parent 8951a12
commit 5ebce6b
Show file tree

Hide file tree

Showing 8 changed files with 649 additions and 429 deletions.
diff --git a/books.js b/books.js
diff --git a/img/a_death_in_the_family.jpeg → img/a_death_in_the_family.jpg b/img/a_death_in_the_family.jpeg → img/a_death_in_the_family.jpg
diff --git a/img/close_range.jpeg → img/close_range.jpg b/img/close_range.jpeg → img/close_range.jpg
diff --git a/img/election.jpeg → img/election.jpg b/img/election.jpeg → img/election.jpg
diff --git a/img/true_grit.jpeg → img/true_grit.jpg b/img/true_grit.jpeg → img/true_grit.jpg
diff --git a/img/true_north.jpeg → img/true_north.jpg b/img/true_north.jpeg → img/true_north.jpg
diff --git a/index.htm b/index.htm
@@ -180,10 +180,13 @@
         }
         console.log(coordinates)
         console.log(stateName)
+        const result = obj.find(obj => {
+          return obj.state_long === stateName
+        })
         new mapboxgl.Popup()
           .setLngLat(coordinates[0][0])
           // .setHTML(stateName)
-          .setHTML(document.getElementsByClassName("mapboxgl-popup-content").innerHTML = '<img src="' + obj[0].img + '" alt="" /><h2>' + obj[0].title + '</h2><br/><p>' + obj[0].author + '</p>')
+          .setHTML(document.getElementsByClassName("mapboxgl-popup-content").innerHTML = '<img src="' + result.img + '" alt="" /><h2>' + result.title + '</h2><br/><p>' + result.author + '</p>')
           .addTo(map);
       });
 

diff --git a/style.css b/style.css
@@ -9,18 +9,23 @@ body {
 .mapboxgl-popup {
   max-width: 400px;
   font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  width: 15em;
   }
 
   h2 {
     margin: 0; padding: 0;
   }
 
   p {
-    margin: 0; padding: 0;
+    margin: 0.3em 0 0 0; padding: 0;
   }
 
   img {
-    width: 10em;
-    margin: 1em 0;
+    width: 6em;
+    margin: 0.5em;
     float: right;
+    border: 1px solid gray;
+    border-radius: 0.2em;
+    filter: drop-shadow(2px 2px #0e0e0e);
+
   }