From a79a20bf85f887c6d52b394ad758a386d141c8a0 Mon Sep 17 00:00:00 2001
From: Claire Y <the.claire.yang@gmail.com>
Date: Thu, 11 Jun 2020 21:22:26 +0000
Subject: [PATCH 1/5] markers now show up on the page, one per city

---
 .../google/sps/servlets/MarkerServlet.java    | 31 +++++++++++++------
 portfolio/src/main/webapp/map.html            |  2 +-
 portfolio/src/main/webapp/map.js              | 14 +++++++--
 3 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/portfolio/src/main/java/com/google/sps/servlets/MarkerServlet.java b/portfolio/src/main/java/com/google/sps/servlets/MarkerServlet.java
index 02cbd11..5880507 100644
--- a/portfolio/src/main/java/com/google/sps/servlets/MarkerServlet.java
+++ b/portfolio/src/main/java/com/google/sps/servlets/MarkerServlet.java
@@ -14,6 +14,12 @@
 
 package com.google.sps.servlets;
 
+import com.google.gson.Gson;
+import com.google.appengine.api.datastore.DatastoreService;
+import com.google.appengine.api.datastore.DatastoreServiceFactory;
+import com.google.appengine.api.datastore.Entity;
+import com.google.appengine.api.datastore.PreparedQuery;
+import com.google.appengine.api.datastore.Query;
 import com.google.appengine.api.users.UserService;
 import com.google.appengine.api.users.UserServiceFactory;
 import java.io.IOException;
@@ -21,12 +27,8 @@
 import javax.servlet.http.HttpServlet;
 import javax.servlet.http.HttpServletRequest;
 import javax.servlet.http.HttpServletResponse;
-import com.google.gson.Gson;
-import com.google.appengine.api.datastore.DatastoreService;
-import com.google.appengine.api.datastore.DatastoreServiceFactory;
-import com.google.appengine.api.datastore.Entity;
-import com.google.appengine.api.datastore.PreparedQuery;
-import com.google.appengine.api.datastore.Query;
+import java.util.ArrayList;
+import java.util.List;
 
 
 @WebServlet("/markers")
@@ -37,12 +39,10 @@ private static class Marker {
 
     private final double lat;
     private final double lng;
-    private final String content;
 
-    public Marker(double lat, double lng, String content) {
+    public Marker(double lat, double lng) {
       this.lat = lat;
       this.lng = lng;
-      this.content = content;
     }
   }
   private DatastoreService datastore;
@@ -54,6 +54,19 @@ public void init() {
   
   @Override
   public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
+    PreparedQuery results = datastore.prepare(new Query("Marker"));
+    
+    List<Marker> markers = new ArrayList<>();
+    for (Entity entity : results.asIterable()) {
+      System.out.println((String) entity.getProperty("lat"));
+      double lat = Double.parseDouble((String) entity.getProperty("lat"));
+      double lng = Double.parseDouble((String) entity.getProperty("lng"));
+
+      Marker marker = new Marker(lat, lng);
+      markers.add(marker);
+    }
+    response.setContentType("application/json");
+    response.getWriter().println(new Gson().toJson(markers));
   }
   
   @Override
diff --git a/portfolio/src/main/webapp/map.html b/portfolio/src/main/webapp/map.html
index 530e064..d7f96b0 100644
--- a/portfolio/src/main/webapp/map.html
+++ b/portfolio/src/main/webapp/map.html
@@ -33,7 +33,7 @@
       <h1>Where this Site's Visitors Are From</h1>
       <div id="map"></div>
       <br><br>
-      <form id="address-form">
+      <form id="address-form" action="/markers" method="POST">
         <h3 class="header"> Where are you from? </h3>
         <div class="form-group">
           <label for="city-input">City / Town</label>
diff --git a/portfolio/src/main/webapp/map.js b/portfolio/src/main/webapp/map.js
index e467ce0..62281ea 100644
--- a/portfolio/src/main/webapp/map.js
+++ b/portfolio/src/main/webapp/map.js
@@ -12,10 +12,12 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-const API_KEY = "AIzaSyAxYeZWtbYyULIb5s59BaENaSpZD2Qr3RA";
+const API_KEY = "AIzaSyDOLA6fsSWwR-ONnnzTR0FnjxWhXc33wJw";
+let map;
 
 function loadPage() {
   createMap();
+  renderMarkers();
   renderAddressForm();
 }
 
@@ -46,10 +48,18 @@ function renderAddressForm() {
   });
 }
 
+function renderMarkers() {
+  fetch('/markers').then(response => response.json()).then((markers) => {
+    markers.forEach((marker) => {
+      const marker = new google.maps.Marker({position: {lat: marker.lat, lng: marker.lng}, map: map});
+    });
+  });
+}
+
 /** Creates a map in Aubergine style and adds it to the page. */
 function createMap() {
   const USCenterX = 38.5, USCenterY = -98;
-  const map = new google.maps.Map(
+  map = new google.maps.Map(
     document.getElementById('map'), {
       center: {lat: USCenterX, lng: USCenterY}, 
       zoom: 3,

From 83538b66d73ec073664a75b9fa642d48aeed6599 Mon Sep 17 00:00:00 2001
From: Claire Y <the.claire.yang@gmail.com>
Date: Thu, 11 Jun 2020 21:51:22 +0000
Subject: [PATCH 2/5] address is validated by checking existence of coordinates

---
 .../main/java/com/google/sps/servlets/MarkerServlet.java   | 7 +++++++
 portfolio/src/main/webapp/map.html                         | 2 +-
 portfolio/src/main/webapp/map.js                           | 3 ++-
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/portfolio/src/main/java/com/google/sps/servlets/MarkerServlet.java b/portfolio/src/main/java/com/google/sps/servlets/MarkerServlet.java
index 5880507..5970523 100644
--- a/portfolio/src/main/java/com/google/sps/servlets/MarkerServlet.java
+++ b/portfolio/src/main/java/com/google/sps/servlets/MarkerServlet.java
@@ -71,10 +71,17 @@ public void doGet(HttpServletRequest request, HttpServletResponse response) thro
   
   @Override
   public void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException {
+    if (invalid(request.getParameter("lat")) || invalid(request.getParameter("lat"))){
+      return;
+    }
     Entity markerEntity = new Entity("Marker");
     markerEntity.setProperty("lat", request.getParameter("lat"));
     markerEntity.setProperty("lng", request.getParameter("lng"));
     datastore.put(markerEntity);
     response.sendRedirect("/map.html");
   }
+  
+  private static boolean invalid(String coordinate){
+    return coordinate.equals(null) || coordinate.equals("");
+  }
 }
diff --git a/portfolio/src/main/webapp/map.html b/portfolio/src/main/webapp/map.html
index d7f96b0..530e064 100644
--- a/portfolio/src/main/webapp/map.html
+++ b/portfolio/src/main/webapp/map.html
@@ -33,7 +33,7 @@
       <h1>Where this Site's Visitors Are From</h1>
       <div id="map"></div>
       <br><br>
-      <form id="address-form" action="/markers" method="POST">
+      <form id="address-form">
         <h3 class="header"> Where are you from? </h3>
         <div class="form-group">
           <label for="city-input">City / Town</label>
diff --git a/portfolio/src/main/webapp/map.js b/portfolio/src/main/webapp/map.js
index 62281ea..c17b4b0 100644
--- a/portfolio/src/main/webapp/map.js
+++ b/portfolio/src/main/webapp/map.js
@@ -45,13 +45,14 @@ function renderAddressForm() {
       .catch((error) => {
         debugLog('Error:', error);
       });
+      // e.preventDefault();
   });
 }
 
 function renderMarkers() {
   fetch('/markers').then(response => response.json()).then((markers) => {
     markers.forEach((marker) => {
-      const marker = new google.maps.Marker({position: {lat: marker.lat, lng: marker.lng}, map: map});
+      const mark = new google.maps.Marker({position: {lat: marker.lat, lng: marker.lng}, map: map});
     });
   });
 }

From 027bff9a85d94e16ad87b5bb47fd965f95dbb4e0 Mon Sep 17 00:00:00 2001
From: Claire Y <the.claire.yang@gmail.com>
Date: Fri, 12 Jun 2020 13:47:06 +0000
Subject: [PATCH 3/5] critical bug fixes

---
 portfolio/src/main/webapp/map.js | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/portfolio/src/main/webapp/map.js b/portfolio/src/main/webapp/map.js
index c17b4b0..0d824a8 100644
--- a/portfolio/src/main/webapp/map.js
+++ b/portfolio/src/main/webapp/map.js
@@ -18,12 +18,14 @@ let map;
 function loadPage() {
   createMap();
   renderMarkers();
-  renderAddressForm();
+  activateAddressForm();
 }
 
-function renderAddressForm() {
+function activateAddressForm() {
   // On submit, address-form will convert city, state to lat, lng and POST that to datastore
   document.getElementById('address-form').addEventListener('submit', (e) => {
+    // Need to preventDefault() so page doesn't refresh immediately.
+    e.preventDefault();
     const formData = new FormData(e.target);
     const city = formData.get("city").replace(' ', '+');
     const state = formData.get("state").replace(' ', '+');
@@ -35,7 +37,7 @@ function renderAddressForm() {
         const lng = json.results[0].geometry.location.lng;
         debugLog(lat);
         debugLog(lng);
-        return fetch("/markers?lat=" + lat + "&lng=" + lng, {method: 'POST'})
+        return fetch("/markers?lat=" + lat + "&lng=" + lng, {method: 'POST'});
       })
       .then((response) => {
         if (response.redirected) {
@@ -45,14 +47,13 @@ function renderAddressForm() {
       .catch((error) => {
         debugLog('Error:', error);
       });
-      // e.preventDefault();
   });
 }
 
 function renderMarkers() {
   fetch('/markers').then(response => response.json()).then((markers) => {
     markers.forEach((marker) => {
-      const mark = new google.maps.Marker({position: {lat: marker.lat, lng: marker.lng}, map: map});
+      new google.maps.Marker({position: {lat: marker.lat, lng: marker.lng}, map: map});
     });
   });
 }

From cc20f96b06e5be57f97faa8c9d3218d7fe9a7ed5 Mon Sep 17 00:00:00 2001
From: Claire Y <the.claire.yang@gmail.com>
Date: Fri, 12 Jun 2020 14:02:05 +0000
Subject: [PATCH 4/5] formatting tweaks

---
 .../google/sps/servlets/MarkerServlet.java    | 20 ++++---------------
 portfolio/src/main/webapp/map.js              | 10 +++-------
 2 files changed, 7 insertions(+), 23 deletions(-)

diff --git a/portfolio/src/main/java/com/google/sps/servlets/MarkerServlet.java b/portfolio/src/main/java/com/google/sps/servlets/MarkerServlet.java
index 5970523..ee31172 100644
--- a/portfolio/src/main/java/com/google/sps/servlets/MarkerServlet.java
+++ b/portfolio/src/main/java/com/google/sps/servlets/MarkerServlet.java
@@ -54,16 +54,11 @@ public void init() {
   
   @Override
   public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
-    PreparedQuery results = datastore.prepare(new Query("Marker"));
-    
     List<Marker> markers = new ArrayList<>();
-    for (Entity entity : results.asIterable()) {
-      System.out.println((String) entity.getProperty("lat"));
-      double lat = Double.parseDouble((String) entity.getProperty("lat"));
-      double lng = Double.parseDouble((String) entity.getProperty("lng"));
-
-      Marker marker = new Marker(lat, lng);
-      markers.add(marker);
+  
+    for (Entity entity : (datastore.prepare(new Query("Marker")).asIterable())) {
+      markers.add(new Marker(Double.parseDouble((String) entity.getProperty("lat")),
+          Double.parseDouble((String) entity.getProperty("lng"))));
     }
     response.setContentType("application/json");
     response.getWriter().println(new Gson().toJson(markers));
@@ -71,17 +66,10 @@ public void doGet(HttpServletRequest request, HttpServletResponse response) thro
   
   @Override
   public void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException {
-    if (invalid(request.getParameter("lat")) || invalid(request.getParameter("lat"))){
-      return;
-    }
     Entity markerEntity = new Entity("Marker");
     markerEntity.setProperty("lat", request.getParameter("lat"));
     markerEntity.setProperty("lng", request.getParameter("lng"));
     datastore.put(markerEntity);
     response.sendRedirect("/map.html");
   }
-  
-  private static boolean invalid(String coordinate){
-    return coordinate.equals(null) || coordinate.equals("");
-  }
 }
diff --git a/portfolio/src/main/webapp/map.js b/portfolio/src/main/webapp/map.js
index 0d824a8..320341c 100644
--- a/portfolio/src/main/webapp/map.js
+++ b/portfolio/src/main/webapp/map.js
@@ -32,12 +32,8 @@ function activateAddressForm() {
     fetch("https://maps.googleapis.com/maps/api/geocode/json?address=" + city + "," + state + "&key=" + API_KEY)
       .then((response) => response.json())
       .then((json) => {
-        debugLog(json);
-        const lat = json.results[0].geometry.location.lat;
-        const lng = json.results[0].geometry.location.lng;
-        debugLog(lat);
-        debugLog(lng);
-        return fetch("/markers?lat=" + lat + "&lng=" + lng, {method: 'POST'});
+        return fetch(`/markers?lat=${json.results[0].geometry.location.lat}&lng=${json.results[0].geometry.location.lng}`, 
+          {method: 'POST'});
       })
       .then((response) => {
         if (response.redirected) {
@@ -45,7 +41,7 @@ function activateAddressForm() {
         }
       })
       .catch((error) => {
-        debugLog('Error:', error);
+        alert('Error:', error);
       });
   });
 }

From 4c5b5f239527b20d564489256a6050b6c3c98f71 Mon Sep 17 00:00:00 2001
From: Claire Y <the.claire.yang@gmail.com>
Date: Fri, 12 Jun 2020 17:00:00 +0000
Subject: [PATCH 5/5] tweaks

---
 portfolio/src/main/webapp/map.js | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/portfolio/src/main/webapp/map.js b/portfolio/src/main/webapp/map.js
index 320341c..b9bdee4 100644
--- a/portfolio/src/main/webapp/map.js
+++ b/portfolio/src/main/webapp/map.js
@@ -13,11 +13,9 @@
 // limitations under the License.
 
 const API_KEY = "AIzaSyDOLA6fsSWwR-ONnnzTR0FnjxWhXc33wJw";
-let map;
 
 function loadPage() {
-  createMap();
-  renderMarkers();
+  renderMarkers(createMap());
   activateAddressForm();
 }
 
@@ -46,7 +44,7 @@ function activateAddressForm() {
   });
 }
 
-function renderMarkers() {
+function renderMarkers(map) {
   fetch('/markers').then(response => response.json()).then((markers) => {
     markers.forEach((marker) => {
       new google.maps.Marker({position: {lat: marker.lat, lng: marker.lng}, map: map});
@@ -57,7 +55,7 @@ function renderMarkers() {
 /** Creates a map in Aubergine style and adds it to the page. */
 function createMap() {
   const USCenterX = 38.5, USCenterY = -98;
-  map = new google.maps.Map(
+  return new google.maps.Map(
     document.getElementById('map'), {
       center: {lat: USCenterX, lng: USCenterY}, 
       zoom: 3,