changes for michael's review ofri

googleinterns · Aug 31, 2020 · 076aa37 · 076aa37
1 parent 23ea69b
commit 076aa37
Show file tree

Hide file tree

Showing 7 changed files with 314 additions and 442 deletions.
diff --git a/examples/maps_heatmaps/firebase_config.ts b/examples/maps_heatmaps/firebase_config.ts
diff --git a/examples/maps_heatmaps/public/style.css b/examples/maps_heatmaps/public/style.css
@@ -1,63 +1,6 @@
 /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
-
-      #sidebar-wrapper {
-        height: 100%;
-        width: 20%;
-        position: fixed;
-        z-index: 1;
-        top: 0;
-        left: 0;
-        background-color: #eee;
-        overflow-x: hidden;
-        padding-top: 20px;
-      }
-      .autocomplete {
-  /*the container must be positioned relative:*/
-  position: relative;
-  display: inline-block;
-}
-input {
-  border: 1px solid transparent;
-  background-color: #f1f1f1;
-  padding: 10px;
-  font-size: 16px;
-}
-input[type=text] {
-  background-color: #f1f1f1;
-  width: 100%;
-}
-input[type=submit] {
-  background-color: DodgerBlue;
-  color: #fff;
-}
-.autocomplete-items {
-  position: absolute;
-  border: 1px solid #d4d4d4;
-  border-bottom: none;
-  border-top: none;
-  z-index: 99;
-  /*position the autocomplete items to be the same width as the container:*/
-  top: 100%;
-  left: 0;
-  right: 0;
-}
-.autocomplete-items div {
-  padding: 10px;
-  cursor: pointer;
-  background-color: #fff;
-  border-bottom: 1px solid #d4d4d4;
-}
-.autocomplete-items div:hover {
-  /*when hovering an item:*/
-  background-color: #e9e9e9;
-}
-.autocomplete-active {
-  /*when navigating through the items using the arrow keys:*/
-  background-color: DodgerBlue !important;
-  color: #ffffff;
-}
-
+
        #map {
         position: absolute;
         width: 100%;

diff --git a/examples/maps_heatmaps/src/index.ts b/examples/maps_heatmaps/src/index.ts
@@ -40,8 +40,8 @@ function initMap(): void {
     },
   });
 
-  // TODO shows how to connect to firestore and read data from there
-  const images = database.collection("test");
+  // TODO: decide where to set default center
+  const images = database.collection("images");
   images.get().then((querySnapshot) => {
     if (!querySnapshot.empty) {
       const image = querySnapshot.docs[0].data();
@@ -58,6 +58,7 @@ function initMap(): void {
   });
   map.addListener("center_changed", () => mapChanged());
   map.addListener("zoom_changed", () => mapChanged());
+  //TODO: labels, year and month should be as the client requested, not fixed values
   function mapChanged() {
     const center: google.maps.LatLng = map.getCenter();
     const lat = center.lat();
@@ -70,31 +71,31 @@ function initMap(): void {
     );
     queryDB.getPointsFromDB(heatmap, quiredCollection);
   }
+  //TODO: check what should be the default radius value
   function getRadius() {
     const bounds = map.getBounds();
     if (bounds) {
+      const r = 3963.0; //radius of the earth in miles
       const center = bounds.getCenter();
-      const ne = bounds.getNorthEast();
-
-      // r = radius of the earth in statute miles
-      const r = 3963.0;
-
-      // Convert lat or lng from decimal degrees into radians (divide by 57.2958)
-      const lat1 = center.lat() / 57.2958;
-      const lon1 = center.lng() / 57.2958;
-      const lat2 = ne.lat() / 57.2958;
-      const lon2 = ne.lng() / 57.2958;
-
-      // distance = circle radius from center to Northeast corner of bounds
+      const Northeast = bounds.getNorthEast();
+      const centerLat = toRadian(center.lat());
+      const centerLng = toRadian(center.lng());
+      const NortheastLat = toRadian(Northeast.lat());
+      const NortheastLng = toRadian(Northeast.lng());
       const dis =
         r *
         Math.acos(
-          Math.sin(lat1) * Math.sin(lat2) +
-            Math.cos(lat1) * Math.cos(lat2) * Math.cos(lon2 - lon1)
+          Math.sin(centerLat) * Math.sin(NortheastLat) +
+            Math.cos(centerLat) *
+              Math.cos(NortheastLat) *
+              Math.cos(NortheastLng - centerLng)
         );
       return dis;
     }
-    return 2; //check what to make default
+    return 2;
+  }
+  function toRadian(decDeg: number) {
+    return decDeg / 57.2958;
   }
 }
 

diff --git a/examples/maps_heatmaps/src/queryDB.ts b/examples/maps_heatmaps/src/queryDB.ts
@@ -29,11 +29,10 @@ function getQuiredCollection(
 
 /* displays the relevant images on the map
 given the filtered collection and the heapmap*/
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 function getPointsFromDB(
   heatmap: google.maps.visualization.HeatmapLayer,
   dataRef: geofirestore.GeoQuery
-) {
+): void {
   const allPoints: Array<google.maps.LatLng> = [];
   dataRef.get().then((querySnapshot) => {
     querySnapshot.forEach((doc) => {
@@ -51,54 +50,4 @@ function getLatLon(coordinates: firebase.firestore.GeoPoint) {
   return new google.maps.LatLng(lat, lng);
 }
 
-function getGeoPointsFromDB() {
-  const GeoFirestore = geofirestore.initializeApp(database);
-  const geocollection = GeoFirestore.collection("images");
-  geocollection
-    .where("year", "==", 1999)
-    .get()
-    .then((value) => console.log(value.docs));
-  geocollection.get().then((value) => console.log(value.docs));
-  // Query using GeoPoint
-  const center = new firebase.firestore.GeoPoint(37.77687, -122.438239);
-  geocollection
-    .near({
-      center: center,
-      radius: 10000,
-    })
-    .get()
-    .then((value) => console.log(value.docs));
-  getGeoPointsNearBy(37.77687, -122.438239, 1000);
-}
-
-/**Query by distance- has a problem */
-function getGeoPointsNearBy(
-  latitude: number,
-  longitude: number,
-  distance: number
-) {
-  // ~1 mile of lat and lon in degrees
-  const lat = 0.0144927536231884;
-  const lon = 0.0181818181818182;
-  const lowerLat = latitude - lat * distance;
-  const lowerLon = longitude - lon * distance;
-
-  const greaterLat = latitude + lat * distance;
-  const greaterLon = longitude + lon * distance;
-
-  const lesserGeopoint = new firebase.firestore.GeoPoint(lowerLat, lowerLon);
-  const greaterGeopoint = new firebase.firestore.GeoPoint(
-    greaterLat,
-    greaterLon
-  );
-
-  database
-    .collection("images")
-    .where("location", ">=", lesserGeopoint)
-    .where("location", "<=", greaterGeopoint)
-    .get()
-    .then((value) => console.log(value.docs));
-  //return dataRef;
-}
-
-export { getPointsFromDB, getGeoPointsFromDB, getQuiredCollection };
+export { getPointsFromDB, getQuiredCollection };
diff --git a/examples/maps_heatmaps/static/index.html b/examples/maps_heatmaps/static/index.html
@@ -12,19 +12,6 @@
     <script src="./app.js"></script>
   </head>
   <body>
-      <div id="sidebar-wrapper">
-        <form autocomplete="off" action="submit()">
-          <div class="autocomplete" style="width:300px;">
-            <input id="myInput" type="text" name="labels" placeholder="labels">
-          </div><br><br>
-        <label for="year">Year:</label>
-        <input type="number" id="year" name="year" min="1990" max="2020"><br><br>
-        <label for="month">Month:</label>
-        <input type="number" id="month" name="month" min="1" max="12"><br><br>
-        <input type="submit" value="Submit" onclick="submit()">
-        <input type="reset" value="Reset" onclick="reset()"> 
-      </div>
-    </form>
       <div id="map"></div>
   </body>
 </html>