views/admin/location-edit.phtml

<?php

use Fisharebest\Webtrees\Http\RequestHandlers\MapDataList;
use Fisharebest\Webtrees\Http\RequestHandlers\MapDataSave;
use Fisharebest\Webtrees\I18N;
use Fisharebest\Webtrees\PlaceLocation;
use Fisharebest\Webtrees\View;

/**
 * @var array<string,string> $breadcrumbs
 * @var string               $latitude
 * @var object               $leaflet_config
 * @var string               $longitude
 * @var PlaceLocation        $location
 * @var array<array<float>>  $map_bounds
 * @var array<float>         $marker_position
 * @var PlaceLocation        $parent
 * @var string               $title
 */

?>

<?= view('components/breadcrumbs', ['links' => $breadcrumbs]) ?>

<h1><?= $title ?></h1>

<div class="row form-group mb-3">
    <div class="col-sm-12">
        <div id="wt-map" class="wt-ajax-load col-sm-12 wt-map-admin" dir="ltr"></div>
    </div>
</div>

<form method="post" action="<?= e(route(MapDataSave::class)) ?>">
    <?= csrf_field() ?>
    <input type="hidden" name="parent_id" value="<?= e($parent->id()) ?>">
    <input type="hidden" name="place_id" value="<?= e($location->id()) ?>">

    <div class="row form-group mb-3">
        <label class="col-form-label col-sm-1" for="new_place_name">
            <?= I18N::translate('Place') ?>
        </label>
        <div class="col-sm-3">
            <input type="text" id="new_place_name" name="new_place_name" value="<?= e($location->locationName()) ?>" class="form-control" required="required" maxlength="120" pattern="[^,]+" dir="auto">
        </div>
    </div>

    <div class="row form-group mb-3">
        <label class="col-form-label col-sm-1" for="new_place_lati">
            <?= I18N::translate('Latitude') ?>
        </label>
        <div class="col-sm-3">
            <div class="input-group">
                <input type="text" dir="ltr" id="new_place_lati" class="editable form-control" name="new_place_lati" placeholder="<?= I18N::translate('degrees') ?>" value="<?= e($latitude) ?>">
            </div>
        </div>
    </div>

    <div class="row form-group mb-3">
        <label class="col-form-label col-sm-1" for="new_place_long">
            <?= I18N::translate('Longitude') ?>
        </label>
        <div class="col-sm-3">
            <div class="input-group">
                <input type="text" dir="ltr" id="new_place_long" class="editable form-control" name="new_place_long" placeholder="<?= I18N::translate('degrees') ?>" value="<?= e($longitude) ?>">
            </div>
        </div>
    </div>

    <div class="row form-group mb-3">
        <div class="col-sm-10 offset-sm-1">
            <button class="btn btn-primary" type="submit">
                <?= /* I18N: A button label. */
                I18N::translate('save')
                ?>
            </button>
            <a class="btn btn-secondary" href="<?= e(route(MapDataList::class, ['parent_id' => $parent->id()])) ?>">
                <?= I18N::translate('cancel') ?>
            </a>
        </div>
    </div>
</form>

<?php View::push('styles') ?>
<style>
    .wt-map-admin {
        height: 55vh;
        border: 1px solid darkGrey
    }
</style>
<?php View::endpush() ?>

<?php View::push('javascript') ?>
<script>
  'use strict';

  (function () {
    const config = <?= json_encode($leaflet_config, JSON_THROW_ON_ERROR) ?>;
    const add_place = <?= json_encode($location->id() === null, JSON_THROW_ON_ERROR) ?>;

    let new_place_lati = document.getElementById('new_place_lati');
    let new_place_long = document.getElementById('new_place_long');

    // postcss_image_inliner breaks the autodetection of image paths.
    L.Icon.Default.imagePath = <?= json_encode(asset('css/images/'), JSON_THROW_ON_ERROR) ?>;

    // draggable marker
    let marker = L.marker(<?= json_encode($marker_position, JSON_THROW_ON_ERROR) ?>, {
      draggable: true,
    })
    .on('dragend', function () {
      let coords = marker.getLatLng();
      map.panTo(coords);
      new_place_lati.value = Number(coords.lat).toFixed(5);
      new_place_long.value = Number(coords.lng).toFixed(5);
    });

    //reset map to initial state
    let resetControl = L.Control.extend({
      options: {
          position: 'topleft'
      },
      onAdd: function (map) {
        let container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom');
        container.onclick = function () {
          map.fitBounds(<?= json_encode($map_bounds, JSON_THROW_ON_ERROR) ?>, {padding: [50, 30]});
          marker.setLatLng(<?= json_encode([$location->latitude(), $location->longitude()], JSON_THROW_ON_ERROR) ?>);
          document.querySelector('form').reset();

          return false;
        };
        let reset = config.i18n.reset;
        let anchor = L.DomUtil.create('a', 'leaflet-control-reset', container);
        anchor.setAttribute('aria-label', reset);
        anchor.href = '#';
        anchor.title = reset;
        anchor.role = 'button';
        let image = L.DomUtil.create('i', 'fas fa-redo', anchor);
        image.alt = reset;

        return container;
      }
    });

    // Geocoder (place lookup)
    let geocoder = new L.Control.geocoder({
      position: 'bottomleft',
      defaultMarkGeocode: false,
      expand: 'click',
      showResultIcons: true,
      query: <?= json_encode($location->locationName(), JSON_THROW_ON_ERROR) ?>,
      placeholder: <?= json_encode(I18N::translate('Place'), JSON_THROW_ON_ERROR) ?>,
      errorMessage: <?= json_encode(I18N::translate('Nothing found.'), JSON_THROW_ON_ERROR) ?>,
      iconLabel: <?= json_encode(I18N::translate('Search'), JSON_THROW_ON_ERROR) ?>
    })
    .on('markgeocode', function (result) {
      let coords = result.geocode.center;
      let place = result.geocode.name.split(',', 1).toString();
      marker.setLatLng(coords);
      map.panTo(coords);
      if (add_place) {
        document.getElementById('new_place_name').value = place
      }
      new_place_lati.value = Number(coords.lat).toFixed(5);
      new_place_long.value = Number(coords.lng).toFixed(5);
    });

    const map = webtrees.buildLeafletJsMap('wt-map', config)
      .addControl(new resetControl())
      .addControl(geocoder)
      .addLayer(marker)
      .fitBounds(<?= json_encode($map_bounds, JSON_THROW_ON_ERROR) ?>, {padding: [50, 30]})
      .on('zoomend', function () {
        if (!map.getBounds().contains(marker.getLatLng())) {
          map.panTo(marker.getLatLng());
        }
    });

    document.querySelectorAll('.editable').forEach((element) => {
      element.addEventListener('change', () => {
        let lat = new_place_lati.value;
        let lng = new_place_long.value;
        marker.setLatLng([lat, lng]);
        map.panTo([lat, lng]);
      });
    });

    window.onload = function() {
      let icon = document.querySelector('.leaflet-control-geocoder-icon');
      icon.setAttribute('title', <?= json_encode(I18N::translate('Search'), JSON_THROW_ON_ERROR) ?>);
    }
  })();
</script>
<?php View::endpush() ?>