Merge pull request #344 from EarthJournalismNetwork/bugfix/layers-bac…

…kend-order Add filter to reorder selected layers based on map order
InfoAmazonia · Mar 4, 2021 · 843360f · 843360f
2 parents 46515d8 + 4d1ca99
commit 843360f
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 11 deletions.
diff --git a/src/js/src/map-blocks/storymap-display.js b/src/js/src/map-blocks/storymap-display.js
@@ -291,7 +291,6 @@ class StoryMapDisplay extends Component {
 
     render() {
 		const mapStart = config.chapters[ 0 ].location;
-		console.log("mapStart", mapStart);
         const theme = config.theme;
 		const currentChapterID = this.state.currentChapter.id;
 		const dateOptions = { year: 'numeric', month: 'long', day: 'numeric' };

diff --git a/src/js/src/map-blocks/storymap-editor.js b/src/js/src/map-blocks/storymap-editor.js
@@ -105,14 +105,40 @@ const MapEditor = ( {
 					}
 				})
 
+				const newOrder = [];
+
+				loadedMap.meta.layers.forEach(mapLayer => {
+					const foundLayer = slide.selectedLayers.find(layer => layer.id === mapLayer.id );
+					if( foundLayer ) {
+						newOrder.push(foundLayer);
+					}
+				})
+
+				slide.selectedLayers = newOrder;
+
 				return slide;
 			})
 
+			let navigateMapLayers = loadedLayers.filter(layer => loadedMap.meta.layers.some(mapLayer => mapLayer.id === layer.id ))
+			const newLayers = []
+
+			loadedMap.meta.layers.forEach(mapLayer => {
+				const foundLayer = navigateMapLayers.find(layer => layer.id === mapLayer.id );
+				if( foundLayer ) {
+					newLayers.push(foundLayer);
+				}
+			})
+
+			// console.log("newLayers", JSON.parse(JSON.stringify(newLayers)));
+			// console.log("navigateMapLayers", navigateMapLayers);
+
+			navigateMapLayers = newLayers;
+
 			setAttributes( {
 				...attributes,
 				slides: newSlides,
 				loadedLayers,
-				navigateMapLayers: loadedLayers.filter(layer => loadedMap.meta.layers.some(mapLayer => mapLayer.id === layer.id )),
+				navigateMapLayers,
 			} );
 
 			return;
@@ -217,15 +243,16 @@ const MapEditor = ( {
 						>
 							{ attributes.slides[ currentSlideIndex ].selectedLayers.map(
 								( layer ) => {
-									const layerOptions = attributes.navigateMapLayers.find(
-										( { id } ) => id === layer.id
-									);
-									// console.log(layerOptions);
-									if ( layerOptions ) {
-										return renderLayer( {
-											layer: layerOptions.meta,
-											instance: layer,
-										} );
+									if(attributes.navigateMapLayers) {
+										const layerOptions = attributes.navigateMapLayers.find(
+											( { id } ) => id === layer.id
+										);
+										if ( layerOptions ) {
+											return renderLayer( {
+												layer: layerOptions.meta,
+												instance: layer,
+											} );
+										}
 									}
 								}
 							) }