diff --git a/src/css/style.css b/src/css/style.css index 7c9d689..ad60567 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -1,5 +1,5 @@ :root { - font-family: PPEiko-thin, PPEiko-medium, PPEiko-heavy, PPEiko-light-italic ; + font-family: PPEiko-thin, PPEiko-medium, PPEiko-heavy, PPEiko-light-italic; line-height: 1.5; font-weight: 400; @@ -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 { @@ -106,7 +106,7 @@ figure p { font-size: 1.5rem; background-color: #ffffff; max-width: 1000px; - margin: 0 auto; + margin: 0 auto; } .step h1 { text-align: center; @@ -120,28 +120,26 @@ figure p { height: 100vh; /* flex: 1; */ background-color: #040406; - color: #F5C53B; + color: #f5c53b; padding: 1rem; margin-bottom: 2rem; /* center contents vertically */ 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; */ - - } -#intro h1{ +#intro h1 { font-size: 5rem; font-family: PPEiko-heavy; text-align: center; padding: 0rem; margin: 0rem; } -#intro p{ +#intro p { font-size: 2.5rem; font-family: PPEiko-medium; text-align: center; @@ -161,12 +159,12 @@ figure p { font-weight: 900; color: #00ff4c; } -.highlight{ - background-color: #F5C53B; +.highlight { + background-color: #f5c53b; } .button-1 { - background-color: #F5C53B; + background-color: #f5c53b; border-radius: 8px; border-style: none; box-sizing: border-box; @@ -179,7 +177,7 @@ figure p { height: 40px; line-height: 20px; list-style: none; - margin: em auto; + margin: em auto; outline: none; padding: 10px 16px; position: relative; @@ -198,10 +196,9 @@ figure p { cursor: pointer; transform: translateY(-5px); /* Move the button up on hover */ box-shadow: 1px 3px 10px rgba(0, 0, 0, 0.4); - } .button-1:active { - background-color: #F5C53B; + background-color: #f5c53b; box-shadow: none; } @@ -210,45 +207,145 @@ figure p { position: absolute; top: 0; left: 400px; - margin: 5px; + margin-left: 5px; + margin-right: 5px; + margin-top: 5px; + margin-bottom: 5px; width: calc(100% - 410px); height: calc(100% - 10px); border-radius: 10px; overflow: hidden; - background-color: #EDE6DA; + background-color: #ede6da; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4); } #control-panel { position: absolute; padding: 0; - margin: 5px; + margin-left: 5px; + margin-right: 5px; + margin-top: 5px; + margin-bottom: 2.5px; top: 0; left: 0; width: 390px; - height: 70%; - background-color: #EDE6DA; + height: 100px; + background-color: #ede6da; overflow-y: scroll; overflow-x: hidden; border-radius: 10px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4); + box-sizing: border-box; } -#static-frame{ - position: absolute; - padding: 0; - margin: 5px; - bottom: 0; - left: 0; - width: 387px; - height: 27%; - background-color: #EDE6DA; - overflow-y: scroll; - overflow-x: hidden; - border-radius: 10px; - box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4); - border: 3px solid #f5c73b00; +#dynamic-frame { + position: absolute; + padding: 0; + margin-left: 5px; + margin-right: 5px; + margin-top: 2.5px; + margin-bottom: 2.5px; + top: 107.5px; + left: 0; + width: 390px; + height: calc((100% - 120px) / 2); + background-color: #ede6da; + overflow-y: scroll; + overflow-x: hidden; + border-radius: 10px; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4); + /* border: 3px solid #f5c73b00; */ + box-sizing: border-box; +} +#static-frame { + position: absolute; + padding: 0; + margin-left: 5px; + margin-right: 5px; + margin-top: 2.5px; + margin-bottom: 5px; + bottom: 0; + left: 0; + width: 390px; + height: calc((100% - 120px) / 2); + background-color: #ede6da; + overflow-y: scroll; + overflow-x: hidden; + border-radius: 10px; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4); + /* border: 3px solid #f5c73b00; */ + box-sizing: border-box; +} +#curtain-1 { + position: absolute; + padding: 0; + margin-left: 5px; + margin-right: 5px; + margin-top: 2.5px; + margin-bottom: 2.5px; + top: 107.5px; + left: 0; + width: 390px; + height: calc((100% - 120px) / 2); + background-color: #ede6da; + overflow-y: scroll; + overflow-x: hidden; + border-radius: 10px; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4); + /* border: 3px solid #f5c73b00; */ + box-sizing: border-box; + display: flex; + justify-content: center; + align-items: center; + +} +#curtain-2 { + position: absolute; + padding: 0; + margin-left: 5px; + margin-right: 5px; + margin-top: 2.5px; + margin-bottom: 5px; + bottom: 0; + left: 0; + width: 390px; + height: calc((100% - 120px) / 2); + background-color: #ede6da; + overflow-y: scroll; + overflow-x: hidden; + border-radius: 10px; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4); + /* border: 3px solid #f5c73b00; */ + box-sizing: border-box; + display: flex; + justify-content: center; + align-items: center; } +.static-frame.active { + border: 3px dashed #f5c53b; +} -#static-frame.active { - border: 3px dashed #F5C53B; +#cafo-count { + text-align: center; + font-family: PPEiko-heavy; + padding: 0rem; + font-size: 3rem; + color: #000000; + /* text outline black */ + /* -webkit-text-stroke: 2px #5b4b1d; */ + /* background-color: #3b3b3b; */ +} +#cafo-label { + text-align: center; + font-family: PPEiko-light-italic; + padding: 0rem; + font-size: 1rem; + /* background-color: #3b3b3b; */ } +.instructions { + text-align: center; + font-family: PPEiko-light-italic; + padding: 0rem; + font-size: 1rem; + margin: auto; + /* background-color: #3b3b3b; */ +} \ No newline at end of file diff --git a/src/map.js b/src/map.js index a1a2d36..6620afd 100644 --- a/src/map.js +++ b/src/map.js @@ -5,17 +5,24 @@ import mapboxgl from "mapbox-gl"; import "mapbox-gl/dist/mapbox-gl.css"; import * as turf from "@turf/turf"; - -let poly_centroid = null; +let polyCentroid = null; let staticURL = null; var accessToken = "pk.eyJ1IjoicGxvdGxpbmUiLCJhIjoiY2xmOGo1NW4wMGVtNzNya2UyNnllZGcyciJ9.gUFn8Mj5HQbagkpQWaDqaw"; document.querySelector("#app").innerHTML = `
-

+
+
+
+
-

+
+
+
Hover over an identified CAFO site
+
+
+
Hover over an identified CAFO site
@@ -23,9 +30,10 @@ document.querySelector("#app").innerHTML = ` `; // return the height and wdith of the static frame const staticFrameDimensions = [document.getElementById("static-frame").offsetWidth, document.getElementById("static-frame").offsetHeight]; +const dynamicFrameDimensions = [document.getElementById("dynamic-frame").offsetWidth, document.getElementById("dynamic-frame").offsetHeight]; mapboxgl.accessToken = accessToken; const map = new mapboxgl.Map({ - container: "map", + container: "map", style: "mapbox://styles/plotline/clqx5xsyi00e001rd731u0axx", center: [-85.71, 32.78], zoom: 4.83, @@ -33,107 +41,166 @@ const map = new mapboxgl.Map({ maxBounds: [-120, 7, -30, 60.38], hash: true, }); +const minimap = new mapboxgl.Map({ + container: "dynamic-frame", + style: "mapbox://styles/plotline/clqzkitkx00eu01pz4nx9hvde", + center: [-85.71, 32.78], + zoom: 4.83, + attributionControl: false, + interactive: false, +}); +const satmap = new mapboxgl.Map({ + container: "static-frame", + style: "mapbox://styles/plotline/clqx5xsyi00e001rd731u0axx", + center: [-85.71, 32.78], + zoom: 4.83, + attributionControl: false, + interactive: false, + }); + map.addControl(new mapboxgl.NavigationControl()); map.on("load", () => { - // add this as a polygon layer - // map.addSource("poly-fill2", { - // type: "geojson", - // data: "https://s3.us-east-2.amazonaws.com/stories2.theplotline.org/cafo-explorer/data/poly-0102202024.geojson", - // }); - // map.addLayer({ - // id: "poly-fill3", - // type: "fill", - // source: "poly-fill2", - // paint: { - // "fill-color": "#F5C53B", - // "fill-opacity": 0.1, - // }, - // }); + document.getElementById("cafo-count").innerHTML = `${cafosVisible()}`; + document.getElementById("cafo-label").innerHTML = `Identified 🐓 CAFO Sites Visible`; + // add this as a polygon layer + // map.addSource("poly-fill2", { + // type: "geojson", + // data: "https://s3.us-east-2.amazonaws.com/stories2.theplotline.org/cafo-explorer/data/poly-0102202024.geojson", + // }); + // map.addLayer({ + // id: "poly-fill3", + // type: "fill", + // source: "poly-fill2", + // paint: { + // "fill-color": "#F5C53B", + // "fill-opacity": 0.1, + // }, + // }); - // map.setPaintProperty("mapbox-satellite", "raster-opacity", 0.0); + // map.setPaintProperty("mapbox-satellite", "raster-opacity", 0.0); - // make the element with id static frame have css static frame active when hovering over the map - // map on click event - map.on('click', function(e) { - - // add active to the static-frame id - document.getElementById("static-frame").classList.add("active"); - }); - // when hovering over the layer poly-0102202024-41ymfd console.log (hello) - 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("🐓"); - console.log(poly_centroid); - const bbox = turf.bbox(e.features[0]); - // query rendered features in bbox in the building layer - const queriedFeatures = map.queryRenderedFeatures(bbox, { - layers: ["building"], - }); + // make the element with id static frame have css static frame active when hovering over the map + // map on click event + map.on("click", function (e) { + // add active to the static-frame id + document.getElementById("static-frame").classList.add("active"); + }); + // when hovering over the layer poly-0102202024-41ymfd console.log (hello) + map.on("mouseenter", "poly-fill", function (e) { + if (document.getElementById("curtain-1")) { + document.getElementById("curtain-1").remove(); + document.getElementById("curtain-2").remove(); + } + document.getElementById("static-frame").classList.add("active"); + polyCentroid = turf.centroid(e.features[0]).geometry.coordinates; - 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, - }, - }); - // 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); - // add a background image to the static frame - document.getElementById("static-frame").style.backgroundImage = `url(${staticURL})`; + console.log("🐓"); + let bbox = turf.bbox(e.features[0]); + console.log(bbox); + const queriedFeatures = map.queryRenderedFeatures(bbox, { + layers: ["building"], }); + moveMiniMap(bbox, polyCentroid); + + console.log("qf = ", queriedFeatures); + // DEBUGGIBG + // debugPoly(bbox, e.features[0]); - map.on('mouseleave', 'poly-fill', function() { - console.log("hovering"); - document.getElementById("static-frame").classList.remove("active"); - }); - // map.on('zoomend', function() { - // const queriedFeatures = map.queryRenderedFeatures(, { - // layers: ["building"], - // }); - - - // console.log(queriedFeatures) - // }); + // getStaticMap(polyCentroid[1], polyCentroid[0]); + }); + map.on("mouseleave", "poly-fill", function () { + console.log("hovering"); + document.getElementById("static-frame").classList.remove("active"); + }); + map.on("zoomend", function () { + console.log(cafosVisible()); + document.getElementById("cafo-count").innerHTML = `${cafosVisible()}`; + // document.getElementById("cafo-label").innerHTML = `Identified 🐓 CAFOs Visible`; + }); + map.on("moveend", function () { + console.log(cafosVisible()); + document.getElementById("cafo-count").innerHTML = `${cafosVisible()}`; + // document.getElementById("cafo-label").innerHTML = `Identified 🐓 CAFOs Visible`; + }); + function cafosVisible() { + let pointsVisible = map.queryRenderedFeatures({ + layers: ["points-1"], + }); + let polysVisible = map.queryRenderedFeatures({ + layers: ["poly-outline"], + }); + return Math.max(pointsVisible.length, polysVisible.length); + } + function getStaticMap(lat, lon) { + staticURL = `https://api.mapbox.com/styles/v1/plotline/clqybizqa00f101rj8l32czwr/static/${lon},${lat},15,0,0/${staticFrameDimensions[0]}x${staticFrameDimensions[1]}@2x?access_token=${accessToken}&attribution=false&logo=false`; + console.log(staticURL); + // add a background image to the static frame + document.getElementById("static-frame").style.backgroundImage = `url(${staticURL})`; + } + function debugPoly(bbox, point) { + map.addLayer({ + id: `bbox${bbox}`, + type: "line", + source: { + type: "geojson", + data: turf.bboxPolygon(bbox), + }, + paint: { + "line-color": "#ff0000", + "line-width": 2, + }, + }); + map.addLayer({ + id: `centroid${bbox}`, + type: "circle", + source: { + type: "geojson", + data: turf.centroid(point), + }, + paint: { + "circle-radius": 5, + "circle-color": "#ff0000", + "circle-opacity": 0.8, + }, + }); + } + function moveMiniMap(box, polyCentroid) { + // add satellite map boundary movements here + satmap.fitBounds([ + [box[0], box[1]], // southwestern corner of the bounds + [box[2], box[3]] // northeastern corner of the bounds + ], {linear: true, pitch: 0}); + minimap.jumpTo({ + center: [polyCentroid[0], polyCentroid[1]], + zoom: 17, + pitch: 75, + bearing: 0, + }); + rotateCamera(0); + } + function rotateCamera(timestamp) { + // clamp the rotation between 0 -360 degrees + // Divide timestamp by 100 to slow rotation to ~10 degrees / sec + minimap.rotateTo((timestamp / 100) % 360, { duration: 0 }); + // Request the next frame of the animation. + requestAnimationFrame(rotateCamera); + } -// map.addSource("cafos", { -// type: "geojson", -// data: "https://s3.us-east-2.amazonaws.com/stories2.theplotline.org/cafo-explorer/data/poly-0102202024.geojson", -// }); -// map.addLayer({ -// id: "cafos", -// type: "circle", -// source: "cafos", -// paint: { -// "circle-radius": 5, -// "circle-color": "#ff0000", -// "circle-opacity": 0.8, -// }, -// }); + // map.addSource("cafos", { + // type: "geojson", + // data: "https://s3.us-east-2.amazonaws.com/stories2.theplotline.org/cafo-explorer/data/poly-0102202024.geojson", + // }); + // map.addLayer({ + // id: "cafos", + // type: "circle", + // source: "cafos", + // paint: { + // "circle-radius": 5, + // "circle-color": "#ff0000", + // "circle-opacity": 0.8, + // }, + // }); });