From 62311639f4a15dc20da1ecbeb34da255949ec873 Mon Sep 17 00:00:00 2001 From: Cameron Kruse <14115927+cameronkruse@users.noreply.github.com> Date: Thu, 4 Jan 2024 17:53:22 -0800 Subject: [PATCH] updating for mobile --- src/css/style.css | 42 ++++++++- src/map.js | 215 ++++++++++++++++++++++++---------------------- 2 files changed, 153 insertions(+), 104 deletions(-) diff --git a/src/css/style.css b/src/css/style.css index 4fc635d..12d16c5 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -236,6 +236,7 @@ figure p { border-radius: 10px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4); box-sizing: border-box; + } #dynamic-frame { position: absolute; @@ -349,4 +350,43 @@ figure p { font-size: 1rem; margin: auto; /* background-color: #3b3b3b; */ -} \ No newline at end of file +} +@media only screen and (max-width: 767px) { + #dynamic-frame, #static-frame, #curtain-1, #curtain-2 { + display: none; + } + /* make control panel above the map */ + #control-panel { + position: absolute; + padding: 0; + margin-left: 5px; + margin-right: 5px; + margin-top: 5px; + margin-bottom: 2.5px; + top: 0; + left: 0; + width: calc(100% - 10px); + 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; + } + #map { + position: absolute; + top: 100px; + left: 0; + margin-left: 5px; + margin-right: 5px; + margin-top: 5px; + margin-bottom: 5px; + width: calc(100% - 10px); + height: calc(100% - 120px); + border-radius: 10px; + overflow: hidden; + background-color: #ede6da; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4); + } +} diff --git a/src/map.js b/src/map.js index 134c119..61ed437 100644 --- a/src/map.js +++ b/src/map.js @@ -50,13 +50,13 @@ const minimap = new mapboxgl.Map({ 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, - }); + 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", () => { @@ -81,111 +81,120 @@ map.on("load", () => { // 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; + // if page is showing dynamic frame console.log (hello) + // else if page is showing static frame console.log (hello) + if (document.getElementById("static-frame").classList.contains("active")) { + console.log("static frame is active"); - console.log("🐓"); - console.log("Poly Centroid: ", polyCentroid); - console.log("Polygon: ", e.features[0]); - let bbox = turf.bbox(e.features[0]); - console.log("Bounding Box: ", bbox); - const queriedFeatures = map.queryRenderedFeatures(bbox, { - layers: ["building"], + map.on("click", function (e) { + // add active to the static-frame id + document.getElementById("static-frame").classList.add("active"); }); - moveMiniMap(bbox, polyCentroid); - - // console.log("qf = ", queriedFeatures); - // DEBUGGING - // debugPoly(bbox, e.features[0]); + // 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; - // getStaticMap(polyCentroid[1], polyCentroid[0]); - }); + console.log("🐓"); + console.log("Poly Centroid: ", polyCentroid); + console.log("Polygon: ", e.features[0]); + let bbox = turf.bbox(e.features[0]); + console.log("Bounding Box: ", bbox); + const queriedFeatures = map.queryRenderedFeatures(bbox, { + layers: ["building"], + }); + moveMiniMap(bbox, polyCentroid); - map.on("mouseleave", "poly-fill", function () { - // console.log("hovering"); - document.getElementById("static-frame").classList.remove("active"); - }); - map.on("zoomend", function () { - document.getElementById("cafo-count").innerHTML = `${cafosVisible()}`; - // document.getElementById("cafo-label").innerHTML = `Identified 🐓 CAFOs Visible`; - }); - map.on("moveend", function () { - document.getElementById("cafo-count").innerHTML = `${cafosVisible()}`; - // document.getElementById("cafo-label").innerHTML = `Identified 🐓 CAFOs Visible`; - }); + // console.log("qf = ", queriedFeatures); + // DEBUGGING + // debugPoly(bbox, e.features[0]); - function cafosVisible() { - let pointsVisible = map.queryRenderedFeatures({ - layers: ["points-1"], + // getStaticMap(polyCentroid[1], polyCentroid[0]); }); - 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.on("mouseleave", "poly-fill", function () { + // console.log("hovering"); + document.getElementById("static-frame").classList.remove("active"); }); - 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, - }, +} + map.on("zoomend", function () { + document.getElementById("cafo-count").innerHTML = `${cafosVisible()}`; + // document.getElementById("cafo-label").innerHTML = `Identified 🐓 CAFOs Visible`; }); - } - 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, + map.on("moveend", function () { + document.getElementById("cafo-count").innerHTML = `${cafosVisible()}`; + // document.getElementById("cafo-label").innerHTML = `Identified 🐓 CAFOs Visible`; }); - 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); + + 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", {