From b1b6e76e1bd72078dd10e5f13cb9ecfe53b4a5a8 Mon Sep 17 00:00:00 2001 From: David Drury Date: Thu, 10 Feb 2022 11:51:38 +0000 Subject: [PATCH 1/4] For pedigree map, put polylines on a separate LayerGroup that can be switched on or off in the control.layers.tree --- resources/js/webtrees.js | 19 +++++++++++++++++-- .../views/modules/pedigree-map/chart.phtml | 19 ++++++++++++------- 2 files changed, 29 insertions(+), 9 deletions(-) diff --git a/resources/js/webtrees.js b/resources/js/webtrees.js index 3486fd22475..4b6c0d05db3 100644 --- a/resources/js/webtrees.js +++ b/resources/js/webtrees.js @@ -623,9 +623,11 @@ * @param {string} id * @param {object} config * @param {function} resetCallback + * @param {array|undefined} polylines * @returns Map */ - webtrees.buildLeafletJsMap = function (id, config, resetCallback) { + webtrees.buildLeafletJsMap = function (id, config, resetCallback, polylines) { + const zoomControl = new L.control.zoom({ zoomInTitle: config.i18n.zoomIn, zoomoutTitle: config.i18n.zoomOut, @@ -671,6 +673,18 @@ let defaultLayer = config.mapProviders[0].children[0].layer; } + let featureLayer = new L.LayerGroup(); + let overlaysTree = null; + if (polylines !== undefined && polylines.length) { + polylines.forEach(function (line) { + featureLayer.addLayer(L.polyline(line.points, line.options)); + }); + + overlaysTree = { + label: config.i18n.showLines ?? '?', + layer: featureLayer, + }; + } // Create the map with all controls and layers return L.map(id, { @@ -679,7 +693,8 @@ .addControl(zoomControl) .addControl(new resetControl()) .addLayer(defaultLayer) - .addControl(L.control.layers.tree(config.mapProviders, null, { + .addLayer(featureLayer) + .addControl(L.control.layers.tree(config.mapProviders, overlaysTree, { closedSymbol: config.icons.expand, openedSymbol: config.icons.collapse, })); diff --git a/resources/views/modules/pedigree-map/chart.phtml b/resources/views/modules/pedigree-map/chart.phtml index 89f4cc7d6ba..ef4a76d2fff 100644 --- a/resources/views/modules/pedigree-map/chart.phtml +++ b/resources/views/modules/pedigree-map/chart.phtml @@ -20,8 +20,11 @@ use Fisharebest\Webtrees\View; (function () { const config = ; + const geoJson_data = ; const sidebar = document.querySelector('.wt-pedigree-map-sidebar'); + config.i18n.showLines = ''; + const scrollOptions = { behavior: "smooth", block: "start", @@ -35,6 +38,14 @@ use Fisharebest\Webtrees\View; showCoverageOnHover: false, }); + let polyLines = []; + + geoJson_data.features.forEach((feature) => { + if (feature.properties.polyline) { + polyLines.push(feature.properties.polyline); + } + }); + /** * Passed to resetControl to * perform necessary reset actions on map @@ -49,7 +60,7 @@ use Fisharebest\Webtrees\View; * @private */ let _drawMap = function () { - map = webtrees.buildLeafletJsMap('wt-map', config, resetCallback); + map = webtrees.buildLeafletJsMap('wt-map', config, resetCallback, polyLines); }; /** @@ -57,8 +68,6 @@ use Fisharebest\Webtrees\View; * @private */ let _buildMapData = function () { - let geoJson_data = ; - if (geoJson_data.features.length === 0) { map.fitWorld(); sidebar.innerHTML = '
' + + '
'; @@ -89,10 +98,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 += `
  • ${feature.properties.summary}
    • `; }, From 711b632422348afc4bea5458952c95e355679b92 Mon Sep 17 00:00:00 2001 From: David Drury Date: Thu, 10 Feb 2022 21:34:23 +0000 Subject: [PATCH 2/4] codestyle --- resources/js/webtrees.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/js/webtrees.js b/resources/js/webtrees.js index 4b6c0d05db3..705611ef4fc 100644 --- a/resources/js/webtrees.js +++ b/resources/js/webtrees.js @@ -676,7 +676,7 @@ let featureLayer = new L.LayerGroup(); let overlaysTree = null; if (polylines !== undefined && polylines.length) { - polylines.forEach(function (line) { + polylines.forEach((line) => { featureLayer.addLayer(L.polyline(line.points, line.options)); }); From cbf14da00360e89029c51ea41d19a4daf85e45de Mon Sep 17 00:00:00 2001 From: David Drury Date: Sat, 12 Feb 2022 11:27:17 +0000 Subject: [PATCH 3/4] Make code in webtrees.js more generic by shifting creation of overlay to the pedigree map view --- resources/js/webtrees.js | 23 +++++++------------ .../views/modules/pedigree-map/chart.phtml | 20 +++++++++++----- 2 files changed, 22 insertions(+), 21 deletions(-) diff --git a/resources/js/webtrees.js b/resources/js/webtrees.js index 705611ef4fc..e8d86bcd37c 100644 --- a/resources/js/webtrees.js +++ b/resources/js/webtrees.js @@ -623,10 +623,10 @@ * @param {string} id * @param {object} config * @param {function} resetCallback - * @param {array|undefined} polylines + * @param {array|undefined} overlay * @returns Map */ - webtrees.buildLeafletJsMap = function (id, config, resetCallback, polylines) { + webtrees.buildLeafletJsMap = function (id, config, resetCallback, overlay) { const zoomControl = new L.control.zoom({ zoomInTitle: config.i18n.zoomIn, @@ -673,18 +673,11 @@ let defaultLayer = config.mapProviders[0].children[0].layer; } - let featureLayer = new L.LayerGroup(); - let overlaysTree = null; - if (polylines !== undefined && polylines.length) { - polylines.forEach((line) => { - featureLayer.addLayer(L.polyline(line.points, line.options)); - }); - - overlaysTree = { - label: config.i18n.showLines ?? '?', - layer: featureLayer, + //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, { @@ -693,8 +686,8 @@ .addControl(zoomControl) .addControl(new resetControl()) .addLayer(defaultLayer) - .addLayer(featureLayer) - .addControl(L.control.layers.tree(config.mapProviders, overlaysTree, { + .addLayer(overlay.layer) + .addControl(L.control.layers.tree(config.mapProviders, overlay.tree, { closedSymbol: config.icons.expand, openedSymbol: config.icons.collapse, })); diff --git a/resources/views/modules/pedigree-map/chart.phtml b/resources/views/modules/pedigree-map/chart.phtml index ef4a76d2fff..54742521ebd 100644 --- a/resources/views/modules/pedigree-map/chart.phtml +++ b/resources/views/modules/pedigree-map/chart.phtml @@ -23,8 +23,6 @@ use Fisharebest\Webtrees\View; const geoJson_data = ; const sidebar = document.querySelector('.wt-pedigree-map-sidebar'); - config.i18n.showLines = ''; - const scrollOptions = { behavior: "smooth", block: "start", @@ -38,11 +36,21 @@ use Fisharebest\Webtrees\View; showCoverageOnHover: false, }); - let polyLines = []; + // Add the polylines to a separate layer + let features = { + layer: new L.LayerGroup(), + tree: null + } geoJson_data.features.forEach((feature) => { - if (feature.properties.polyline) { - polyLines.push(feature.properties.polyline); + if (feature.properties.polyline) { + features.layer.addLayer(L.polyline(feature.properties.polyline.points, feature.properties.polyline.options)); + if (!features.tree) { + features.tree = { + label: '', + layer: features.layer + } + } } }); @@ -60,7 +68,7 @@ use Fisharebest\Webtrees\View; * @private */ let _drawMap = function () { - map = webtrees.buildLeafletJsMap('wt-map', config, resetCallback, polyLines); + map = webtrees.buildLeafletJsMap('wt-map', config, resetCallback, features); }; /** From f9acd664de0c220f6bc93044c0ca34bd3b0e4896 Mon Sep 17 00:00:00 2001 From: David Drury Date: Wed, 16 Feb 2022 11:32:45 +0000 Subject: [PATCH 4/4] Simplify code --- app/Module/PedigreeMapModule.php | 13 +++++------ .../views/modules/pedigree-map/chart.phtml | 23 ++++++++++--------- 2 files changed, 18 insertions(+), 18 deletions(-) diff --git a/app/Module/PedigreeMapModule.php b/app/Module/PedigreeMapModule.php index 9a49270d43f..d26020f147c 100644 --- a/app/Module/PedigreeMapModule.php +++ b/app/Module/PedigreeMapModule.php @@ -242,6 +242,7 @@ private function getMapData(ServerRequestInterface $request): array ]; $sosa_points = []; + $lines = []; foreach ($facts as $sosa => $fact) { $location = new PlaceLocation($fact->place()->gedcomName()); @@ -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], @@ -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', [ @@ -297,7 +293,10 @@ private function getMapData(ServerRequestInterface $request): array } } - return $geojson; + return [ + 'geoJSON' => $geojson, + 'polylines' => $lines, + ]; } /** diff --git a/resources/views/modules/pedigree-map/chart.phtml b/resources/views/modules/pedigree-map/chart.phtml index 54742521ebd..be3ed562fd4 100644 --- a/resources/views/modules/pedigree-map/chart.phtml +++ b/resources/views/modules/pedigree-map/chart.phtml @@ -20,7 +20,7 @@ use Fisharebest\Webtrees\View; (function () { const config = ; - const geoJson_data = ; + const polylines = ; const sidebar = document.querySelector('.wt-pedigree-map-sidebar'); const scrollOptions = { @@ -42,18 +42,17 @@ use Fisharebest\Webtrees\View; tree: null } - geoJson_data.features.forEach((feature) => { - if (feature.properties.polyline) { - features.layer.addLayer(L.polyline(feature.properties.polyline.points, feature.properties.polyline.options)); - if (!features.tree) { - features.tree = { - label: '', - layer: features.layer - } - } - } + polylines.forEach((line) => { + features.layer.addLayer(L.polyline(line.points, line.options)); }); + if (polylines.length) { + features.tree = { + label: '', + layer: features.layer + } + } + /** * Passed to resetControl to * perform necessary reset actions on map @@ -76,6 +75,8 @@ use Fisharebest\Webtrees\View; * @private */ let _buildMapData = function () { + const geoJson_data = ; + if (geoJson_data.features.length === 0) { map.fitWorld(); sidebar.innerHTML = '
    ' + + '
    ';