fixing css paths

earthrise-media · Jan 4, 2024 · 563f490 · 563f490
1 parent b0e7752
commit 563f490
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 19 deletions.
diff --git a/src/css/style.css b/src/css/style.css
@@ -14,27 +14,27 @@
 }
 @font-face {
   font-family: PPEiko-thin;
-  src: url('./fonts/pp-eiko/PPEiko-Thin.otf');
+  src: url('../fonts/pp-eiko/PPEiko-Thin.otf');
 }
 
 @font-face {
   font-family: PPEiko-medium;
-  src: url('./fonts/pp-eiko/PPEiko-Medium.otf');
+  src: url('../fonts/pp-eiko/PPEiko-Medium.otf');
 }
 
 @font-face {
   font-family: PPEiko-heavy;
-  src: url('./fonts/pp-eiko/PPEiko-Heavy.otf');
+  src: url('../fonts/pp-eiko/PPEiko-Heavy.otf');
 }
 
 @font-face {
   font-family: PPEiko-light-italic;
-  src: url('./fonts/pp-eiko/PPEiko-LightItalic.otf');
+  src: url('../fonts/pp-eiko/PPEiko-LightItalic.otf');
 }
 
 @font-face {
   font-family: PPEiko-black-italic;
-  src: url('./fonts/pp-eiko/PPEiko-BlackItalic.otf');
+  src: url('../fonts/pp-eiko/PPEiko-BlackItalic.otf');
 }
 
 body {
@@ -127,7 +127,7 @@ figure p {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  background-image: url('./chicken-headshot-transparent80.png');
+  background-image: url('../chicken-headshot-transparent80.png');
   background-position: center;
   background-repeat: no-repeat;
   /* opacity: 0.8; */

diff --git a/src/map.js b/src/map.js
@@ -60,7 +60,7 @@ map.on("load", () => {
         document.getElementById("static-frame").classList.add("active");
     });
     // when hovering over the layer poly-0102202024-41ymfd console.log (hello)
-    map.on('mouseenter', 'poly-fill3', function(e) {
+    map.on('mouseenter', 'poly-fill', function(e) {
         document.getElementById("static-frame").classList.add("active");
         poly_centroid = turf.centroid(e.features[0]).geometry.coordinates
         console.log("🐓");
@@ -73,18 +73,32 @@ map.on("load", () => {
 
         console.log("qf = ", queriedFeatures)
         // draw bounding box on map
-        // map.addLayer({
-        //     id: `bbox${e.lngLat}`,
-        //     type: "line",
-        //     source: {
-        //         type: "geojson",
-        //         data: turf.bboxPolygon(bbox),
-        //     },
-        //     paint: {
-        //         "line-color": "#ff0000",
-        //         "line-width": 2,
-        //     },
-        // });
+        map.addLayer({
+            id: `bbox${e.lngLat}`,
+            type: "line",
+            source: {
+                type: "geojson",
+                data: turf.bboxPolygon(bbox),
+            },
+            paint: {
+                "line-color": "#ff0000",
+                "line-width": 2,
+            },
+        });
+        // draw centroid on map
+        map.addLayer({
+            id: `centroid${e.lngLat}`,
+            type: "circle",
+            source: {
+                type: "geojson",
+                data: turf.centroid(e.features[0]),
+            },
+            paint: {
+                "circle-radius": 5,
+                "circle-color": "#ff0000",
+                "circle-opacity": 0.8,
+            },
+        });
 
         staticURL = `https://api.mapbox.com/styles/v1/plotline/clqybizqa00f101rj8l32czwr/static/${e.lngLat.lng},${e.lngLat.lat},15,0,0/${staticFrameDimensions[0]}x${staticFrameDimensions[1]}@2x?access_token=${accessToken}&attribution=false&logo=false`
         console.log(staticURL);