Skip to content

Commit

Permalink
updating for mobile
Browse files Browse the repository at this point in the history
  • Loading branch information
@cameronkruse
cameronkruse committed Jan 5, 2024
1 parent 3d5c4fd commit 6231163
Show file tree
Hide file tree
Showing 2 changed files with 153 additions and 104 deletions.
42 changes: 41 additions & 1 deletion src/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -349,4 +350,43 @@ figure p {
font-size: 1rem;
margin: auto;
/* background-color: #3b3b3b; */
}
}
@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);
}
}
215 changes: 112 additions & 103 deletions src/map.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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", () => {
Expand All @@ -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", {
Expand Down

0 comments on commit 6231163

Please sign in to comment.