1<?php use Fisharebest\Webtrees\I18N; ?> 2<?php use Fisharebest\Webtrees\View; ?> 3 4<?= view('components/breadcrumbs', ['links' => $breadcrumbs]) ?> 5 6<h1><?= $title ?></h1> 7 8<div class="form-group row"> 9 <div class="col-sm-10 offset-sm-1"> 10 <div id="osm-map" class="wt-ajax-load col-sm-12 osm-admin-map"></div> 11 </div> 12</div> 13 14<form method="post"> 15 <?= csrf_field() ?> 16 <input type="hidden" name="place_id" value="<?= e($place_id) ?>"> 17 <input type="hidden" name="level" value="<?= count($hierarchy) ?>"> 18 <input type="hidden" name="place_long" value="<?= e($lng) ?>"> 19 <input type="hidden" name="place_lati" value="<?= e($lat) ?>"> 20 21 <div class="form-group row"> 22 <label class="col-form-label col-sm-1" for="new_place_name"> 23 <?= I18N::translate('Place') ?> 24 </label> 25 <div class="col-sm-5"> 26 <input type="text" id="new_place_name" name="new_place_name" value="<?= e($location->locationName()) ?>" 27 class="form-control" required> 28 </div> 29 <label class="col-form-label col-sm-1" for="icon"> 30 <?= I18N::translate('Flag') ?> 31 </label> 32 <div class="col-sm-4"> 33 <div class="input-group" dir="ltr"> 34 <input type="text" name="icon" id="icon" class="form-control" value="<?= e($location->icon()) ?>"> 35 </div> 36 </div> 37 </div> 38 39 <div class="form-group row"> 40 <label class="col-form-label col-sm-1" for="new_place_lati"> 41 <?= I18N::translate('Latitude') ?> 42 </label> 43 <div class="col-sm-3"> 44 <div class="input-group"> 45 <input type="text" dir="ltr" id="new_place_lati" class="editable form-control" name="new_place_lati" required 46 placeholder="<?= I18N::translate('degrees') ?>" value="<?= e($lat) ?>" 47 > 48 </div> 49 </div> 50 51 <label class="col-form-label col-sm-1" for="new_place_long"> 52 <?= I18N::translate('Longitude') ?> 53 </label> 54 <div class="col-sm-3"> 55 <div class="input-group"> 56 <input type="text" dir="ltr" id="new_place_long" class="editable form-control" name="new_place_long" required 57 placeholder="<?= I18N::translate('degrees') ?>" value="<?= e($lng) ?>" 58 > 59 </div> 60 </div> 61 <label class="col-form-label col-sm-1" for="new_zoom_factor"> 62 <?= I18N::translate('Zoom') ?> 63 </label> 64 <div class="col-sm-2"> 65 <input type="text" id="new_zoom_factor" name="new_zoom_factor" value="<?= e($location->zoom()) ?>" 66 class="form-control" required readonly> 67 </div> 68 </div> 69 70 <div class="form-group row"> 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(route('map-data', ['parent_id' => $parent_id])) ?>"> 78 <?= I18N::translate('cancel') ?> 79 </a> 80 </div> 81 </div> 82</form> 83 84<?php View::push('styles') ?> 85<style> 86 .osm-wrapper, .osm-user-map { 87 height: 45vh 88 } 89 90 .osm-admin-map { 91 height: 55vh; 92 border: 1px solid darkGrey 93 } 94 95 .osm-sidebar { 96 height: 100%; 97 overflow-y: auto; 98 padding: 0; 99 margin: 0; 100 border: 0; 101 display: none; 102 font-size: small; 103 } 104 105 .osm-sidebar .gchart { 106 margin: 1px; 107 padding: 2px 108 } 109 110 .osm-sidebar .gchart img { 111 height: 15px; 112 width: 25px 113 } 114 115 .osm-sidebar .border-danger:hover { 116 cursor: not-allowed 117 } 118</style> 119<?php View::endpush() ?> 120 121<?php View::push('javascript') ?> 122<script type="application/javascript"> 123 "use strict"; 124 125 window.WT_OSM_ADMIN = (function () { 126 let baseData = { 127 minZoom: 2, 128 providerName: "OpenStreetMap.Mapnik", 129 providerOptions: [], 130 I18N: { 131 zoomInTitle: <?= json_encode(I18N::translate('Zoom in')) ?>, 132 zoomOutTitle: <?= json_encode(I18N::translate('Zoom out')) ?>, 133 reset: <?= json_encode(I18N::translate('Reset to initial map state')) ?>, 134 noData: <?= json_encode(I18N::translate('No mappable items')) ?>, 135 error: <?= json_encode(I18N::translate('An unknown error occurred')) ?> 136 } 137 }; 138 139 let map = null; 140 let marker = L.marker([0, 0], { 141 draggable: true, 142 }); 143 /** 144 * 145 * @private 146 */ 147 let _drawMap = function () { 148 map = L.map("osm-map", { 149 center: [0, 0], 150 minZoom: baseData.minZoom, // maxZoom set by leaflet-providers.js 151 zoomControl: false, // remove default 152 }, 153 ); 154 L.tileLayer.provider(baseData.providerName, baseData.providerOptions).addTo(map); 155 L.control.zoom({ // Add zoom with localised text 156 zoomInTitle: baseData.I18N.zoomInTitle, 157 zoomOutTitle: baseData.I18N.zoomOutTitle, 158 }).addTo(map); 159 160 marker 161 .on("dragend", function (e) { 162 let coords = marker.getLatLng(); 163 map.panTo(coords); 164 _update_Controls({ 165 place: "", 166 coords: coords, 167 zoom: map.getZoom(), 168 }); 169 }) 170 .addTo(map); 171 let searchControl = new window.GeoSearch.GeoSearchControl({ 172 provider: new window.GeoSearch.OpenStreetMapProvider(), 173 retainZoomLevel: true, 174 autoClose: true, 175 showMarker: false, 176 }); 177 178 map 179 .addControl(searchControl) 180 .on("geosearch/showlocation", function (result) { 181 let lat = result.location.y; 182 let lng = result.location.x; 183 let place = result.location.label.split(",", 1); 184 185 marker.setLatLng([lat, lng]); 186 map.panTo([lat, lng]); 187 188 _update_Controls({ 189 place: place.shift(), 190 coords: { 191 "lat": lat, 192 "lng": lng, 193 }, 194 zoom: map.getZoom(), 195 }); 196 }) 197 .on("zoomend", function (e) { 198 $("#new_zoom_factor").val(map.getZoom()); 199 map.panTo(marker.getLatLng()); 200 }); 201 }; 202 203 let data = <?= json_encode($data) ?>; 204 205 /** 206 * 207 * @param newData 208 * @private 209 */ 210 let _update_Controls = function (newData) { 211 let placeEl = $("#new_place_name"); 212 if (!placeEl.val().length && newData.place.length) { 213 placeEl.val(newData.place); 214 } 215 $("#new_place_lati").val(Number(newData.coords.lat).toFixed(5)); // 5 decimal places (about 1 metre accuracy) 216 $("#new_place_long").val(Number(newData.coords.lng).toFixed(5)); 217 $("#new_zoom_factor").val(Number(newData.zoom)); 218 }; 219 220 $(function () { 221 $(".editable").on("change", function (e) { 222 let lat = $("#new_place_lati").val(); 223 let lng = $("#new_place_long").val(); 224 marker.setLatLng([lat, lng]); 225 map.panTo([lat, lng]); 226 }); 227 }); 228 229 /** 230 * 231 * @param id 232 */ 233 let initialize = function (id) { 234 _drawMap(); 235 236 marker.setLatLng(data.coordinates); 237 238 if (data.coordinates[0] === 0 && data.coordinates[1] === 0) { 239 map.fitWorld(); 240 } else { 241 map.setView(data.coordinates, data.zoom); 242 } 243 }; 244 245 return { 246 /** 247 * 248 * @param id 249 */ 250 drawMap: function (id) { 251 initialize(id); 252 }, 253 }; 254 })(); 255 256 WT_OSM_ADMIN.drawMap(<?= json_encode($ref) ?>); 257</script> 258<?php View::endpush() ?> 259