add Facilities markers

.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "zooproject-taipei"
+  }
+}

firebase.json

@@ -0,0 +1,6 @@
+{
+  "firestore": {
+    "rules": "firestore.rules",
+    "indexes": "firestore.indexes.json"
+  }
+}

firestore.indexes.json

@@ -0,0 +1,4 @@
+{
+  "indexes": [],
+  "fieldOverrides": []
+}

firestore.rules

@@ -0,0 +1,9 @@
+rules_version = '2';
+service cloud.firestore {
+  match /databases/{database}/documents {
+    match /{document=**} {
+      allow read, write: if
+          request.time < timestamp.date(2021, 6, 12);
+    }
+  }
+}

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.12.0",
     "@testing-library/react": "^11.2.6",
     "@testing-library/user-event": "^12.8.3",
+    "firebase": "^8.6.1",
     "leaflet": "^1.7.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

public/manifest.json

@@ -4,7 +4,7 @@
   "icons": [
     {
       "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
+      "sizes": "64x64 32x32,24x24 16x16",
       "type": "image/x-icon"
     },
     {

src/App.js

@@ -1,9 +1,20 @@
 import React from "react";
-import Map from "./Pages/map/map.js";
+import Map from "./Pages/Map/Map.js";
 
 function App() {
   return (
-    <div className="App">
+    <div className="App" style={{ display: "flex", flexDirection: "row" }}>
+      <div
+        style={{
+          width: "40vw",
+          height: "100vh",
+          position: "absolute",
+          top: 0,
+          left: 0,
+        }}
+      >
+        maybe a click button?
+      </div>
       <Map />
     </div>
   );

src/Pages/map/Markers/FacilitiesMarkers.js

@@ -0,0 +1,37 @@
+import React, { useState, useEffect } from "react";
+import { Marker, Popup } from "react-leaflet";
+import L from "leaflet";
+import { firebaseGetData } from "../../../Utils/Firebase.js";
+import svg from "../../../Icons/like-02.svg";
+
+function FacilitiesMarkers() {
+  const [facilities, setfacilities] = useState([]);
+  useEffect(() => {
+    firebaseGetData("Facilities").then((data) => {
+      setfacilities(data);
+    });
+  }, []);
+
+  if (!facilities.length) {
+    return null;
+  } else if (facilities.length) {
+    console.log(facilities);
+    return facilities.map((item, index) => (
+      <Marker
+        key={`fac${item.Index}`}
+        position={[item.Geo[1], item.Geo[0]]}
+        icon={
+          new L.Icon({
+            iconUrl: svg,
+            iconSize: [5, 5],
+            iconAnchor: [2.5, 2.5],
+          })
+        }
+      >
+        <Popup>{`${item.Title}+${item.Index}`}</Popup>
+      </Marker>
+    ));
+  }
+}
+
+export default FacilitiesMarkers;

src/Pages/map/Markers/PavilionsMarker.js

@@ -0,0 +1,33 @@
+import React, { useState, useEffect } from "react";
+import { Marker } from "react-leaflet";
+import L from "leaflet";
+import { firebaseAddData, firebaseGetData } from "../../../Utils/Firebase.js";
+
+function PavilionsMarkers() {
+  const [pavilions, setPavilions] = useState([]);
+  useEffect(() => {
+    firebaseGetData("Pavilion").then((data) => {
+      setPavilions(data);
+    });
+  }, []);
+
+  if (!pavilions.length) {
+    return null;
+  } else if (pavilions.length) {
+    return pavilions.map((item, index) => (
+      <Marker
+        key={index}
+        position={item.Geo}
+        icon={
+          new L.Icon({
+            iconUrl: require(`../../../Icons/${item.Name}.svg`).default,
+            iconSize: [150, 90],
+            iconAnchor: [75, 45],
+          })
+        }
+      ></Marker>
+    ));
+  }
+}
+
+export default PavilionsMarkers;

src/Pages/map/map.js

@@ -1,36 +1,47 @@
-import React, { useState, useEffect } from "react";
-import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
+import React, { useState, useEffect, useMemo } from "react";
+import {
+  MapContainer,
+  TileLayer,
+  Marker,
+  Popup,
+  useMapEvents,
+} from "react-leaflet";
 import L from "leaflet";
-import Markers from "./markers.js";
-import svg from "../../icons/like-02.svg";
+import { Markers } from "./Markers.js";
 
 const setBounds = [
-  [25.002, 121.572],
-  [24.989, 121.597],
+  [25.000263, 121.57700905],
+  [24.99028, 121.5936458],
 ];
 
-const position = [24.996, 121.585];
+const position = [24.996554, 121.583322];
 
-function Map() {
-  const [markers, setMarkers] = useState([]);
-
-  function addMarker(e) {
-    // const newMarker = markers;
-    // newMarker.push(e.latlng);
-    // setMarkers.setState(newMarker);
-    console.log(e.latlng);
-  }
+function ClickEvent() {
+  useMapEvents({
+    click: (e) => {
+      console.log(e.latlng);
+    },
+  });
+  return null;
+}
 
+function Map() {
   return (
     <MapContainer
       center={position}
-      zoom={16.7}
-      minZoom={16.7}
+      zoom={16}
+      minZoom={16.5}
       maxBounds={setBounds}
       scrollWheelZoom={true}
-      style={{ height: "100vh", width: "100vw" }}
-      onClick={addMarker}
+      style={{
+        position: "absolute",
+        top: 0,
+        right: 0,
+        height: "100vh",
+        width: "60vw",
+      }}
     >
+      <ClickEvent />
       <TileLayer
         attribution='&copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> , Imagery &copy; <a href="https://www.mapbox.com/">Mapbox</a>'
         url="https://api.mapbox.com/styles/v1/aurorahuang/ckol9o1wg11vf19n1nl0o5x2m/tiles/256/{z}/{x}/{y}@2x?access_token=pk.eyJ1IjoiYXVyb3JhaHVhbmciLCJhIjoiY2tva3ZmeXVnMDlhMjJ4cm12enM1OXhycCJ9.kyUwDjf4VLFBZPZrN2nijQ"

src/Pages/map/markers.js

@@ -1,18 +1,20 @@
 import React, { useState, useEffect } from "react";
-import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
-import L from "leaflet";
-import svg from "../../icons/like-02.svg";
-
-const position = [24.996, 121.585];
+import PavilionsMarkers from "./Markers/PavilionsMarker.js";
+import FacilitiesMarkers from "./Markers/FacilitiesMarkers.js";
+import {
+  firebaseAddData,
+  firebaseGetData,
+  firebaseAddFacilities,
+} from "../../Utils/Firebase.js";
+import facility from "../../Utils/facilities.json";
 
 function Markers() {
-  const iconPerson = new L.Icon({
-    iconUrl: svg,
-    iconSize: [15, 15],
-    iconAnchor: [7.5, 7.5],
-  });
-
-  return <Marker key={5} position={position} icon={iconPerson}></Marker>;
+  return (
+    <>
+      <PavilionsMarkers />
+      <FacilitiesMarkers />
+    </>
+  );
 }
 
-export default Markers;
+export { Markers };

src/Utils/Firebase.js

@@ -0,0 +1,106 @@
+import firebase from "firebase";
+
+const firebaseConfig = {
+  apiKey: "AIzaSyCI3Hmv_gjjmFzRO-t0BngdDIKCcaSlyeM",
+  authDomain: "zooproject-taipei.firebaseapp.com",
+  projectId: "zooproject-taipei",
+  storageBucket: "zooproject-taipei.appspot.com",
+  messagingSenderId: "96578304850",
+  appId: "1:96578304850:web:6f511770927ca18279588b",
+  measurementId: "G-6SSVE3J0KN",
+};
+firebase.initializeApp(firebaseConfig);
+var db = firebase.firestore();
+
+const firebaseAddAnimals = (data) => {
+  data.forEach((item) => {
+    db.collection("Animals")
+      .doc(item.Name_Ch)
+      .set({
+        AlsoKnow: item.AlsoKnown,
+        Behavior: item.Behavior,
+        Class: item.Class,
+        Code: item.Code,
+        Conservation: item.Conservation,
+        Crisis: item.Crisis,
+        Diet: item.Diet,
+        Distribution: item.Distribution,
+        Family: item.Family,
+        Feature: item.Feature,
+        Geo: item.Geo,
+        Habitat: item.Habitat,
+        Location: item.Location,
+        Name_Ch: item.Name_Ch,
+        Name_En: item.Name_En,
+        Order: item.Order,
+        Phylum: item.Phylum,
+        PicURL: item.Pic01_URL,
+      })
+      .then(() => {
+        console.log("ok");
+      })
+      .catch((error) => {
+        console.error("Error writing document: ", error);
+      });
+  });
+};
+
+const firebaseAddFacilities = (data) => {
+  data.forEach((item, index) => {
+    db.collection("Facilities")
+      .doc()
+      .set({
+        Index: index,
+        Brief: item.Brief,
+        Keywords: item.Keywords,
+        Geo: item.Geo,
+        Category: item.Category,
+        Item: item.Item,
+        Meal: item.Meal,
+        Memo: item.Memo,
+        Pic01_ALT: item.Pic01_ALT,
+        Shop: item.Shop,
+        Summary: item.Summary,
+        Title: item.Title,
+      })
+      .then(() => {
+        console.log("OK");
+      });
+  });
+};
+
+const firebaseAddData = () => {
+  db.collection("city")
+    .doc("LA")
+    .set({
+      name: "Los Angeles",
+      state: "CA",
+      country: "USA",
+    })
+    .then(() => {
+      console.log("Document successfully written!");
+    })
+    .catch((error) => {
+      console.error("Error writing document: ", error);
+    });
+};
+
+const firebaseGetData = (collection) => {
+  return db
+    .collection(collection)
+    .get()
+    .then((querySnapshot) => {
+      let firebaseData = [];
+      querySnapshot.forEach((doc) => {
+        firebaseData.push(doc.data());
+      });
+      return firebaseData;
+    });
+};
+
+export {
+  firebaseAddData,
+  firebaseGetData,
+  firebaseAddFacilities,
+  firebaseAddAnimals,
+};