Merge pull request #13 from hack4impact-calpoly/1-create-map-leaflet

1 create map leaflet

.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}

.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
 

.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

.gitignore

@@ -33,3 +33,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+prettier.config.js

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.

next.config.js

@@ -1,4 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {};
 
-module.exports = nextConfig
+module.exports = nextConfig;

package.json

@@ -17,12 +17,14 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "framer-motion": "^11.18.0",
+    "leaflet": "^1.9.4",
     "mongoose": "^8",
     "next": "^15.1.6",
     "react": "^18",
     "react-dom": "^18"
   },
   "devDependencies": {
+    "@types/leaflet": "^1.9.16",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",

src/app/map/page.tsx

@@ -1,3 +1,45 @@
+"use client";
+import { useRef, useEffect } from "react";
+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() {
-  return <div>Will probably be made into a component later and not a page, but go to /map to develop!</div>;
+  const mapRef = useRef(null);
+  useEffect(() => {
+    require("leaflet/dist/leaflet.css");
+    const L = require("leaflet");
+    const DefaultIcon = L.icon({
+      iconUrl: "https://unpkg.com/[email protected]/dist/images/marker-icon.png",
+      shadowUrl: "https://unpkg.com/[email protected]/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
+      treeData.map((tree: Tree) => {
+        const marker = L.marker([tree.gpsCoords[0], tree.gpsCoords[1]]).addTo(mapRef.current);
+        marker.bindPopup(`
+          <strong>${tree.species}</strong><br/>
+          Collected by: ${tree.collectorName}<br/>
+          Date Collected: ${tree.dateCollected.toISOString().split("T")[0]}<br/>
+          Notes: ${tree.notes || "No additional notes"}
+        `);
+      });
+    }
+  }, []);
+
+  return (
+    <div>
+      <div className={styles.MapContainer}>
+        Map with 5 points
+        <div id="map" style={{ height: "50vh", width: "75%" }}></div>
+      </div>
+    </div>
+  );
 }

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"],
+  },
+];

src/styles/map.module.css

@@ -0,0 +1,7 @@
+.MapContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  height: 100vh;
+}