feat: add initial location picker to person update

people/static/js/location_picker.js

@@ -0,0 +1,49 @@
+const marker_fill_alpha = 1.0;
+const marker_edge_colour = 'white';
+const marker_fill_colour =  'gray';
+
+// 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;
+
+let marker = null;
+
+function selectLocation(event) {
+    if (marker === null) {
+        // Generate a new marker
+        marker = new google.maps.Marker({
+            position: event.latLng,
+            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)
+            },
+        });
+    } else {
+        marker.setPosition(event.latLng);
+    }
+
+    const pos = marker.getPosition();
+    console.log(pos.lat(), pos.lng());
+    document.getElementById('id_latitude').value = pos.lat();
+    document.getElementById('id_longitude').value = pos.lng();
+}
+
+// The function called when Google Maps starts up
+function initMap() {
+    const centre_latlng = new google.maps.LatLng(settings.centre_lat, settings.centre_lng);
+    const map = new google.maps.Map(
+        document.getElementById('map'), { zoom: settings.zoom, center: centre_latlng });
+
+    google.maps.event.addListener(map, 'click', selectLocation)
+}

people/templates/people/person/update.html

@@ -1,5 +1,29 @@
 {% extends 'base.html' %}
 
+{% block extra_head %}
+    {% load staticfiles %}
+    <script type="application/javascript">
+        const data = [
+            {
+                name: '{{ person.name }}',
+                lat: '{{ answer_set.latitude }}',
+                lng: '{{ answer_set.longitude }}'
+            },
+        ]
+
+        const settings = {
+            zoom: 8,
+            centre_lat: '{{ answer_set.latitude }}',
+            centre_lng: '{{ answer_set.longitude }}',
+        }
+    </script>
+
+    <script src="{% static 'js/location_picker.js' %}"></script>
+
+    <script async defer src="https://maps.googleapis.com/maps/api/js?key={{ settings.GOOGLE_MAPS_API_KEY }}&callback=initMap"
+                        type="text/javascript"></script>
+{% endblock %}
+
 {% block content %}
     <nav aria-label="breadcrumb">
         <ol class="breadcrumb">
@@ -22,11 +46,20 @@
         {% csrf_token %}
 
         {% load bootstrap4 %}
-        {% bootstrap_form form %}
+        {% bootstrap_form form exclude='latitude,longitude' %}
+
+        {% bootstrap_field form.latitude %}
+        {% bootstrap_field form.longitude %}
 
         {% buttons %}
             <button class="btn btn-success" type="submit">Submit</button>
         {% endbuttons %}
     </form>
 
+    <hr>
+
+    <div id="map" style="height: 800px; width: 100%"></div>
+
+    <hr>
+
 {% endblock %}