xref: /webtrees/resources/views/modules/place-hierarchy/map.phtml (revision b7b71725c00e545f55686e19948ab12c8a573982)

<?php

use Fisharebest\Webtrees\View;

/**
 * @var array<mixed> $data
 * @var object       $leaflet_config
 */

?>

<div class="row gchart wt-place-hierarchy-wrapper">
    <div id="wt-map" class="col-sm-9 wt-ajax-load wt-map wt-place-hierarchy-map" dir="ltr"></div>
    <ul class="col-sm-3 wt-place-hierarchy-sidebar wt-page-options-value list-unstyled px-md-1"></ul>
</div>

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

  (function () {
    const config = <?= json_encode($leaflet_config, JSON_THROW_ON_ERROR) ?>;

    let map = null;
    const sidebar = document.querySelector('.wt-place-hierarchy-sidebar');

    const scrollOptions = {
      behavior: "smooth",
      block: "start",
      inline: "start"
    };

    // Map components
    let markers = L.markerClusterGroup({
      showCoverageOnHover: false,
    });

    /**
     * Passed to resetControl to
     * perform necessary reset actions on map
     */
     let resetCallback = function () {
      map.flyToBounds(markers.getBounds(), {padding: [50, 30], maxZoom: 15 });
      sidebar.firstElementChild.scrollIntoView(scrollOptions);
    }

    /**
     * @private
     */
    let _drawMap = function () {
      map = webtrees.buildLeafletJsMap('wt-map', config, resetCallback);
    };

    /**
     * @private
     */
    let _buildMapData = function () {
      let data = <?= json_encode($data['markers'], JSON_THROW_ON_ERROR) ?>;

      let geoJsonLayer = L.geoJson(data, {
        pointToLayer: function (feature, latlng) {
          return new L.Marker(latlng, {
            icon: L.BeautifyIcon.icon({
              icon: 'bullseye fas',
              borderColor: 'transparent',
              backgroundColor: '#1e90ff',
              iconShape: 'marker',
              textColor: 'white',
            }),
            title: feature.properties.tooltip,
            alt: feature.properties.tooltip,
            id: feature.id,
          })
            .on('popupopen', function (e) {
              let item = document.querySelector('.mapped[data-wt-feature-id="' + e.target.feature.id + '"]');
              item.classList.add('messagebox');
              item.scrollIntoView(scrollOptions);
            })
            .on('popupclose', function () {
              sidebar.querySelectorAll('.mapped').forEach(e => e.classList.remove('messagebox'));
              sidebar.firstElementChild.scrollIntoView(scrollOptions);
            });
        },
        onEachFeature: function (feature, layer) {
          layer.bindPopup(feature.properties.popup);
        },
      });

      if (data.features.length > 0) {
        markers.addLayer(geoJsonLayer);
        map.addLayer(markers);
      }

      map.fitBounds(<?= json_encode($data['bounds'], JSON_THROW_ON_ERROR) ?>, { padding: [50, 30] });
      sidebar.innerHTML = <?= json_encode($data['sidebar'], JSON_THROW_ON_ERROR) ?>;
   };

    window.onload = function() {
      // Activate marker popup when sidebar entry clicked
      sidebar.querySelectorAll('.mapped').forEach((element) => {
        var eventId = parseInt(element.dataset.wtFeatureId);

        element.addEventListener('click', () => {
          // first close any existing
          map.closePopup();
          //find the marker corresponding to the clicked event
          let mkrLayer = markers.getLayers().filter(function (v) {
            return v.feature !== undefined && v.feature.id === eventId;
          });

          let mkr = mkrLayer.pop();

          markers.zoomToShowLayer(mkr, function (e) {
            mkr.openPopup();
          });

          return false;
        });

        // stop clicking on a person also opening the popup
        element.querySelectorAll('a').forEach((el) => {
          el.addEventListener('click', (e) => {
            e.stopPropagation();
          });
        });
      });
    }

    _drawMap();
    _buildMapData();
  })();
</script>
<?php View::endpush() ?>