From 95fda6a3d50f43c8af423e8145612fc4d58454d7 Mon Sep 17 00:00:00 2001 From: James Graham Date: Fri, 15 Jan 2021 12:31:49 +0000 Subject: [PATCH] refactor: prep for fallback to organisation latlng --- people/static/js/map.js | 126 ++++++++++++++---------- people/templates/people/person/map.html | 2 +- people/views/person.py | 6 ++ 3 files changed, 83 insertions(+), 51 deletions(-) diff --git a/people/static/js/map.js b/people/static/js/map.js index 154a16d..0727969 100644 --- a/people/static/js/map.js +++ b/people/static/js/map.js @@ -1,6 +1,6 @@ const marker_fill_alpha = 1.0; const marker_edge_colour = 'white'; -const marker_fill_colour = 'gray'; +const marker_fill_colour = 'gray'; // Size of the arrow markers used on the map const marker_scale = 9; @@ -10,63 +10,93 @@ const marker_label_offset = 0.27 * marker_scale; const marker_edge_alpha = 1.0; const marker_edge_width = 1.0; -let map = null +let map = null; +let selected_marker_info = null; + +function createMarker(map, marker_data) { + // Get the lat-long position from the data + const lat_lng = new google.maps.LatLng(marker_data.lat, marker_data.lng); + + const marker = new google.maps.Marker({ + position: lat_lng, + map: map, + icon: { + path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW, + strokeColor: marker_edge_colour, + strokeWeight: marker_edge_width, + strokeOpacity: marker_edge_alpha, + fillColor: marker_fill_colour, + fillOpacity: marker_fill_alpha, + scale: marker_scale, + labelOrigin: new google.maps.Point(0, -marker_label_offset) + }, + }); + + marker.info = new google.maps.InfoWindow({ + content: "
" + + "

" + marker_data.name.replace(''', "'") + "

" + + "
" + }); + + // We bind a listener to the current marker so that if it's clicked, it checks for an open info window, + // closes it, then opens the info window attached to it specifically. Then sets that as the last window. + google.maps.event.addListener(marker, 'click', function () { + if (selected_marker_info) { + selected_marker_info.close(); + } + + selected_marker_info = this.info; + this.info.open(map, this); + }) + + return marker; +} + +function search_missing_locations(map, markers_data) { + service = new google.maps.places.PlacesService(map) + + for (let data of markers_data) { + if (data.organisation !== null && (data.lat === null || data.lng === null)) { + let query = data.organisation; + if (data.country !== null) { + query += ' ' + data.country; + } + + const request = { + query: query, + fields: ['name', 'geometry'], + }; + + service.findPlaceFromQuery(request, (results, status) => { + if (status === google.maps.places.PlacesServiceStatus.OK) { + for (let i = 0; i < results.length; i++) { + // createMarker(results[i]); + console.log(results[i]) + } + map.setCenter(results[0].geometry.location); + } + }); + + break; + } + } +} // The function called when Google Maps starts up function initMap() { - // const centre_latlng = new google.maps.LatLng(settings.centre_lat, settings.centre_lng); - // The map, centered at Soton map = new google.maps.Map( // document.getElementById('map'), { zoom: settings.zoom, center: centre_latlng }); document.getElementById('map')); const bounds = new google.maps.LatLngBounds() const markers_data = JSON.parse( - document.getElementById('map-markers').textContent - ).filter(data => data.lat !== null && data.lng !== null); + document.getElementById('map-markers').textContent) + search_missing_locations(map, markers_data); // For each data entry in the json... - for (const pin_data of markers_data) { - // Get the lat-long position from the data - const lat_lng = new google.maps.LatLng(pin_data.lat, pin_data.lng); - console.log(lat_lng) - - // Generate a new marker - const marker = new google.maps.Marker({ - position: lat_lng, - map: map, - icon: { - path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW, - strokeColor: marker_edge_colour, - strokeWeight: marker_edge_width, - strokeOpacity: marker_edge_alpha, - fillColor: marker_fill_colour, - fillOpacity: marker_fill_alpha, - scale: marker_scale, - labelOrigin: new google.maps.Point(0, -marker_label_offset) - }, - }); - - console.log(marker) - + for (const marker_data of markers_data) { + const marker = createMarker(map, marker_data); bounds.extend(marker.position) - - // Build the info window content to tell the user the last time it was visited. - marker.info = new google.maps.InfoWindow({ - content: "
" + - "

" + pin_data.name.replace(''', "'") + "

" + - "
" - }); - - // We bind a listener to the current marker so that if it's clicked, it checks for an open info window, - // closes it, then opens the info window attached to it specifically. Then sets that as the last window. - google.maps.event.addListener(marker, 'click', function () { - if (last_info) { - last_info.close(); - } - last_info = this.info; - this.info.open(map, this); - }) } map.fitBounds(bounds) @@ -75,10 +105,6 @@ function initMap() { map.setZoom(max_zoom) } - - // Set the last info window to null - var last_info = null; - setTimeout(setMaxZoom, 100) } diff --git a/people/templates/people/person/map.html b/people/templates/people/person/map.html index 78c7803..45b4d5a 100644 --- a/people/templates/people/person/map.html +++ b/people/templates/people/person/map.html @@ -7,7 +7,7 @@ {% endblock %} diff --git a/people/views/person.py b/people/views/person.py index 5da0d1e..34615bd 100644 --- a/people/views/person.py +++ b/people/views/person.py @@ -106,15 +106,21 @@ def get_map_data(person: models.Person) -> typing.Dict[str, typing.Any]: try: latitude = answer_set.latitude or None longitude = answer_set.longitude or None + organisation = answer_set.organisation.name or None + country = answer_set.country_of_residence.name or None except AttributeError: latitude = None longitude = None + organisation = None + country = None return { 'name': person.name, 'lat': latitude, 'lng': longitude, + 'organisation': organisation, + 'country': country, 'url': reverse('people:person.detail', kwargs={'pk': person.pk}) }