From 55319a54e9e1e94dc06f3f96bc3e37726f43586f Mon Sep 17 00:00:00 2001 From: Naida Vatric Date: Thu, 19 Dec 2019 02:12:23 +0100 Subject: [PATCH 1/2] WIP Idea to implement bound map to be equal to selected --- app/controllers/location.js | 21 ++++++++++++++++++++- app/views/location.ejs | 33 ++++++++++++++++++++++++++------- 2 files changed, 46 insertions(+), 8 deletions(-) diff --git a/app/controllers/location.js b/app/controllers/location.js index afbf43f..77ad699 100644 --- a/app/controllers/location.js +++ b/app/controllers/location.js @@ -4,9 +4,28 @@ const getLocation = async (req, res) => { const title = "Odaberite lokaciju"; const nextStep = req.query.nextStep || "/"; + //Check if location data already exists + //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; + + 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 = [sw, ne]; + } + res.render("location", { nextStep, - title + title, + selectedLatLngBounds }); }; diff --git a/app/views/location.ejs b/app/views/location.ejs index 01a25ef..dc587cb 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
@@ -87,6 +96,13 @@ }; 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 initialAutocompleteParams = { @@ -177,5 +193,8 @@ }); }); - + From cc78e5acd5d4382371825eb80c9290493a70c3e8 Mon Sep 17 00:00:00 2001 From: Naida Vatric Date: Fri, 20 Dec 2019 01:02:57 +0100 Subject: [PATCH 2/2] Updated location to start from selected when edit. --- app/controllers/location.js | 15 ++++- app/views/location.ejs | 119 +++++++++++++++++++++--------------- 2 files changed, 83 insertions(+), 51 deletions(-) diff --git a/app/controllers/location.js b/app/controllers/location.js index 77ad699..214fcbf 100644 --- a/app/controllers/location.js +++ b/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 }); }; diff --git a/app/views/location.ejs b/app/views/location.ejs index dc587cb..8e30feb 100644 --- a/app/views/location.ejs +++ b/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(); });