From fb03d738f873c1e905410ee68a2ace2e95ecb647 Mon Sep 17 00:00:00 2001 From: Victor Date: Mon, 27 Jan 2025 17:41:53 -0800 Subject: [PATCH 1/7] feat(map): added map via leaflet with dummy data --- .env | 3 ++ .gitignore | 2 ++ package-lock.json | 57 +++++++++++++++++++++++++++++++++++-- package.json | 5 +++- prettier.config.js | 1 + src/app/map/page.tsx | 47 +++++++++++++++++++++++++++++- src/app/map/tree_data.ts | 60 +++++++++++++++++++++++++++++++++++++++ src/styles/map.module.css | 7 +++++ 8 files changed, 177 insertions(+), 5 deletions(-) create mode 100644 .env create mode 100644 src/app/map/tree_data.ts create mode 100644 src/styles/map.module.css diff --git a/.env b/.env new file mode 100644 index 0000000..3e7f2a2 --- /dev/null +++ b/.env @@ -0,0 +1,3 @@ +# create local copy of this file and rename to .env.local +# make sure to add .env.local to .gitignore!! +MONGO_URI={mongo-uri-here} \ No newline at end of file diff --git a/.gitignore b/.gitignore index 8f322f0..a621357 100644 --- a/.gitignore +++ b/.gitignore @@ -33,3 +33,5 @@ yarn-error.log* # typescript *.tsbuildinfo next-env.d.ts + +prettier.config.js \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 142ad6e..03d46e3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,12 +12,15 @@ "@emotion/react": "^11.14.0", "@emotion/styled": "^11.14.0", "framer-motion": "^11.18.0", + "leaflet": "^1.9.4", "mongoose": "^8", "next": "^14.2.23", "react": "^18", - "react-dom": "^18" + "react-dom": "^18", + "react-leaflet": "^5.0.0" }, "devDependencies": { + "@types/leaflet": "^1.9.16", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", @@ -870,6 +873,17 @@ "url": "https://opencollective.com/popperjs" } }, + "node_modules/@react-leaflet/core": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-3.0.0.tgz", + "integrity": "sha512-3EWmekh4Nz+pGcr+xjf0KNyYfC3U2JjnkWsh0zcqaexYqmmB5ZhH37kz41JXGmKzpaMZCnPofBBm64i+YrEvGQ==", + "license": "Hippocratic-2.1", + "peerDependencies": { + "leaflet": "^1.9.0", + "react": "^19.0.0", + "react-dom": "^19.0.0" + } + }, "node_modules/@rtsao/scc": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz", @@ -890,6 +904,13 @@ "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==", "license": "Apache-2.0" }, + "node_modules/@types/geojson": { + "version": "7946.0.16", + "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz", + "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/json5": { "version": "0.0.29", "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", @@ -897,6 +918,16 @@ "dev": true, "license": "MIT" }, + "node_modules/@types/leaflet": { + "version": "1.9.16", + "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.16.tgz", + "integrity": "sha512-wzZoyySUxkgMZ0ihJ7IaUIblG8Rdc8AbbZKLneyn+QjYsj5q1QU7TEKYqwTr10BGSzY5LI7tJk9Ifo+mEjdFRw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/geojson": "*" + } + }, "node_modules/@types/lodash": { "version": "4.17.14", "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.14.tgz", @@ -932,14 +963,14 @@ "version": "15.7.14", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz", "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==", - "devOptional": true, + "dev": true, "license": "MIT" }, "node_modules/@types/react": { "version": "18.3.18", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.18.tgz", "integrity": "sha512-t4yC+vtgnkYjNSKlFx1jkAhH8LgTo2N/7Qvi83kdEaUtMDiwpbLAktKDaAMlRcJ5eSxZkH74eEGt1ky31d7kfQ==", - "devOptional": true, + "dev": true, "license": "MIT", "dependencies": { "@types/prop-types": "*", @@ -4103,6 +4134,12 @@ "node": ">=0.10" } }, + "node_modules/leaflet": { + "version": "1.9.4", + "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz", + "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==", + "license": "BSD-2-Clause" + }, "node_modules/levn": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz", @@ -5348,6 +5385,20 @@ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", "license": "MIT" }, + "node_modules/react-leaflet": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-5.0.0.tgz", + "integrity": "sha512-CWbTpr5vcHw5bt9i4zSlPEVQdTVcML390TjeDG0cK59z1ylexpqC6M1PJFjV8jD7CF+ACBFsLIDs6DRMoLEofw==", + "license": "Hippocratic-2.1", + "dependencies": { + "@react-leaflet/core": "^3.0.0" + }, + "peerDependencies": { + "leaflet": "^1.9.0", + "react": "^19.0.0", + "react-dom": "^19.0.0" + } + }, "node_modules/react-remove-scroll": { "version": "2.6.2", "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.2.tgz", diff --git a/package.json b/package.json index 025ae10..c97b145 100644 --- a/package.json +++ b/package.json @@ -17,12 +17,15 @@ "@emotion/react": "^11.14.0", "@emotion/styled": "^11.14.0", "framer-motion": "^11.18.0", + "leaflet": "^1.9.4", "mongoose": "^8", "next": "^14.2.23", "react": "^18", - "react-dom": "^18" + "react-dom": "^18", + "react-leaflet": "^5.0.0" }, "devDependencies": { + "@types/leaflet": "^1.9.16", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", diff --git a/prettier.config.js b/prettier.config.js index 1c498fe..62f02d6 100644 --- a/prettier.config.js +++ b/prettier.config.js @@ -1,4 +1,5 @@ module.exports = { // wider line length for better TSX readability printWidth: 120, + endOfLine: "lf", }; diff --git a/src/app/map/page.tsx b/src/app/map/page.tsx index e64110a..3e32f69 100644 --- a/src/app/map/page.tsx +++ b/src/app/map/page.tsx @@ -1,3 +1,48 @@ +"use client"; +import { useRef, useEffect } from "react"; +import L from "leaflet"; +import "leaflet/dist/leaflet.css"; +import "leaflet/dist/images/marker-icon.png"; +import "leaflet/dist/images/marker-shadow.png"; +import { Tree, treeData } from "./tree_data"; +import styles from "@/styles/map.module.css"; + export default function Map() { - return
Will probably be made into a component later and not a page, but go to /map to develop!
; + const mapRef = useRef(null); + useEffect(() => { + //use the default icon for marker + const DefaultIcon = L.icon({ + iconUrl: "https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon.png", + shadowUrl: "https://unpkg.com/leaflet@1.7.1/dist/images/marker-shadow.png", + }); + L.Marker.prototype.options.icon = DefaultIcon; + + //initilize the map + if (!mapRef.current) { + mapRef.current = L.map("map").setView([35.270378, -120.680656], 14.5); + L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(mapRef.current); + } + + //add marker to map + if (mapRef.current) { + treeData.map((tree: Tree) => { + const marker = L.marker([tree.gpsCoords[0], tree.gpsCoords[1]]).addTo(mapRef.current!); + marker.bindPopup(` + ${tree.species}
+ Collected by: ${tree.collectorName}
+ Date Collected: ${tree.dateCollected.toISOString().split("T")[0]}
+ Notes: ${tree.notes || "No additional notes"} + `); + }); + } + }, []); + + return ( +
+
+ Map with 5 points +
+
+
+ ); } diff --git a/src/app/map/tree_data.ts b/src/app/map/tree_data.ts new file mode 100644 index 0000000..f28f7ce --- /dev/null +++ b/src/app/map/tree_data.ts @@ -0,0 +1,60 @@ +//temp class tree +export interface Tree { + collectorName: string; + gpsCoords: number[]; + dateCollected: Date; + photo?: string; + dbh: number; + canopyBreadth: number; + species: string; + treeCond: string[]; + notes?: string; +} +//Dummy data +export const treeData: Tree[] = [ + { + collectorName: "John Doe", + gpsCoords: [35.267763, -120.675414], + dateCollected: new Date("2025-01-25"), + dbh: 15.2, + canopyBreadth: 8.5, + species: "Quercus agrifolia", + treeCond: ["Healthy", "Mature"], + }, + { + collectorName: "Jane Smith", + gpsCoords: [35.273266, -120.680012], + dateCollected: new Date("2025-01-26"), + dbh: 10.4, + canopyBreadth: 6.3, + species: "Pinus ponderosa", + treeCond: ["Healthy", "Young"], + }, + { + collectorName: "Michael Brown", + gpsCoords: [35.276883, -120.673991], + dateCollected: new Date("2025-01-27"), + dbh: 20.8, + canopyBreadth: 12.4, + species: "Sequoia sempervirens", + treeCond: ["Healthy", "Mature", "Thriving"], + }, + { + collectorName: "Sarah Johnson", + gpsCoords: [35.276889, -120.686529], + dateCollected: new Date("2025-01-27"), + dbh: 5.9, + canopyBreadth: 3.2, + species: "Acer macrophyllum", + treeCond: ["Healthy", "Young"], + }, + { + collectorName: "Emily Davis", + gpsCoords: [35.270783, -120.674544], + dateCollected: new Date("2025-01-28"), + dbh: 25.6, + canopyBreadth: 15.7, + species: "Platanus racemosa", + treeCond: ["Healthy", "Old Growth"], + }, +]; diff --git a/src/styles/map.module.css b/src/styles/map.module.css new file mode 100644 index 0000000..51f8ebe --- /dev/null +++ b/src/styles/map.module.css @@ -0,0 +1,7 @@ +.MapContainer { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + height: 100vh; +} From d9d349ea45733fb5cd372a9e555916fbe12300dc Mon Sep 17 00:00:00 2001 From: Victor Date: Mon, 27 Jan 2025 17:47:21 -0800 Subject: [PATCH 2/7] feat(map): added map via leaflet with dummy data --- package-lock.json | 57 +++++++++++++++++++++++++++++++++++-- package.json | 5 +++- src/app/map/page.tsx | 47 +++++++++++++++++++++++++++++- src/app/map/tree_data.ts | 60 +++++++++++++++++++++++++++++++++++++++ src/styles/map.module.css | 7 +++++ 5 files changed, 171 insertions(+), 5 deletions(-) create mode 100644 src/app/map/tree_data.ts create mode 100644 src/styles/map.module.css diff --git a/package-lock.json b/package-lock.json index 142ad6e..03d46e3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,12 +12,15 @@ "@emotion/react": "^11.14.0", "@emotion/styled": "^11.14.0", "framer-motion": "^11.18.0", + "leaflet": "^1.9.4", "mongoose": "^8", "next": "^14.2.23", "react": "^18", - "react-dom": "^18" + "react-dom": "^18", + "react-leaflet": "^5.0.0" }, "devDependencies": { + "@types/leaflet": "^1.9.16", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", @@ -870,6 +873,17 @@ "url": "https://opencollective.com/popperjs" } }, + "node_modules/@react-leaflet/core": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-3.0.0.tgz", + "integrity": "sha512-3EWmekh4Nz+pGcr+xjf0KNyYfC3U2JjnkWsh0zcqaexYqmmB5ZhH37kz41JXGmKzpaMZCnPofBBm64i+YrEvGQ==", + "license": "Hippocratic-2.1", + "peerDependencies": { + "leaflet": "^1.9.0", + "react": "^19.0.0", + "react-dom": "^19.0.0" + } + }, "node_modules/@rtsao/scc": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz", @@ -890,6 +904,13 @@ "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==", "license": "Apache-2.0" }, + "node_modules/@types/geojson": { + "version": "7946.0.16", + "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz", + "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/json5": { "version": "0.0.29", "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", @@ -897,6 +918,16 @@ "dev": true, "license": "MIT" }, + "node_modules/@types/leaflet": { + "version": "1.9.16", + "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.16.tgz", + "integrity": "sha512-wzZoyySUxkgMZ0ihJ7IaUIblG8Rdc8AbbZKLneyn+QjYsj5q1QU7TEKYqwTr10BGSzY5LI7tJk9Ifo+mEjdFRw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/geojson": "*" + } + }, "node_modules/@types/lodash": { "version": "4.17.14", "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.14.tgz", @@ -932,14 +963,14 @@ "version": "15.7.14", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz", "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==", - "devOptional": true, + "dev": true, "license": "MIT" }, "node_modules/@types/react": { "version": "18.3.18", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.18.tgz", "integrity": "sha512-t4yC+vtgnkYjNSKlFx1jkAhH8LgTo2N/7Qvi83kdEaUtMDiwpbLAktKDaAMlRcJ5eSxZkH74eEGt1ky31d7kfQ==", - "devOptional": true, + "dev": true, "license": "MIT", "dependencies": { "@types/prop-types": "*", @@ -4103,6 +4134,12 @@ "node": ">=0.10" } }, + "node_modules/leaflet": { + "version": "1.9.4", + "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz", + "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==", + "license": "BSD-2-Clause" + }, "node_modules/levn": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz", @@ -5348,6 +5385,20 @@ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", "license": "MIT" }, + "node_modules/react-leaflet": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-5.0.0.tgz", + "integrity": "sha512-CWbTpr5vcHw5bt9i4zSlPEVQdTVcML390TjeDG0cK59z1ylexpqC6M1PJFjV8jD7CF+ACBFsLIDs6DRMoLEofw==", + "license": "Hippocratic-2.1", + "dependencies": { + "@react-leaflet/core": "^3.0.0" + }, + "peerDependencies": { + "leaflet": "^1.9.0", + "react": "^19.0.0", + "react-dom": "^19.0.0" + } + }, "node_modules/react-remove-scroll": { "version": "2.6.2", "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.2.tgz", diff --git a/package.json b/package.json index 025ae10..c97b145 100644 --- a/package.json +++ b/package.json @@ -17,12 +17,15 @@ "@emotion/react": "^11.14.0", "@emotion/styled": "^11.14.0", "framer-motion": "^11.18.0", + "leaflet": "^1.9.4", "mongoose": "^8", "next": "^14.2.23", "react": "^18", - "react-dom": "^18" + "react-dom": "^18", + "react-leaflet": "^5.0.0" }, "devDependencies": { + "@types/leaflet": "^1.9.16", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", diff --git a/src/app/map/page.tsx b/src/app/map/page.tsx index e64110a..3e32f69 100644 --- a/src/app/map/page.tsx +++ b/src/app/map/page.tsx @@ -1,3 +1,48 @@ +"use client"; +import { useRef, useEffect } from "react"; +import L from "leaflet"; +import "leaflet/dist/leaflet.css"; +import "leaflet/dist/images/marker-icon.png"; +import "leaflet/dist/images/marker-shadow.png"; +import { Tree, treeData } from "./tree_data"; +import styles from "@/styles/map.module.css"; + export default function Map() { - return
Will probably be made into a component later and not a page, but go to /map to develop!
; + const mapRef = useRef(null); + useEffect(() => { + //use the default icon for marker + const DefaultIcon = L.icon({ + iconUrl: "https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon.png", + shadowUrl: "https://unpkg.com/leaflet@1.7.1/dist/images/marker-shadow.png", + }); + L.Marker.prototype.options.icon = DefaultIcon; + + //initilize the map + if (!mapRef.current) { + mapRef.current = L.map("map").setView([35.270378, -120.680656], 14.5); + L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(mapRef.current); + } + + //add marker to map + if (mapRef.current) { + treeData.map((tree: Tree) => { + const marker = L.marker([tree.gpsCoords[0], tree.gpsCoords[1]]).addTo(mapRef.current!); + marker.bindPopup(` + ${tree.species}
+ Collected by: ${tree.collectorName}
+ Date Collected: ${tree.dateCollected.toISOString().split("T")[0]}
+ Notes: ${tree.notes || "No additional notes"} + `); + }); + } + }, []); + + return ( +
+
+ Map with 5 points +
+
+
+ ); } diff --git a/src/app/map/tree_data.ts b/src/app/map/tree_data.ts new file mode 100644 index 0000000..f28f7ce --- /dev/null +++ b/src/app/map/tree_data.ts @@ -0,0 +1,60 @@ +//temp class tree +export interface Tree { + collectorName: string; + gpsCoords: number[]; + dateCollected: Date; + photo?: string; + dbh: number; + canopyBreadth: number; + species: string; + treeCond: string[]; + notes?: string; +} +//Dummy data +export const treeData: Tree[] = [ + { + collectorName: "John Doe", + gpsCoords: [35.267763, -120.675414], + dateCollected: new Date("2025-01-25"), + dbh: 15.2, + canopyBreadth: 8.5, + species: "Quercus agrifolia", + treeCond: ["Healthy", "Mature"], + }, + { + collectorName: "Jane Smith", + gpsCoords: [35.273266, -120.680012], + dateCollected: new Date("2025-01-26"), + dbh: 10.4, + canopyBreadth: 6.3, + species: "Pinus ponderosa", + treeCond: ["Healthy", "Young"], + }, + { + collectorName: "Michael Brown", + gpsCoords: [35.276883, -120.673991], + dateCollected: new Date("2025-01-27"), + dbh: 20.8, + canopyBreadth: 12.4, + species: "Sequoia sempervirens", + treeCond: ["Healthy", "Mature", "Thriving"], + }, + { + collectorName: "Sarah Johnson", + gpsCoords: [35.276889, -120.686529], + dateCollected: new Date("2025-01-27"), + dbh: 5.9, + canopyBreadth: 3.2, + species: "Acer macrophyllum", + treeCond: ["Healthy", "Young"], + }, + { + collectorName: "Emily Davis", + gpsCoords: [35.270783, -120.674544], + dateCollected: new Date("2025-01-28"), + dbh: 25.6, + canopyBreadth: 15.7, + species: "Platanus racemosa", + treeCond: ["Healthy", "Old Growth"], + }, +]; diff --git a/src/styles/map.module.css b/src/styles/map.module.css new file mode 100644 index 0000000..51f8ebe --- /dev/null +++ b/src/styles/map.module.css @@ -0,0 +1,7 @@ +.MapContainer { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + height: 100vh; +} From eb420c49ce344748ea20ecca78856e2d4edbb172 Mon Sep 17 00:00:00 2001 From: Victor Date: Mon, 27 Jan 2025 19:55:34 -0800 Subject: [PATCH 3/7] feat(map): removed react-leaflet from packages --- package-lock.json | 32 +++----------------------------- package.json | 3 +-- 2 files changed, 4 insertions(+), 31 deletions(-) diff --git a/package-lock.json b/package-lock.json index 03d46e3..e992444 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,8 +16,7 @@ "mongoose": "^8", "next": "^14.2.23", "react": "^18", - "react-dom": "^18", - "react-leaflet": "^5.0.0" + "react-dom": "^18" }, "devDependencies": { "@types/leaflet": "^1.9.16", @@ -873,17 +872,6 @@ "url": "https://opencollective.com/popperjs" } }, - "node_modules/@react-leaflet/core": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-3.0.0.tgz", - "integrity": "sha512-3EWmekh4Nz+pGcr+xjf0KNyYfC3U2JjnkWsh0zcqaexYqmmB5ZhH37kz41JXGmKzpaMZCnPofBBm64i+YrEvGQ==", - "license": "Hippocratic-2.1", - "peerDependencies": { - "leaflet": "^1.9.0", - "react": "^19.0.0", - "react-dom": "^19.0.0" - } - }, "node_modules/@rtsao/scc": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz", @@ -963,14 +951,14 @@ "version": "15.7.14", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz", "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==", - "dev": true, + "devOptional": true, "license": "MIT" }, "node_modules/@types/react": { "version": "18.3.18", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.18.tgz", "integrity": "sha512-t4yC+vtgnkYjNSKlFx1jkAhH8LgTo2N/7Qvi83kdEaUtMDiwpbLAktKDaAMlRcJ5eSxZkH74eEGt1ky31d7kfQ==", - "dev": true, + "devOptional": true, "license": "MIT", "dependencies": { "@types/prop-types": "*", @@ -5385,20 +5373,6 @@ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", "license": "MIT" }, - "node_modules/react-leaflet": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-5.0.0.tgz", - "integrity": "sha512-CWbTpr5vcHw5bt9i4zSlPEVQdTVcML390TjeDG0cK59z1ylexpqC6M1PJFjV8jD7CF+ACBFsLIDs6DRMoLEofw==", - "license": "Hippocratic-2.1", - "dependencies": { - "@react-leaflet/core": "^3.0.0" - }, - "peerDependencies": { - "leaflet": "^1.9.0", - "react": "^19.0.0", - "react-dom": "^19.0.0" - } - }, "node_modules/react-remove-scroll": { "version": "2.6.2", "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.2.tgz", diff --git a/package.json b/package.json index c97b145..e5cb19d 100644 --- a/package.json +++ b/package.json @@ -21,8 +21,7 @@ "mongoose": "^8", "next": "^14.2.23", "react": "^18", - "react-dom": "^18", - "react-leaflet": "^5.0.0" + "react-dom": "^18" }, "devDependencies": { "@types/leaflet": "^1.9.16", From e881a5044fed277f2da85893f5e25e20f06db46d Mon Sep 17 00:00:00 2001 From: Victor Date: Mon, 27 Jan 2025 21:48:33 -0800 Subject: [PATCH 4/7] fix(map): fixed ssr rendering issue --- .github/ISSUE_TEMPLATE/new-issue.md | 8 ++++---- .github/workflows/ci.yml | 2 +- README.md | 2 +- next.config.js | 4 ++-- prettier.config.js | 1 - src/app/map/page.tsx | 23 ++++++++++------------- 6 files changed, 18 insertions(+), 22 deletions(-) diff --git a/.github/ISSUE_TEMPLATE/new-issue.md b/.github/ISSUE_TEMPLATE/new-issue.md index 6dc29db..7bd092e 100644 --- a/.github/ISSUE_TEMPLATE/new-issue.md +++ b/.github/ISSUE_TEMPLATE/new-issue.md @@ -1,10 +1,9 @@ --- name: New Issue about: Create a new issue -title: '' -labels: '' -assignees: '' - +title: "" +labels: "" +assignees: "" --- **Description** @@ -14,6 +13,7 @@ A clear and concise description of what the problem is. Ex. I'm always frustrate A clear and concise description of what you want to happen. Steps: + - step 1 - step 2 diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index c932ac1..0afb38c 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -43,6 +43,6 @@ jobs: # - Settings -> Secrets and variables -> New repository secret MONGO_URI: ${{ secrets.MONGO_URI }} # Add additional environment variables here - + - name: Run tests run: npm test diff --git a/README.md b/README.md index e1c398a..6f59d4f 100644 --- a/README.md +++ b/README.md @@ -10,6 +10,7 @@ A data collection platform for tree information and location - [Getting Started And Contributing](#getting-started-and-contributing) ## Overview + The Central Coast Heritage Tree Foundation focuses on the protection, preservation, and preventive healthcare for legacy and heritage oaks in the greater Templeton area. They help heritage oaks by utilizing preventive tree care, restoring soil, planting Templeton acorns, and educating the community through conversation and connection. ### Purpose @@ -37,7 +38,6 @@ The Central Coast Heritage Tree Foundation team consists of 14 Cal Poly students - [Brandon Eng](https://www.linkedin.com/) - Software Developer - [Thomas Le](https://www.linkedin.com/) - Software Developer - ## Getting Started And Contributing Visit [getting-started.md](docs/getting-started.md) on info for how to set up this repo. diff --git a/next.config.js b/next.config.js index 767719f..658404a 100644 --- a/next.config.js +++ b/next.config.js @@ -1,4 +1,4 @@ /** @type {import('next').NextConfig} */ -const nextConfig = {} +const nextConfig = {}; -module.exports = nextConfig +module.exports = nextConfig; diff --git a/prettier.config.js b/prettier.config.js index 62f02d6..1c498fe 100644 --- a/prettier.config.js +++ b/prettier.config.js @@ -1,5 +1,4 @@ module.exports = { // wider line length for better TSX readability printWidth: 120, - endOfLine: "lf", }; diff --git a/src/app/map/page.tsx b/src/app/map/page.tsx index 3e32f69..b7735be 100644 --- a/src/app/map/page.tsx +++ b/src/app/map/page.tsx @@ -1,32 +1,29 @@ "use client"; import { useRef, useEffect } from "react"; -import L from "leaflet"; -import "leaflet/dist/leaflet.css"; -import "leaflet/dist/images/marker-icon.png"; -import "leaflet/dist/images/marker-shadow.png"; import { Tree, treeData } from "./tree_data"; import styles from "@/styles/map.module.css"; - +import dynamic from "next/dynamic"; +//import leaflet in client +const L = dynamic(() => import("leaflet") as any, { + ssr: false, +}); export default function Map() { - const mapRef = useRef(null); + const mapRef = useRef(null); useEffect(() => { - //use the default icon for marker + require("leaflet/dist/leaflet.css"); + const L = require("leaflet"); const DefaultIcon = L.icon({ iconUrl: "https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon.png", shadowUrl: "https://unpkg.com/leaflet@1.7.1/dist/images/marker-shadow.png", }); L.Marker.prototype.options.icon = DefaultIcon; - //initilize the map if (!mapRef.current) { mapRef.current = L.map("map").setView([35.270378, -120.680656], 14.5); L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(mapRef.current); - } - - //add marker to map - if (mapRef.current) { + //add marker to map treeData.map((tree: Tree) => { - const marker = L.marker([tree.gpsCoords[0], tree.gpsCoords[1]]).addTo(mapRef.current!); + const marker = L.marker([tree.gpsCoords[0], tree.gpsCoords[1]]).addTo(mapRef.current); marker.bindPopup(` ${tree.species}
Collected by: ${tree.collectorName}
From f131332c3ce21c4171f3657068fd2f4f1bb34900 Mon Sep 17 00:00:00 2001 From: Mio Date: Wed, 29 Jan 2025 23:35:30 -0800 Subject: [PATCH 5/7] feat: added table that shows existing trees --- src/app/treeTable/page.tsx | 90 +++++++++++++++++++++++++++++++++++++- 1 file changed, 89 insertions(+), 1 deletion(-) diff --git a/src/app/treeTable/page.tsx b/src/app/treeTable/page.tsx index e5989ca..3bee7fd 100644 --- a/src/app/treeTable/page.tsx +++ b/src/app/treeTable/page.tsx @@ -1,3 +1,91 @@ +import { Table, Thead, Tbody, Tr, Th, Td, TableContainer, Box } from "@chakra-ui/react"; + export default function TreeTable() { - return
Will probably be made into a component later, but for now develop on /treeTable
; + const treeData = [ + { + collectorName: "Sydney Jones", + dateCollected: "2025-01-22", + contactInfo: "sjones@email.com", + gpsCoordinates: "34.0522, -118.2437", + photo: "tree1.jpg", + dbh: "15.3", + height: "25 ft", + canopyBreath: "20 ft", + species: "Valley Oak", + mistletoe: false, + epicormicGrowth: true, + deadWood: true, + oakPitScale: false, + hangingItems: false, + additionalNotes: "Tree appears healthy overall.", + }, + { + collectorName: "Ryan Smith", + dateCollected: "2025-01-20", + contactInfo: "rsmith@example.com", + gpsCoordinates: "37.7749, -122.4194", + photo: "tree2.jpg", + dbh: "20.1", + height: "30 ft", + canopyBreath: "25 ft", + species: "Blue Oak", + mistletoe: true, + epicormicGrowth: false, + deadWood: false, + oakPitScale: true, + hangingItems: false, + additionalNotes: "Signs of stress due to drought.", + }, + ]; + + return ( +
+ + + + + + + + + + + + + + + + + + + + + + + {treeData.map((tree, index) => ( + + + + + + + + + + + + + + + + + ))} + +
Collector NameDate CollectedGPS CoordinatesPhotoDBH (inches)HeightTree Canopy BreadthSpeciesMistletoeEpicormic GrowthDead WoodOak Pit ScaleHanging ItemsAdditional Notes
{tree.collectorName}{tree.dateCollected}{tree.gpsCoordinates} + Tree + {tree.dbh}{tree.height}{tree.canopyBreath}{tree.species}{tree.mistletoe ? "Yes" : "No"}{tree.epicormicGrowth ? "Yes" : "No"}{tree.deadWood ? "Yes" : "No"}{tree.oakPitScale ? "Yes" : "No"}{tree.hangingItems ? "Yes" : "No"}{tree.additionalNotes}
+ + +
+ ); } From 8d8038ad176b68e7db2604c1ecc3dd62c52e5116 Mon Sep 17 00:00:00 2001 From: Mio Date: Wed, 29 Jan 2025 23:45:53 -0800 Subject: [PATCH 6/7] fix: makes sure that "Yes" only appears when true is inputted --- src/app/treeTable/page.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/app/treeTable/page.tsx b/src/app/treeTable/page.tsx index 3bee7fd..6f92f83 100644 --- a/src/app/treeTable/page.tsx +++ b/src/app/treeTable/page.tsx @@ -15,7 +15,7 @@ export default function TreeTable() { mistletoe: false, epicormicGrowth: true, deadWood: true, - oakPitScale: false, + oakPitScale: "no", hangingItems: false, additionalNotes: "Tree appears healthy overall.", }, @@ -74,11 +74,11 @@ export default function TreeTable() { {tree.height} {tree.canopyBreath} {tree.species} - {tree.mistletoe ? "Yes" : "No"} - {tree.epicormicGrowth ? "Yes" : "No"} - {tree.deadWood ? "Yes" : "No"} - {tree.oakPitScale ? "Yes" : "No"} - {tree.hangingItems ? "Yes" : "No"} + {tree.mistletoe === true ? "Yes" : "No"} + {tree.epicormicGrowth === true ? "Yes" : "No"} + {tree.deadWood === true ? "Yes" : "No"} + {tree.oakPitScale === true ? "Yes" : "No"} + {tree.hangingItems === true ? "Yes" : "No"} {tree.additionalNotes} ))} From 5137d9341a3336e5c6d334718a407285e46f4ea4 Mon Sep 17 00:00:00 2001 From: Mio Date: Wed, 29 Jan 2025 23:47:51 -0800 Subject: [PATCH 7/7] style: added more comments --- src/app/treeTable/page.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/app/treeTable/page.tsx b/src/app/treeTable/page.tsx index 6f92f83..9573b00 100644 --- a/src/app/treeTable/page.tsx +++ b/src/app/treeTable/page.tsx @@ -1,6 +1,7 @@ import { Table, Thead, Tbody, Tr, Th, Td, TableContainer, Box } from "@chakra-ui/react"; export default function TreeTable() { + // dummy tree data const treeData = [ { collectorName: "Sydney Jones", @@ -38,6 +39,7 @@ export default function TreeTable() { }, ]; + // tree table structure return (