Merge pull request #221 from Seshat-Global-History-Databank/fix-219

Update methods for Seshat page navigation on world map

seshat/apps/core/static/core/js/map_functions.js

@@ -360,6 +360,23 @@ function updateLegend() {
             shape_name_col_dict = {};
             shape_name_col_dict['polity'] = shape.name;
             shape_name_col_dict['colour'] = shape.colour;
+            if (shape.seshat_id in seshat_id_page_id) {
+                var polityId = seshat_id_page_id[shape.seshat_id]['id'];
+                shape_name_col_dict['link'] = '<a href="/core/polity/' + polityId + '" target="_blank">' + shape.name + '</a>';
+            } else if (shape.seshat_id.includes(';')) {
+                var polityIds = shape.seshat_id.split(';');
+                var polityLinks = [];
+                polityIds.forEach(function (polityId) {
+                    if (polityId in seshat_id_page_id) {
+                        polityLinks.push('<a href="/core/polity/' + seshat_id_page_id
+                            [polityId]['id'] + '" target="_blank">' + polityId + '</a>');
+                    }
+                }
+                );
+                shape_name_col_dict['link'] = shape.name + '; ' + polityLinks.join('; ');
+            } else {
+                shape_name_col_dict['link'] = shape.name;
+            }
             if (shape.weight > 0 && !addedPolityNames.includes(shape_name_col_dict['polity'])) {
                 // If the shape spans the selected year and should be displayed according to the shouldDisplayComponent() function
                 if ((parseInt(shape.start_year) <= selectedYearInteger && parseInt(shape.end_year) >= selectedYearInteger)
@@ -402,7 +419,7 @@ function updateLegend() {
                 colorBox.style.border = '1px solid black';
                 colorBox.style.marginRight = '10px';
                 legendItem.appendChild(colorBox);
-                legendItem.appendChild(document.createTextNode(addedPolities[i].polity));
+                legendItem.innerHTML += addedPolities[i].link; // Treat link as HTML
                 polityContainer.appendChild(legendItem); // Append to the container
             }
 

seshat/apps/core/templates/core/world_map.html

@@ -153,7 +153,7 @@
         position: absolute;
         top: 7%;
         left: 3.8%;
-        z-index: 999;
+        z-index: 9999;
         max-height: 100%; /* Ensure it doesn't exceed the parent div height */
         overflow-y: auto; /* Add vertical scroll if content overflows */
         margin-top: 10px;
@@ -501,7 +501,7 @@ <h1 class="text-teal sliderDate" id="sliderDate2"></h1>
                             <input type="number" id="enterYear" name="enterYear" value="{{ display_year }}" style="width: 75px;" onchange="storeYear()">
                             <p style="display: inline; margin-left: 5px;">🗣️ <i>Hit enter to set year.</i></p><br>
                             <label for="increment">Play rate (years/second):</label>
-                            <input type="number" id="increment" name="increment" value="10" style="width: 50px;" onchange="playRateValue()">
+                            <input type="number" id="increment" name="increment" value="50" style="width: 50px;" onchange="playRateValue()">
                             <p style="display: inline; margin-left: 5px; width: 250px;">🗣️ <i>Hit enter to set play rate.</i></p><br><br>
                         </fieldset>
                         <div id="baseMapControls">
@@ -528,10 +528,11 @@ <h1 class="text-teal sliderDate" id="sliderDate2"></h1>
                     </div>
                     <div class="help" id="help">
                         <button class="crossButton" onclick="toggleHelp()">❌</button>
-                        <h2>How to use the Seshat World Map</h2>
+                        <h2>🎉 Welcome to the Seshat World Map! 🎉</h2>
+                        <p><b>Take a moment to familiarise yourself with the controls, then close this popup window.</b></p><br>
                         <p><b>🔹 Use the slider at the bottom of the page to adjust the displayed year.</b></p>
                         <p><b>🔹 Use the play controls to quickly increment the year and animate the map through time.</b></p>
-                        <p><b>🔹 Clicking polity shapes adds them to the legend.</b></p>
+                        <p><b>🔹 Click polities on the map to add them to or remove them from the legend.</b></p>
                         <p><b>🔹 Some polities have Seshat pages reachable with double click.</b></p><br>
                         <p><b> The settings gear (⚙️) can be used to access additional controls:</b></p>
                         <p><b>🔹 Use the "Enter year" box to quickly navigate to a specific year.</b></p>
@@ -815,6 +816,9 @@ <h2>How to use the Seshat World Map</h2>
         // Set the default base map to Esri World Imagery
         switchBaseMap();
 
+        // Open the help popup by default
+        toggleHelp();
+
         // Note: these are the choices for the variable values as encoded in sc.models
         // Note: uncoded and no seshat page are both now set to the same colour
         // Note: if you modify this, you should check that updateLegend() is consistent (found in map_functions.js)