xref: /webtrees/resources/views/admin/location-edit.phtml (revision 0b4092ed8e31e3588eb143d0ade6c4a411367da8)

<?php use Fisharebest\Webtrees\I18N;
use Fisharebest\Webtrees\View; ?>
<?php ?>

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

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

<div class="form-group row">
    <div class="col-sm-10 offset-sm-1">
        <div id="osm-map" class="wt-ajax-load col-sm-12 osm-admin-map" dir="ltr"></div>
    </div>
</div>

<form method="post">
    <?= csrf_field() ?>
    <input type="hidden" name="place_id" value="<?= e($place_id) ?>">
    <input type="hidden" name="level" value="<?= count($hierarchy) ?>">
    <input type="hidden" name="place_long" value="<?= e($lng) ?>">
    <input type="hidden" name="place_lati" value="<?= e($lat) ?>">

    <div class="form-group row">
        <label class="col-form-label col-sm-1" for="new_place_name">
            <?= I18N::translate('Place') ?>
        </label>
        <div class="col-sm-5">
            <input type="text" id="new_place_name" name="new_place_name" value="<?= e($location->locationName()) ?>"
            class="form-control" required>
        </div>
        <label class="col-form-label col-sm-1" for="icon">
            <?= I18N::translate('Flag') ?>
        </label>
        <div class="col-sm-4">
            <div class="input-group" dir="ltr">
                <input type="text" name="icon" id="icon" class="form-control" value="<?= e($location->icon()) ?>">
            </div>
        </div>
    </div>

    <div class="form-group row">
        <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" required
                placeholder="<?= I18N::translate('degrees') ?>" value="<?= e($lat) ?>"
                >
            </div>
        </div>

        <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" required
                placeholder="<?= I18N::translate('degrees') ?>" value="<?= e($lng) ?>"
                >
            </div>
        </div>
        <label class="col-form-label col-sm-1" for="new_zoom_factor">
            <?= I18N::translate('Zoom') ?>
        </label>
        <div class="col-sm-2">
            <input type="text" id="new_zoom_factor" name="new_zoom_factor" value="<?= e($location->zoom()) ?>"
            class="form-control" required readonly>
        </div>
    </div>

    <div class="form-group row">
        <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('map-data', ['parent_id' => $parent_id])) ?>">
                <?= I18N::translate('cancel') ?>
            </a>
        </div>
    </div>
</form>

<?php View::push('styles') ?>
<style>
    .osm-wrapper, .osm-user-map {
        height: 45vh
    }

    .osm-admin-map {
        height: 55vh;
        border: 1px solid darkGrey
    }

    .osm-sidebar {
        height: 100%;
        overflow-y: auto;
        padding: 0;
        margin: 0;
        border: 0;
        display: none;
        font-size: small;
    }

    .osm-sidebar .gchart {
        margin: 1px;
        padding: 2px
    }

    .osm-sidebar .gchart img {
        height: 15px;
        width: 25px
    }

    .osm-sidebar .border-danger:hover {
        cursor: not-allowed
    }
</style>
<?php View::endpush() ?>

<?php View::push('javascript') ?>
<script type="application/javascript">
    "use strict";

    window.WT_OSM_ADMIN = (function () {
        let baseData = {
            minZoom:         2,
            providerName:    "OpenStreetMap.Mapnik",
            providerOptions: [],
            I18N:            {
                zoomInTitle: <?= json_encode(I18N::translate('Zoom in')) ?>,
                zoomOutTitle: <?= json_encode(I18N::translate('Zoom out')) ?>,
                reset: <?= json_encode(I18N::translate('Reset to initial map state')) ?>,
                noData: <?= json_encode(I18N::translate('No mappable items')) ?>,
                error: <?= json_encode(I18N::translate('An unknown error occurred')) ?>
            },
        };

        let map      = null;
        let marker   = L.marker([0, 0], {
            draggable: true,
        });
        /**
         *
         * @private
         */
        let _drawMap = function () {
            map = L.map("osm-map", {
                    center:      [0, 0],
                    minZoom:     baseData.minZoom, // maxZoom set by leaflet-providers.js
                    zoomControl: false, // remove default
                },
            );
            L.tileLayer.provider(baseData.providerName, baseData.providerOptions).addTo(map);
            L.control.zoom({ // Add zoom with localised text
                zoomInTitle:  baseData.I18N.zoomInTitle,
                zoomOutTitle: baseData.I18N.zoomOutTitle,
            }).addTo(map);

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

            marker
                .on("dragend", function (e) {
                    let coords = marker.getLatLng();
                    map.panTo(coords);
                    _update_Controls({
                        place:  "",
                        coords: coords,
                        zoom:   map.getZoom(),
                    });
                })
                .addTo(map);
            let searchControl = new window.GeoSearch.GeoSearchControl({
                provider:        new window.GeoSearch.OpenStreetMapProvider(),
                retainZoomLevel: true,
                autoClose:       true,
                showMarker:      false,
            });

            map
                .addControl(searchControl)
                .on("geosearch/showlocation", function (result) {
                    let lat   = result.location.y;
                    let lng   = result.location.x;
                    let place = result.location.label.split(",", 1);

                    marker.setLatLng([lat, lng]);
                    map.panTo([lat, lng]);

                    _update_Controls({
                        place:  place.shift(),
                        coords: {
                            "lat": lat,
                            "lng": lng,
                        },
                        zoom:   map.getZoom(),
                    });
                })
                .on("zoomend", function (e) {
                    $("#new_zoom_factor").val(map.getZoom());
                    map.panTo(marker.getLatLng());
                });
        };

        let data = <?= json_encode($data) ?>;

        /**
         *
         * @param newData
         * @private
         */
        let _update_Controls = function (newData) {
            let placeEl = $("#new_place_name");
            if (!placeEl.val().length && newData.place.length) {
                placeEl.val(newData.place);
            }
            $("#new_place_lati").val(Number(newData.coords.lat).toFixed(5)); // 5 decimal places (about 1 metre accuracy)
            $("#new_place_long").val(Number(newData.coords.lng).toFixed(5));
            $("#new_zoom_factor").val(Number(newData.zoom));
        };

        $(function () {
            $(".editable").on("change", function (e) {
                let lat = $("#new_place_lati").val();
                let lng = $("#new_place_long").val();
                marker.setLatLng([lat, lng]);
                map.panTo([lat, lng]);
            });
        });

        /**
         *
         * @param id
         */
        let initialize = function (id) {
            _drawMap();

            marker.setLatLng(data.coordinates);

            if (data.coordinates[0] === 0 && data.coordinates[1] === 0) {
                map.fitWorld();
            } else {
                map.setView(data.coordinates, data.zoom);
            }
        };

        return {
            /**
             *
             * @param id
             */
            drawMap: function (id) {
                initialize(id);
            },
        };
    })();

    WT_OSM_ADMIN.drawMap(<?= json_encode($ref) ?>);
</script>
<?php View::endpush() ?>