1<?php 2 3declare(strict_types=1); 4 5use Fisharebest\Webtrees\Http\RequestHandlers\MapDataSave; 6use Fisharebest\Webtrees\I18N; 7use Fisharebest\Webtrees\PlaceLocation; 8use Fisharebest\Webtrees\View; 9 10/** 11 * @var array<string,string> $breadcrumbs 12 * @var string $latitude 13 * @var object $leaflet_config 14 * @var string $longitude 15 * @var PlaceLocation $location 16 * @var array<array<float>> $map_bounds 17 * @var array<float> $marker_position 18 * @var PlaceLocation $parent 19 * @var string $title 20 * @var string $url 21 */ 22 23?> 24 25<?= view('components/breadcrumbs', ['links' => $breadcrumbs]) ?> 26 27<h1><?= $title ?></h1> 28 29<div class="wt-fullscreen-container"> 30 <div id="wt-map" class="wt-ajax-load mb-3 border wt-location-edit-map" dir="ltr"></div> 31</div> 32 33 34<form method="post" action="<?= e(route(MapDataSave::class)) ?>"> 35 <input type="hidden" name="parent_id" value="<?= $parent->id() ?>"> 36 <input type="hidden" name="place_id" value="<?= $location->id() ?>"> 37 <input type="hidden" name="url" value="<?= e($url) ?>"> 38 39 <div class="row mb-3"> 40 <label class="col-form-label col-sm-1" for="new_place_name"> 41 <?= I18N::translate('Place') ?> 42 </label> 43 <div class="col-sm-3"> 44 <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"> 45 </div> 46 </div> 47 48 <div class="row mb-3"> 49 <label class="col-form-label col-sm-1" for="new_place_lati"> 50 <?= I18N::translate('Latitude') ?> 51 </label> 52 <div class="col-sm-3"> 53 <div class="input-group"> 54 <input type="text" dir="ltr" id="new_place_lati" class="editable form-control" name="new_place_lati" placeholder="<?= I18N::translate('degrees') ?>" value="<?= e($latitude) ?>"> 55 </div> 56 </div> 57 </div> 58 59 <div class="row mb-3"> 60 <label class="col-form-label col-sm-1" for="new_place_long"> 61 <?= I18N::translate('Longitude') ?> 62 </label> 63 <div class="col-sm-3"> 64 <div class="input-group"> 65 <input type="text" dir="ltr" id="new_place_long" class="editable form-control" name="new_place_long" placeholder="<?= I18N::translate('degrees') ?>" value="<?= e($longitude) ?>"> 66 </div> 67 </div> 68 </div> 69 70 <div class="row mb-3"> 71 <div class="col-sm-10 offset-sm-1"> 72 <button class="btn btn-primary" type="submit"> 73 <?= /* I18N: A button label. */ 74 I18N::translate('save') 75 ?> 76 </button> 77 <a class="btn btn-secondary" href="<?= e($url) ?>"> 78 <?= I18N::translate('cancel') ?> 79 </a> 80 </div> 81 </div> 82 83 <?= csrf_field() ?> 84</form> 85 86<?php View::push('javascript') ?> 87<script> 88 'use strict'; 89 90 (function () { 91 const config = <?= json_encode($leaflet_config, JSON_THROW_ON_ERROR) ?>; 92 const add_place = <?= json_encode($location->id() === null, JSON_THROW_ON_ERROR) ?>; 93 94 let new_place_lati = document.getElementById('new_place_lati'); 95 let new_place_long = document.getElementById('new_place_long'); 96 97 // postcss_image_inliner breaks the autodetection of image paths. 98 L.Icon.Default.imagePath = <?= json_encode(asset('css/images/'), JSON_THROW_ON_ERROR) ?>; 99 100 // draggable marker 101 let marker = L.marker(<?= json_encode($marker_position, JSON_THROW_ON_ERROR) ?>, { 102 draggable: true, 103 }) 104 .on('dragend', function () { 105 let coords = marker.getLatLng(); 106 map.panTo(coords); 107 new_place_lati.value = Number(coords.lat).toFixed(5); 108 new_place_long.value = Number(coords.lng).toFixed(5); 109 }); 110 111 /** 112 * Passed to resetControl to 113 * perform necessary reset actions on map 114 * 115 * @param {Event} event 116 */ 117 let resetCallback = function (event) { 118 event.preventDefault(); 119 map.fitBounds(<?= json_encode($map_bounds, JSON_THROW_ON_ERROR) ?>, {padding: [50, 30]}); 120 marker.setLatLng(<?= json_encode($marker_position, JSON_THROW_ON_ERROR) ?>); 121 document.querySelector('form').reset(); 122 } 123 124 // Geocoder (place lookup) 125 let geocoder = new L.Control.geocoder({ 126 position: 'bottomleft', 127 defaultMarkGeocode: false, 128 expand: 'click', 129 showResultIcons: true, 130 query: <?= json_encode($location->locationName(), JSON_THROW_ON_ERROR) ?>, 131 placeholder: <?= json_encode(I18N::translate('Place'), JSON_THROW_ON_ERROR) ?>, 132 errorMessage: <?= json_encode(I18N::translate('Nothing found.'), JSON_THROW_ON_ERROR) ?>, 133 iconLabel: <?= json_encode(I18N::translate('Search'), JSON_THROW_ON_ERROR) ?> 134 }) 135 .on('markgeocode', function (result) { 136 let coords = result.geocode.center; 137 let place = result.geocode.name.split(',', 1).toString(); 138 marker.setLatLng(coords); 139 map.panTo(coords); 140 if (add_place) { 141 document.getElementById('new_place_name').value = place 142 } 143 new_place_lati.value = Number(coords.lat).toFixed(5); 144 new_place_long.value = Number(coords.lng).toFixed(5); 145 }); 146 147 const map = webtrees.buildLeafletJsMap('wt-map', config, resetCallback) 148 .addControl(geocoder) 149 .addLayer(marker) 150 .fitBounds(<?= json_encode($map_bounds, JSON_THROW_ON_ERROR) ?>, {padding: [50, 30]}) 151 .on('zoomend', function () { 152 if (!map.getBounds().contains(marker.getLatLng())) { 153 map.panTo(marker.getLatLng()); 154 } 155 }); 156 157 document.querySelectorAll('.editable').forEach((element) => { 158 element.addEventListener('change', () => { 159 let lat = new_place_lati.value; 160 let lng = new_place_long.value; 161 marker.setLatLng([lat, lng]); 162 map.panTo([lat, lng]); 163 }); 164 }); 165 166 window.onload = function() { 167 let icon = document.querySelector('.leaflet-control-geocoder-icon'); 168 icon.setAttribute('title', <?= json_encode(I18N::translate('Search'), JSON_THROW_ON_ERROR) ?>); 169 } 170 })(); 171</script> 172<?php View::endpush() ?> 173