Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Pedigree map, provide ability to switch the parent-child lines on or off #4211

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Pedigree map, provide ability to switch the parent-child lines on or off #4211

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b1b6e76
For pedigree map, put polylines on a separate LayerGroup that can be …
ddrury Feb 10, 2022
711b632
codestyle
ddrury Feb 10, 2022
cbf14da
Make code in webtrees.js more generic by shifting creation of overlay…
ddrury Feb 12, 2022
f9acd66
Simplify code
ddrury Feb 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 6 additions & 7 deletions app/Module/PedigreeMapModule.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -242,6 +242,7 @@ private function getMapData(ServerRequestInterface $request): array
];

$sosa_points = [];
$lines = [];

foreach ($facts as $sosa => $fact) {
$location = new PlaceLocation($fact->place()->gedcomName());
Expand All @@ -257,16 +258,12 @@ private function getMapData(ServerRequestInterface $request): array
}

if ($latitude !== null && $longitude !== null) {
$polyline = null;
$sosa_points[$sosa] = [$latitude, $longitude];
$sosa_child = intdiv($sosa, 2);
$color = 'var(--wt-pedigree-map-gen-' . $sosa_child % self::GENERATION_COLORS . ')';

if (array_key_exists($sosa_child, $sosa_points)) {
// Would like to use a GeometryCollection to hold LineStrings
// rather than generate polylines but the MarkerCluster library
// doesn't seem to like them
$polyline = [
$lines[] = [
'points' => [
$sosa_points[$sosa_child],
[$latitude, $longitude],
Expand All @@ -284,7 +281,6 @@ private function getMapData(ServerRequestInterface $request): array
'coordinates' => [$longitude, $latitude],
],
'properties' => [
'polyline' => $polyline,
'iconcolor' => $color,
'tooltip' => $fact->place()->gedcomName(),
'summary' => view('modules/pedigree-map/events', [
Expand All @@ -297,7 +293,10 @@ private function getMapData(ServerRequestInterface $request): array
}
}

return $geojson;
return [
'geoJSON' => $geojson,
'polylines' => $lines,
];
}

/**
Expand Down
12 changes: 10 additions & 2 deletions resources/js/webtrees.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -623,9 +623,11 @@
* @param {string} id
* @param {object} config
* @param {function} resetCallback
* @param {array|undefined} overlay
* @returns Map
*/
webtrees.buildLeafletJsMap = function (id, config, resetCallback) {
webtrees.buildLeafletJsMap = function (id, config, resetCallback, overlay) {

const zoomControl = new L.control.zoom({
zoomInTitle: config.i18n.zoomIn,
zoomoutTitle: config.i18n.zoomOut,
Expand Down Expand Up @@ -671,6 +673,11 @@
let defaultLayer = config.mapProviders[0].children[0].layer;
}

//Create a dummy overlay if not defined
overlay = overlay || {
layer: new L.LayerGroup(),
tree: null
};

// Create the map with all controls and layers
return L.map(id, {
Expand All @@ -679,7 +686,8 @@
.addControl(zoomControl)
.addControl(new resetControl())
.addLayer(defaultLayer)
.addControl(L.control.layers.tree(config.mapProviders, null, {
.addLayer(overlay.layer)
.addControl(L.control.layers.tree(config.mapProviders, overlay.tree, {
closedSymbol: config.icons.expand,
openedSymbol: config.icons.collapse,
}));
Expand Down
26 changes: 20 additions & 6 deletions resources/views/modules/pedigree-map/chart.phtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ use Fisharebest\Webtrees\View;

(function () {
const config = <?= json_encode($leaflet_config, JSON_THROW_ON_ERROR) ?>;
const polylines = <?= json_encode($data['polylines'], JSON_THROW_ON_ERROR) ?>;
const sidebar = document.querySelector('.wt-pedigree-map-sidebar');

const scrollOptions = {
Expand All @@ -35,6 +36,23 @@ use Fisharebest\Webtrees\View;
showCoverageOnHover: false,
});

// Add the polylines to a separate layer
let features = {
layer: new L.LayerGroup(),
tree: null
}

polylines.forEach((line) => {
features.layer.addLayer(L.polyline(line.points, line.options));
});

if (polylines.length) {
features.tree = {
label: '<?= I18N::translate("Show/Hide parent to child lines") ?>',
layer: features.layer
}
}

/**
* Passed to resetControl to
* perform necessary reset actions on map
Expand All @@ -49,15 +67,15 @@ use Fisharebest\Webtrees\View;
* @private
*/
let _drawMap = function () {
map = webtrees.buildLeafletJsMap('wt-map', config, resetCallback);
map = webtrees.buildLeafletJsMap('wt-map', config, resetCallback, features);
};

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

if (geoJson_data.features.length === 0) {
map.fitWorld();
Expand Down Expand Up @@ -89,10 +107,6 @@ use Fisharebest\Webtrees\View;
});
},
onEachFeature: function (feature, layer) {
if (feature.properties.polyline) {
let pline = L.polyline(feature.properties.polyline.points, feature.properties.polyline.options);
markers.addLayer(pline);
}
layer.bindPopup(feature.properties.summary);
sidebar.innerHTML += `<li class="gchart px-md-2" data-wt-feature-id=${feature.id}>${feature.properties.summary}</li>`;
},
Expand Down