mapping fixes, select by map

handlers/burialSites-post/doAddBurialSiteComment.ts

@@ -17,6 +17,7 @@ export default async function handler(
 
   response.json({
     success: true,
+
     burialSiteComments
   })
 }

public/html/leaflet-selectCoordinate.html

@@ -0,0 +1,33 @@
+<div class="modal" role="dialog">
+  <div class="modal-background"></div>
+  <div class="modal-card">
+    <header class="modal-card-head">
+      <h3 class="modal-card-title">Select Coordinate</h3>
+      <button
+        class="delete is-close-modal-button"
+        aria-label="close"
+        type="button"
+      ></button>
+    </header>
+    <section class="modal-card-body">
+      <div class="message is-info">
+        <div class="message-body">
+          <p>Click on the map to select a coordinate.</p>
+        </div>
+      </div>
+      <div class="leaflet-map" style="height:300px"></div>
+    </section>
+    <footer class="modal-card-foot is-justify-content-right">
+      <div class="buttons">
+        <button
+          class="button is-success is-update-button"
+          type="button"
+        >
+          <span class="icon"><i class="fas fa-save" aria-hidden="true"></i></span>
+          <span>Update Coordinate</span>
+        </button>
+        <button class="button is-close-modal-button" type="button">Cancel</button>
+      </div>
+    </footer>
+  </div>
+</div>

public/javascripts/burialSite.edit.js

@@ -183,6 +183,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
             }
         });
     }
+    // Leaflet Map
+    document
+        .querySelector('#button--selectCoordinate')
+        ?.addEventListener('click', (clickEvent) => {
+        clickEvent.preventDefault();
+        sunrise.openLeafletCoordinateSelectorModal({
+            latitudeElement: document.querySelector('#burialSite--burialSiteLatitude'),
+            longitudeElement: document.querySelector('#burialSite--burialSiteLongitude'),
+            callbackFunction: () => {
+                sunrise.setUnsavedChanges();
+            }
+        });
+    });
     // Comments
     let burialSiteComments = exports.burialSiteComments;
     delete exports.burialSiteComments;

public/javascripts/burialSite.edit.ts

@@ -281,6 +281,27 @@ declare const exports: Record<string, unknown>
     })
   }
 
+  // Leaflet Map
+
+  document
+    .querySelector('#button--selectCoordinate')
+    ?.addEventListener('click', (clickEvent) => {
+      clickEvent.preventDefault()
+
+      sunrise.openLeafletCoordinateSelectorModal({
+        latitudeElement: document.querySelector(
+          '#burialSite--burialSiteLatitude'
+        ) as HTMLInputElement,
+        longitudeElement: document.querySelector(
+          '#burialSite--burialSiteLongitude'
+        ) as HTMLInputElement,
+
+        callbackFunction: () => {
+          sunrise.setUnsavedChanges()
+        }
+      })
+    })
+
   // Comments
 
   let burialSiteComments = exports.burialSiteComments as BurialSiteComment[]

public/javascripts/burialSite.view.js

@@ -1,10 +1,34 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 (() => {
-    const mapContainerElement = document.querySelector('#burialSite--cemeterySvg');
+    /*
+     * Map
+     */
+    const sunrise = exports.sunrise;
+    const mapContainerElement = document.querySelector('#burialSite--leaflet');
     if (mapContainerElement !== null) {
-        exports.sunrise.highlightMap(mapContainerElement, mapContainerElement.dataset.cemeterySvgId ?? '', 'success');
+        const mapLatitude = Number.parseFloat(mapContainerElement.dataset.latitude ?? '');
+        const mapLongitude = Number.parseFloat(mapContainerElement.dataset.longitude ?? '');
+        const mapCoordinates = [mapLatitude, mapLongitude];
+        // eslint-disable-next-line unicorn/no-array-callback-reference
+        const map = L.map(mapContainerElement);
+        map.setView(mapCoordinates, sunrise.leafletConstants.defaultZoom);
+        L.tileLayer(sunrise.leafletConstants.tileLayerURL, {
+            attribution: sunrise.leafletConstants.attribution,
+            maxZoom: sunrise.leafletConstants.maxZoom
+        }).addTo(map);
+        L.marker(mapCoordinates).addTo(map);
     }
+    /*
+     * Image
+     */
+    const svgContainerElement = document.querySelector('#burialSite--cemeterySvg');
+    if (svgContainerElement !== null) {
+        sunrise.highlightMap(svgContainerElement, svgContainerElement.dataset.cemeterySvgId ?? '', 'success');
+    }
+    /*
+     * Contracts
+     */
     document
         .querySelector('#burialSite--contractsToggle')
         ?.addEventListener('click', () => {

public/javascripts/burialSite.view.ts

@@ -1,21 +1,64 @@
+import type * as Leaflet from 'leaflet'
+
 import type { Sunrise } from './types.js'
 
+declare const L: typeof Leaflet
 declare const exports: {
   sunrise: Sunrise
 }
 ;(() => {
+  /*
+   * Map
+   */
+
+  const sunrise = exports.sunrise
+
   const mapContainerElement: HTMLElement | null = document.querySelector(
-    '#burialSite--cemeterySvg'
+    '#burialSite--leaflet'
   )
 
   if (mapContainerElement !== null) {
-    exports.sunrise.highlightMap(
+    const mapLatitude = Number.parseFloat(
-      mapContainerElement,
+      mapContainerElement.dataset.latitude ?? ''
-      mapContainerElement.dataset.cemeterySvgId ?? '',
+    )
+    const mapLongitude = Number.parseFloat(
+      mapContainerElement.dataset.longitude ?? ''
+    )
+
+    const mapCoordinates: Leaflet.LatLngTuple = [mapLatitude, mapLongitude]
+
+    // eslint-disable-next-line unicorn/no-array-callback-reference
+    const map: Leaflet.Map = L.map(mapContainerElement)
+    map.setView(mapCoordinates, sunrise.leafletConstants.defaultZoom)
+
+    L.tileLayer(sunrise.leafletConstants.tileLayerURL, {
+      attribution: sunrise.leafletConstants.attribution,
+      maxZoom: sunrise.leafletConstants.maxZoom
+    }).addTo(map)
+
+    L.marker(mapCoordinates).addTo(map)
+  }
+
+  /*
+   * Image
+   */
+
+  const svgContainerElement: HTMLElement | null = document.querySelector(
+    '#burialSite--cemeterySvg'
+  )
+
+  if (svgContainerElement !== null) {
+    sunrise.highlightMap(
+      svgContainerElement,
+      svgContainerElement.dataset.cemeterySvgId ?? '',
       'success'
     )
   }
 
+  /*
+   * Contracts
+   */
+
   document
     .querySelector('#burialSite--contractsToggle')
     ?.addEventListener('click', () => {

public/javascripts/cemetery.edit.js

@@ -4,6 +4,24 @@ Object.defineProperty(exports, "__esModule", { value: true });
     const sunrise = exports.sunrise;
     const cemeteryId = document.querySelector('#cemetery--cemeteryId').value;
     const isCreate = cemeteryId === '';
+    /*
+     * Cemetery Map
+     */
+    document
+        .querySelector('#button--selectCoordinate')
+        ?.addEventListener('click', (clickEvent) => {
+        clickEvent.preventDefault();
+        sunrise.openLeafletCoordinateSelectorModal({
+            latitudeElement: document.querySelector('#cemetery--cemeteryLatitude'),
+            longitudeElement: document.querySelector('#cemetery--cemeteryLongitude'),
+            callbackFunction: () => {
+                sunrise.setUnsavedChanges();
+            }
+        });
+    });
+    /*
+     * Cemetery Form
+     */
     const cemeteryForm = document.querySelector('#form--cemetery');
     function setUnsavedChanges() {
         sunrise.setUnsavedChanges();
@@ -28,14 +46,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
                 }
                 else {
                     bulmaJS.alert({
-                        message: "Cemetery Updated Successfully",
+                        message: 'Cemetery Updated Successfully',
                         contextualColorName: 'success'
                     });
                 }
             }
             else {
                 bulmaJS.alert({
-                    title: "Error Updating Cemetery",
+                    title: 'Error Updating Cemetery',
                     message: responseJSON.errorMessage ?? '',
                     contextualColorName: 'danger'
                 });
@@ -61,7 +79,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
                 }
                 else {
                     bulmaJS.alert({
-                        title: "Error Deleting Cemetery",
+                        title: 'Error Deleting Cemetery',
                         message: responseJSON.errorMessage ?? '',
                         contextualColorName: 'danger'
                     });
@@ -69,11 +87,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
             });
         }
         bulmaJS.confirm({
-            title: "Delete Cemetery",
+            title: 'Delete Cemetery',
-            message: "Are you sure you want to delete this cemetery and all related burial sites?",
+            message: 'Are you sure you want to delete this cemetery and all related burial sites?',
             contextualColorName: 'warning',
             okButton: {
-                text: "Yes, Delete Cemetery",
+                text: 'Yes, Delete Cemetery',
                 callbackFunction: doDelete
             }
         });

public/javascripts/cemetery.edit.ts

@@ -13,8 +13,36 @@ declare const exports: Record<string, unknown>
   const cemeteryId = (
     document.querySelector('#cemetery--cemeteryId') as HTMLInputElement
   ).value
+
   const isCreate = cemeteryId === ''
 
+  /*
+   * Cemetery Map
+   */
+
+  document
+    .querySelector('#button--selectCoordinate')
+    ?.addEventListener('click', (clickEvent) => {
+      clickEvent.preventDefault()
+
+      sunrise.openLeafletCoordinateSelectorModal({
+        latitudeElement: document.querySelector(
+          '#cemetery--cemeteryLatitude'
+        ) as HTMLInputElement,
+        longitudeElement: document.querySelector(
+          '#cemetery--cemeteryLongitude'
+        ) as HTMLInputElement,
+
+        callbackFunction: () => {
+          sunrise.setUnsavedChanges()
+        }
+      })
+    })
+
+  /*
+   * Cemetery Form
+   */
+
   const cemeteryForm = document.querySelector(
     '#form--cemetery'
   ) as HTMLFormElement
@@ -56,13 +84,13 @@ declare const exports: Record<string, unknown>
             )
           } else {
             bulmaJS.alert({
-              message: "Cemetery Updated Successfully",
+              message: 'Cemetery Updated Successfully',
               contextualColorName: 'success'
             })
           }
         } else {
           bulmaJS.alert({
-            title: "Error Updating Cemetery",
+            title: 'Error Updating Cemetery',
             message: responseJSON.errorMessage ?? '',
             contextualColorName: 'danger'
           })
@@ -101,7 +129,7 @@ declare const exports: Record<string, unknown>
               globalThis.location.href = sunrise.getCemeteryURL()
             } else {
               bulmaJS.alert({
-                title: "Error Deleting Cemetery",
+                title: 'Error Deleting Cemetery',
                 message: responseJSON.errorMessage ?? '',
                 contextualColorName: 'danger'
               })
@@ -111,11 +139,12 @@ declare const exports: Record<string, unknown>
       }
 
       bulmaJS.confirm({
-        title: "Delete Cemetery",
+        title: 'Delete Cemetery',
-        message: "Are you sure you want to delete this cemetery and all related burial sites?",
+        message:
+          'Are you sure you want to delete this cemetery and all related burial sites?',
         contextualColorName: 'warning',
         okButton: {
-          text: "Yes, Delete Cemetery",
+          text: 'Yes, Delete Cemetery',
           callbackFunction: doDelete
         }
       })

public/javascripts/cemetery.view.js

@@ -1,19 +1,18 @@
 "use strict";
-// eslint-disable-next-line @eslint-community/eslint-comments/disable-enable-pair
-/* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call */
 Object.defineProperty(exports, "__esModule", { value: true });
 (() => {
-    const mapContainerElement = document.querySelector('#map--leaflet');
+    const sunrise = exports.sunrise;
+    const mapContainerElement = document.querySelector('#cemetery--leaflet');
     if (mapContainerElement !== null) {
-        const mapLatitude = Number.parseFloat(mapContainerElement.dataset.mapLatitude ?? '');
+        const mapLatitude = Number.parseFloat(mapContainerElement.dataset.latitude ?? '');
-        const mapLongitude = Number.parseFloat(mapContainerElement.dataset.mapLongitude ?? '');
+        const mapLongitude = Number.parseFloat(mapContainerElement.dataset.longitude ?? '');
         const mapCoordinates = [mapLatitude, mapLongitude];
         // eslint-disable-next-line unicorn/no-array-callback-reference
         const map = L.map(mapContainerElement);
-        map.setView(mapCoordinates, 15);
+        map.setView(mapCoordinates, sunrise.leafletConstants.defaultZoom);
-        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        L.tileLayer(sunrise.leafletConstants.tileLayerURL, {
-            maxZoom: 19,
+            attribution: sunrise.leafletConstants.attribution,
-            attribution: '© OpenStreetMap'
+            maxZoom: sunrise.leafletConstants.maxZoom
         }).addTo(map);
         L.marker(mapCoordinates).addTo(map);
     }

public/javascripts/cemetery.view.ts

@@ -1,30 +1,34 @@
-// eslint-disable-next-line @eslint-community/eslint-comments/disable-enable-pair
-/* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call */
-
 import type * as Leaflet from 'leaflet'
 
-declare const L
+import type { Sunrise } from './types.js'
+
+declare const L: typeof Leaflet
+declare const exports: {
+  sunrise: Sunrise
+}
 ;(() => {
+  const sunrise = exports.sunrise
+
   const mapContainerElement: HTMLElement | null =
-    document.querySelector('#map--leaflet')
+    document.querySelector('#cemetery--leaflet')
 
   if (mapContainerElement !== null) {
     const mapLatitude = Number.parseFloat(
-      mapContainerElement.dataset.mapLatitude ?? ''
+      mapContainerElement.dataset.latitude ?? ''
     )
     const mapLongitude = Number.parseFloat(
-      mapContainerElement.dataset.mapLongitude ?? ''
+      mapContainerElement.dataset.longitude ?? ''
     )
 
     const mapCoordinates: Leaflet.LatLngTuple = [mapLatitude, mapLongitude]
 
     // eslint-disable-next-line unicorn/no-array-callback-reference
     const map: Leaflet.Map = L.map(mapContainerElement)
-    map.setView(mapCoordinates, 15)
+    map.setView(mapCoordinates, sunrise.leafletConstants.defaultZoom)
 
-    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    L.tileLayer(sunrise.leafletConstants.tileLayerURL, {
-      maxZoom: 19,
+      attribution: sunrise.leafletConstants.attribution,
-      attribution: '© OpenStreetMap'
+      maxZoom: sunrise.leafletConstants.maxZoom
     }).addTo(map)
 
     L.marker(mapCoordinates).addTo(map)

public/javascripts/main.js

@@ -19,7 +19,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
         return _hasUnsavedChanges;
     }
     /*
-     * Mapping
+     * SVG Mapping
      */
     function highlightMap(mapContainerElement, mapKey, contextualClass) {
         // Search for ID
@@ -41,6 +41,71 @@ Object.defineProperty(exports, "__esModule", { value: true });
             }
         }
     }
+    /*
+     * Leaflet Mapping
+     */
+    const leafletConstants = {
+        tileLayerURL: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+        defaultZoom: 15,
+        maxZoom: 19,
+        attribution: '© OpenStreetMap'
+    };
+    function openLeafletCoordinateSelectorModal(options) {
+        const latitude = Number.parseFloat(options.latitudeElement.value);
+        const longitude = Number.parseFloat(options.longitudeElement.value);
+        let currentMarker;
+        cityssm.openHtmlModal('leaflet-selectCoordinate', {
+            onshown(modalElement, closeModalFunction) {
+                bulmaJS.toggleHtmlClipped();
+                /*
+                 * Set up the Leaflet map
+                 */
+                const mapContainerElement = modalElement.querySelector('.leaflet-map');
+                // eslint-disable-next-line unicorn/no-array-callback-reference
+                const map = L.map(mapContainerElement);
+                L.tileLayer(sunrise.leafletConstants.tileLayerURL, {
+                    attribution: sunrise.leafletConstants.attribution,
+                    maxZoom: sunrise.leafletConstants.maxZoom
+                }).addTo(map);
+                if (!Number.isNaN(latitude) && !Number.isNaN(longitude)) {
+                    const mapCoordinates = [latitude, longitude];
+                    map.setView(mapCoordinates, sunrise.leafletConstants.defaultZoom);
+                    currentMarker = L.marker(mapCoordinates).addTo(map);
+                }
+                else {
+                    const middleLatitude = (Number.parseFloat(options.latitudeElement.min) + Number.parseFloat(options.latitudeElement.max)) / 2;
+                    const middleLongitude = (Number.parseFloat(options.longitudeElement.min) + Number.parseFloat(options.longitudeElement.max)) / 2;
+                    const mapCoordinates = [middleLatitude, middleLongitude];
+                    map.setView(mapCoordinates, 5);
+                }
+                map.on('click', (clickEvent) => {
+                    const mapCoordinates = clickEvent.latlng;
+                    if (currentMarker !== undefined) {
+                        currentMarker.remove();
+                    }
+                    currentMarker = L.marker(mapCoordinates).addTo(map);
+                });
+                modalElement
+                    .querySelector('.is-update-button')
+                    ?.addEventListener('click', (clickEvent) => {
+                    clickEvent.preventDefault();
+                    if (currentMarker !== undefined) {
+                        const mapCoordinates = currentMarker.getLatLng();
+                        options.latitudeElement.value = mapCoordinates.lat.toFixed(8);
+                        options.longitudeElement.value = mapCoordinates.lng.toFixed(8);
+                        options.callbackFunction(mapCoordinates.lat, mapCoordinates.lng);
+                    }
+                    closeModalFunction();
+                });
+            },
+            onremoved() {
+                bulmaJS.toggleHtmlClipped();
+            }
+        });
+    }
+    /*
+     * Field Unlocking
+     */
     function unlockField(clickEvent) {
         const fieldElement = clickEvent.currentTarget.closest('.field');
         const inputOrSelectElement = fieldElement.querySelector('input, select');
@@ -206,6 +271,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
         dynamicsGPIntegrationIsEnabled,
         urlPrefix,
         highlightMap,
+        leafletConstants,
+        openLeafletCoordinateSelectorModal,
         initializeUnlockFieldButtons,
         escapedAliases,
         populateAliases,

public/javascripts/main.ts

@@ -1,4 +1,6 @@
+import type { BulmaJS } from '@cityssm/bulma-js/types.js'
 import type { cityssmGlobal } from '@cityssm/bulma-webapp-js/src/types.js'
+import type * as Leaflet from 'leaflet'
 
 import type { Sunrise } from './types.js'
 
@@ -13,7 +15,10 @@ type RandomColorHue =
   | 'yellow'
 type RandomColorLuminosity = 'bright' | 'dark' | 'light'
 
+declare const L: typeof Leaflet
 declare const cityssm: cityssmGlobal
+declare const bulmaJS: BulmaJS
+
 declare const exports: Record<string, unknown> & {
   aliases: Record<string, string>
   randomColor: (options?: {
@@ -49,7 +54,7 @@ declare const exports: Record<string, unknown> & {
   }
 
   /*
-   * Mapping
+   * SVG Mapping
    */
 
   function highlightMap(
@@ -83,6 +88,100 @@ declare const exports: Record<string, unknown> & {
     }
   }
 
+  /*
+   * Leaflet Mapping
+   */
+
+  const leafletConstants = {
+    tileLayerURL: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+
+    defaultZoom: 15,
+    maxZoom: 19,
+
+    attribution: '© OpenStreetMap'
+  }
+
+  function openLeafletCoordinateSelectorModal(options: {
+    latitudeElement: HTMLInputElement
+    longitudeElement: HTMLInputElement
+
+    callbackFunction: (latitude: number, longitude: number) => void
+  }): void {
+    const latitude = Number.parseFloat(options.latitudeElement.value)
+    const longitude = Number.parseFloat(options.longitudeElement.value)
+
+    let currentMarker: Leaflet.Marker | undefined
+
+    cityssm.openHtmlModal('leaflet-selectCoordinate', {
+      onshown(modalElement, closeModalFunction) {
+        bulmaJS.toggleHtmlClipped()
+
+        /*
+         * Set up the Leaflet map
+         */
+
+        const mapContainerElement = modalElement.querySelector(
+          '.leaflet-map'
+        ) as HTMLElement
+
+        // eslint-disable-next-line unicorn/no-array-callback-reference
+        const map = L.map(mapContainerElement)
+
+        L.tileLayer(sunrise.leafletConstants.tileLayerURL, {
+          attribution: sunrise.leafletConstants.attribution,
+          maxZoom: sunrise.leafletConstants.maxZoom
+        }).addTo(map)
+
+        if (!Number.isNaN(latitude) && !Number.isNaN(longitude)) {
+          const mapCoordinates: Leaflet.LatLngTuple = [latitude, longitude]
+          map.setView(mapCoordinates, sunrise.leafletConstants.defaultZoom)
+          currentMarker = L.marker(mapCoordinates).addTo(map)
+        } else {
+          const middleLatitude = (Number.parseFloat(options.latitudeElement.min) + Number.parseFloat(options.latitudeElement.max)) / 2
+          const middleLongitude = (Number.parseFloat(options.longitudeElement.min) + Number.parseFloat(options.longitudeElement.max)) / 2
+
+          const mapCoordinates: Leaflet.LatLngTuple = [middleLatitude, middleLongitude]
+          map.setView(mapCoordinates, 5)
+        }
+
+        map.on('click', (clickEvent: Leaflet.LeafletMouseEvent) => {
+          const mapCoordinates = clickEvent.latlng as Leaflet.LatLng
+
+          if (currentMarker !== undefined) {
+            currentMarker.remove()
+          }
+
+          currentMarker = L.marker(mapCoordinates).addTo(map)
+        })
+
+        modalElement
+          .querySelector('.is-update-button')
+          ?.addEventListener('click', (clickEvent) => {
+            clickEvent.preventDefault()
+
+            if (currentMarker !== undefined) {
+              const mapCoordinates = currentMarker.getLatLng() as Leaflet.LatLng
+
+              options.latitudeElement.value = mapCoordinates.lat.toFixed(8)
+              options.longitudeElement.value = mapCoordinates.lng.toFixed(8)
+
+              options.callbackFunction(mapCoordinates.lat, mapCoordinates.lng)
+            }
+
+            closeModalFunction()
+          })
+      },
+
+      onremoved() {
+        bulmaJS.toggleHtmlClipped()
+      }
+    })
+  }
+
+  /*
+   * Field Unlocking
+   */
+
   function unlockField(clickEvent: Event): void {
     const fieldElement = (clickEvent.currentTarget as HTMLElement).closest(
       '.field'
@@ -347,6 +446,9 @@ declare const exports: Record<string, unknown> & {
     urlPrefix,
 
     highlightMap,
+    leafletConstants,
+    openLeafletCoordinateSelectorModal,
+
     initializeUnlockFieldButtons,
 
     escapedAliases,

public/javascripts/types.d.ts

@@ -1,7 +1,18 @@
 export interface Sunrise {
-    urlPrefix: string;
     apiKey: string;
+    urlPrefix: string;
     highlightMap: (mapContainerElement: HTMLElement, mapKey: string, contextualClass: 'danger' | 'success') => void;
+    leafletConstants: {
+        tileLayerURL: string;
+        defaultZoom: number;
+        maxZoom: number;
+        attribution: string;
+    };
+    openLeafletCoordinateSelectorModal: (options: {
+        latitudeElement: HTMLInputElement;
+        longitudeElement: HTMLInputElement;
+        callbackFunction: (latitude: number, longitude: number) => void;
+    }) => void;
     initializeUnlockFieldButtons: (containerElement: HTMLElement) => void;
     populateAliases: (containerElement: HTMLElement) => void;
     escapedAliases: {

public/javascripts/types.ts

@@ -1,6 +1,6 @@
 export interface Sunrise {
-  urlPrefix: string
   apiKey: string
+  urlPrefix: string
 
   highlightMap: (
     mapContainerElement: HTMLElement,
@@ -8,6 +8,22 @@ export interface Sunrise {
     contextualClass: 'danger' | 'success'
   ) => void
 
+  leafletConstants: {
+    tileLayerURL: string
+
+    defaultZoom: number
+    maxZoom: number
+
+    attribution: string
+  }
+
+  openLeafletCoordinateSelectorModal: (options: {
+    latitudeElement: HTMLInputElement
+    longitudeElement: HTMLInputElement
+
+    callbackFunction: (latitude: number, longitude: number) => void
+  }) => void
+
   initializeUnlockFieldButtons: (containerElement: HTMLElement) => void
 
   populateAliases: (containerElement: HTMLElement) => void

views/burialSite-edit.ejs

@@ -347,7 +347,10 @@
             </div>
             <div class="level-right">
               <div class="level-item">
-                <i class="fas fa-map-marker-alt" aria-hidden="true"></i>
+                <button class="button is-small" id="button--selectCoordinate" type="button">
+                  <span class="icon"><i class="fas fa-map-marked-alt" aria-hidden="true"></i></span>
+                  <span>Select Coordinate</span>
+                </button>
               </div>
             </div>
           </div>

views/burialSite-view.ejs

@@ -59,9 +59,7 @@
   </div>
 </div>
 
-<div class="columns">
+<div class="panel">
-  <div class="column">
-    <div class="panel">
   <div class="panel-block is-block">
     <div class="columns">
       <div class="column">
@@ -96,6 +94,36 @@
       <% } %>
     </div>
   </div>
+</div>
+
+<div class="columns">
+  <div class="column">
+    <div class="panel">
+      <div class="panel-heading">
+        <div class="level">
+          <div class="level-left">
+            <div class="level-item">
+              <h2 class="title is-5 has-text-weight-bold has-text-white">Geographic Location</h2>
+            </div>
+          </div>
+          <div class="level-right">
+            <div class="level-item">
+              <i class="fas fa-map-marker-alt" aria-hidden="true"></i>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="panel-block is-block">
+        <% if (burialSite.burialSiteLatitude && burialSite.burialSiteLongitude) { %>
+          <div id="burialSite--leaflet" data-latitude="<%= burialSite.burialSiteLatitude %>" data-longitude="<%= burialSite.burialSiteLongitude %>" style="height:300px"></div>
+        <% } else { %>
+          <div class="message is-info">
+            <p class="message-body">
+              There are no geographic coordinates associated with this burial site.
+            </p>
+          </div>
+        <% } %>
+      </div>
     </div>
   </div>
 

views/cemetery-edit.ejs

@@ -203,7 +203,10 @@
             </div>
             <div class="level-right">
               <div class="level-item">
-                <i class="fas fa-map-marker-alt" aria-hidden="true"></i>
+                <button class="button is-small" id="button--selectCoordinate" type="button">
+                  <span class="icon"><i class="fas fa-map-marked-alt" aria-hidden="true"></i></span>
+                  <span>Select Coordinate</span>
+                </button>
               </div>
             </div>
           </div>

views/cemetery-view.ejs

@@ -112,7 +112,7 @@
       </div>
       <div class="panel-block is-block">
         <% if (cemetery.cemeteryLatitude && cemetery.cemeteryLongitude) { %>
-          <div id="cemetery--leaflet" data-cemetery-latitude="<%= cemetery.cemeteryLatitude %>" data-cemetery-longitude="<%= cemetery.cemeteryLongitude %>" style="height:300px"></div>
+          <div id="cemetery--leaflet" data-latitude="<%= cemetery.cemeteryLatitude %>" data-longitude="<%= cemetery.cemeteryLongitude %>" style="height:300px"></div>
         <% } else { %>
           <div class="message is-info">
             <p class="message-body">