diff --git a/breccia_mapper/settings.py b/breccia_mapper/settings.py index d2424c7..d32a0b2 100644 --- a/breccia_mapper/settings.py +++ b/breccia_mapper/settings.py @@ -94,6 +94,10 @@ The most likely required settings are: SECRET_KEY, DEBUG, ALLOWED_HOSTS, DATABAS - EMAIL_USE_SSL default: True if EMAIL_PORT == 465 else False Use SSL to communicate with SMTP server? Usually on port 465 + +- GOOGLE_MAPS_API_KEY + default: None + Google Maps API key to display maps of people's locations """ import collections @@ -113,6 +117,7 @@ SETTINGS_EXPORT = [ 'DEBUG', 'PROJECT_LONG_NAME', 'PROJECT_SHORT_NAME', + 'GOOGLE_MAPS_API_KEY', ] PROJECT_LONG_NAME = config('PROJECT_LONG_NAME', default='Project Long Name') @@ -393,3 +398,7 @@ except ImportError as exc: CUSTOMISATION_NAME = None TEMPLATE_NAME_INDEX = 'index.html' TEMPLATE_WELCOME_EMAIL_NAME = 'welcome-email' + +# Upstream API keys + +GOOGLE_MAPS_API_KEY = config('GOOGLE_MAPS_API_KEY', default=None) diff --git a/people/static/js/map.js b/people/static/js/map.js new file mode 100644 index 0000000..5295456 --- /dev/null +++ b/people/static/js/map.js @@ -0,0 +1,127 @@ +const marker_main_alpha_never = 1.0; +const marker_main_alpha_future = 1.0; +const marker_main_alpha = 1.0; + +const marker_main_colour_never = 'grey'; +const marker_main_colour_future = 'white'; + +const marker_edge_colour = 'white'; +const marker_edge_colour_never = 'white'; +const marker_edge_colour_future = 'black'; + + +// Size of the arrow markers used on the map +const marker_scale = 9; +// Offset for the place type icon (multiplier for marker scale) +const marker_label_offset = 0.27 * marker_scale; +// Width and transparency for the edges of the markers +const marker_edge_alpha = 1.0; +const marker_edge_width = 1.0; + +const settings = { + zoom: 5 +} + +// const data = [ +// {lat: 0, lng: 0, name: 'a'}, +// {lat: 1, lng: 1, name: 'b'}, +// {lat: 2, lng: 2, name: 'c'}, +// ] + + + +// Pull settings from the settings var +// const time_after = filters.time_after; +// const time_before = filters.time_before; +// Set up a colour scale that goes from blue to red via yellow, over time_limit days +// const visitedColour = d3.scaleSequential(d3.interpolateRdYlBu) +// .domain([filters.time_after, filters.time_before]); + + +// The function called when Google Maps starts up +function initMap() { + const centre_latlng = new google.maps.LatLng(0, 0); + // The map, centered at Soton + const map = new google.maps.Map( + document.getElementById('map'), { zoom: settings.zoom, center: centre_latlng }); + + // For each data entry in the json... + for (var i = 0; i < data.length; i++) { + // Get the lat-long position from the data + var lat_lng = new google.maps.LatLng(data[i].lat, data[i].lng); + + // Generate a new marker + var marker = new google.maps.Marker({ + position: lat_lng, map: map, + icon: { + path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW, + strokeColor: edgeColourByTime(data[i]), + strokeWeight: marker_edge_width, + strokeOpacity: marker_edge_alpha, + fillColor: mainColourByTime(data[i]), + fillOpacity: alphaByTime(data[i]), + scale: marker_scale, + labelOrigin: new google.maps.Point(0, -marker_label_offset) + }, + label: (data[i].type === 'school' ? '🎓' : '') + }); + + // Build the info window content to tell the user the last time it was visited. + marker.info = new google.maps.InfoWindow({ + content: "
" + + "

" + data[i].name.replace(''', "'") + "

" + + (data[i].hasOwnProperty('lastvisit') ? "

Last visited " + data[i].lastvisit + "

" : "

Never visited

") + + "
" + }); + + // 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); + }) + } + + // Set the last info window to null + var last_info = null; +} + + +function mainColourByTime(d) { + if (!d.hasOwnProperty('time')) { + return marker_main_colour_never; + } else if (d.time > time_after) { + return visitedColour(time_after); + } else if (d.time < time_before) { + return marker_main_colour_future; + } else { + return visitedColour(d.time); + } +} + +function edgeColourByTime(d) { + if (!d.hasOwnProperty('time')) { + return marker_edge_colour_never; + } else if (d.time > time_after) { + return marker_edge_colour; + } else if (d.time < time_before) { + return marker_edge_colour_future; + } else { + return marker_edge_colour; + } +} + +function alphaByTime(d) { + if (!d.hasOwnProperty('time')) { + return marker_main_alpha_never; + } else if (d.time > time_after) { + return marker_main_alpha; + } else if (d.time < time_before) { + return marker_main_alpha_future; + } else { + return marker_main_alpha; + } +} diff --git a/people/templates/people/person/detail.html b/people/templates/people/person/detail.html index 367bac5..b2e337e 100644 --- a/people/templates/people/person/detail.html +++ b/people/templates/people/person/detail.html @@ -1,5 +1,19 @@ {% extends 'base.html' %} +{% block extra_head %} + {% load staticfiles %} + + + + + +{% endblock %} + {% block content %}