Updated location to start from selected when edit.

app/controllers/location.js

@@ -4,10 +4,11 @@ const getLocation = async (req, res) => {
   const title = "Odaberite lokaciju";
   const nextStep = req.query.nextStep || "/";
 
-  //Check if location data already exists
+  //Check if location data already exists (active request)
   //If it does then  get location is called through edit field query
   //and map should show already selected location not initial map
-  let selectedLatLngBounds = 0;
+  let selectedLatLngBounds = {};
+  let boundsSelected = false;
 
   const searchRequest = await currentSearchRequest(req);
 
@@ -18,13 +19,21 @@ const getLocation = async (req, res) => {
   const selectedArea = searchRequest.areaToSearch;
   const sw = selectedArea.coordinates[0][3];
   const ne = selectedArea.coordinates[0][1];
+
   if (sw[0] && ne[0]) {
-    selectedLatLngBounds = [sw, ne];
+    selectedLatLngBounds = {
+      swLat: sw[1],
+      swLng: sw[0],
+      neLat: ne[1],
+      neLng: ne[0]
+    };
+    boundsSelected = true;
   }
 
   res.render("location", {
     nextStep,
     title,
+    boundsSelected,
     selectedLatLngBounds
   });
 };

app/views/location.ejs

@@ -50,15 +50,15 @@
 
   function locateMe() {
     if (navigator.geolocation) {
-
-      function onLocationSuccess (position) {
-        const coordinates = position && position.coords ? position.coords : null;
-        if (coordinates){
+      function onLocationSuccess(position) {
+        const coordinates =
+          position && position.coords ? position.coords : null;
+        if (coordinates) {
           const longitude = coordinates.longitude || null;
           const latitude = coordinates.latitude || null;
 
-          if (longitude && latitude && map){
-            map.setCenter({lat: latitude, lng: longitude});
+          if (longitude && latitude && map) {
+            map.setCenter({ lat: latitude, lng: longitude });
             map.setZoom(16);
           }
         }
@@ -70,20 +70,20 @@
 
   function initMap() {
     const BOSNIA_BOUNDS = {
-      north: 45.70,
+      north: 45.7,
       south: 41.69,
       west: 15.55,
-      east: 20.77,
+      east: 20.77
     };
     const SARAJEVO_COORDINATES = {
       lat: 43.85,
-      lng: 18.41,
+      lng: 18.41
     };
 
-    const mapElement = document.getElementById('map');
+    const mapElement = document.getElementById("map");
     const restrictMapPanningToBosniaOnly = {
       latLngBounds: BOSNIA_BOUNDS,
-      strictBounds: true,
+      strictBounds: true
     };
     const initialMapParams = {
       center: SARAJEVO_COORDINATES,
@@ -96,45 +96,50 @@
     };
     map = new google.maps.Map(mapElement, initialMapParams);
 
-    //After map initialization we check if area is already selected
-    //If yes we bound map to show selected area
-    console.log(<%= selectedLatLngBounds[0] %>);
-    if (<%= selectedLatLngBounds %>) {
-      map.fitBounds(<%= selectedLatLngBounds %>);
-    }
-
-    const inputElement = document.getElementById('autocompleteInput');
-    const restrictAutocompleteResultsToBosniaOnly = {'country': 'ba'};
+    const inputElement = document.getElementById("autocompleteInput");
+    const restrictAutocompleteResultsToBosniaOnly = { country: "ba" };
     const initialAutocompleteParams = {
-      types: ['geocode'],
+      types: ["geocode"],
       componentRestrictions: restrictAutocompleteResultsToBosniaOnly,
-      fields: ['geometry', 'types', 'address_components']
+      fields: ["geometry", "types", "address_components"]
     };
 
-    autocomplete = new google.maps.places.Autocomplete(inputElement, initialAutocompleteParams);
-    autocomplete.bindTo('bounds', map);
-    autocomplete.addListener('place_changed', onPlaceChanged);
+    autocomplete = new google.maps.places.Autocomplete(
+      inputElement,
+      initialAutocompleteParams
+    );
+    autocomplete.bindTo("bounds", map);
+    autocomplete.addListener("place_changed", onPlaceChanged);
     pacSelectFirst(inputElement);
     addLocateMeButton(map);
+
+    //After map initialization we check if area is already selected
+    //If yes we bound map to show already selected area
+    const boundsSelected = <%- boundsSelected %>;
+    const selectedLatLngBounds = <%- JSON.stringify(selectedLatLngBounds) %>;
+
+    if (boundsSelected) {
+      boundMapToSelected(map, selectedLatLngBounds);
+    }
   }
 
   function addLocateMeButton(map) {
-    var parent = document.createElement('div');
+    var parent = document.createElement("div");
     parent.className = "locate-me-container";
 
-    var a = document.createElement('a');
+    var a = document.createElement("a");
     a.id = "locateMe";
     a.className = "btn-floating";
 
-    var i = document.createElement('i');
+    var i = document.createElement("i");
     i.innerText = "gps_fixed";
     i.className = "material-icons right";
 
-    a.appendChild(i)
+    a.appendChild(i);
     a.addEventListener("click", locateMe);
-    parent.appendChild(a)
+    parent.appendChild(a);
 
-    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(parent)
+    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(parent);
   }
 
   function onPlaceChanged() {
@@ -149,33 +154,49 @@
   function pacSelectFirst(input) {
     // store the original event binding function
     const _addEventListener = input.addEventListener
-            ? input.addEventListener
-            : input.attachEvent
+      ? input.addEventListener
+      : input.attachEvent;
 
-    function addEventListenerWrapper (type, listener) {
+    function addEventListenerWrapper(type, listener) {
       // Simulate a 'down arrow' keypress on hitting 'return' when no pac suggestion is selected,
       // and then trigger the original listener.
-      if (type == 'keydown') {
-        const originalListener = listener
-        listener = function (event) {
-          const suggestionSelected = $('.pac-item-selected').length > 0
-          if (event.key == 'Enter' && !suggestionSelected) {
-            const simulatedDownArrow = $.Event('keydown', {
+      if (type == "keydown") {
+        const originalListener = listener;
+        listener = function(event) {
+          const suggestionSelected = $(".pac-item-selected").length > 0;
+          if (event.key == "Enter" && !suggestionSelected) {
+            const simulatedDownArrow = $.Event("keydown", {
               keyCode: 40,
               which: 40
-            })
-            originalListener.apply(input, [simulatedDownArrow])
+            });
+            originalListener.apply(input, [simulatedDownArrow]);
           }
 
-          originalListener.apply(input, [event])
-        }
+          originalListener.apply(input, [event]);
+        };
       }
 
-      _addEventListener.apply(input, [type, listener])
+      _addEventListener.apply(input, [type, listener]);
     }
 
-    input.addEventListener = addEventListenerWrapper
-    input.attachEvent = addEventListenerWrapper
+    input.addEventListener = addEventListenerWrapper;
+    input.attachEvent = addEventListenerWrapper;
+  }
+  function boundMapToSelected(map, selectedLatLngBounds) {
+
+    const swBound = new google.maps.LatLng(
+      selectedLatLngBounds.swLat,
+      selectedLatLngBounds.swLng
+    );
+    const neBound = new google.maps.LatLng(
+      selectedLatLngBounds.neLat,
+      selectedLatLngBounds.neLng
+    );
+    let bounds = new google.maps.LatLngBounds();
+    bounds.extend(swBound);
+    bounds.extend(neBound);
+
+    map.fitBounds(bounds);
   }
 
   $(document).ready(function() {
@@ -187,7 +208,9 @@
       $("#east").val(mapBounds.getNorthEast().lng());
       $("#west").val(mapBounds.getSouthWest().lng());
 
-      $("#locationInput").val(document.getElementById('autocompleteInput').value);
+      $("#locationInput").val(
+        document.getElementById("autocompleteInput").value
+      );
 
       $("#form-map-output").submit();
     });