diff --git a/app/controllers/location.js b/app/controllers/location.js index afbf43f..214fcbf 100644 --- a/app/controllers/location.js +++ b/app/controllers/location.js @@ -4,9 +4,37 @@ const getLocation = async (req, res) => { const title = "Odaberite lokaciju"; const nextStep = req.query.nextStep || "/"; + //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 = {}; + let boundsSelected = false; + + const searchRequest = await currentSearchRequest(req); + + if (!searchRequest || !searchRequest.dataValues) { + res.render("notFound", { title: " " }); + return; + } + const selectedArea = searchRequest.areaToSearch; + const sw = selectedArea.coordinates[0][3]; + const ne = selectedArea.coordinates[0][1]; + + if (sw[0] && ne[0]) { + selectedLatLngBounds = { + swLat: sw[1], + swLng: sw[0], + neLat: ne[1], + neLng: ne[0] + }; + boundsSelected = true; + } + res.render("location", { nextStep, - title + title, + boundsSelected, + selectedLatLngBounds }); }; diff --git a/app/views/location.ejs b/app/views/location.ejs index 01a25ef..8e30feb 100644 --- a/app/views/location.ejs +++ b/app/views/location.ejs @@ -1,13 +1,17 @@

- Područje na mapi će biti uključeno u pretragu. Namjestite mapu na ulice - koje želite da budu vidljive. + Područje na mapi će biti uključeno u pretragu. Namjestite mapu na ulice koje + želite da budu vidljive.

- +
@@ -17,12 +21,17 @@ -
+
- Dalje + Dalje
@@ -41,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); } } @@ -61,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, @@ -87,38 +96,50 @@ }; map = new google.maps.Map(mapElement, initialMapParams); - 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() { @@ -133,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() { @@ -171,11 +208,16 @@ $("#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(); }); }); - +