From e5d65b513d04be045fa77d49861d15955fa593eb Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Wed, 19 Jun 2024 10:52:09 +0100
Subject: [PATCH 01/48] use duration when start or end year missing for absent
 present vars

---
 seshat/apps/core/templates/core/world_map.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/seshat/apps/core/templates/core/world_map.html b/seshat/apps/core/templates/core/world_map.html
index c4ee1bed8..0b59007e9 100644
--- a/seshat/apps/core/templates/core/world_map.html
+++ b/seshat/apps/core/templates/core/world_map.html
@@ -626,12 +626,12 @@ <h3>Base Map</h3>
                                             let startYear = value[0];
                                             let endYear = value[1];
                                             let variable_value = longAbsentPresentVarName(key);
-                                            // If startYear or endYear are None, state these as uncoded
+                                            // If startYear or endYear are None, set them to the polity start_year or end_year
                                             if (startYear == 'None' || startYear == null) {
-                                                startYear = '[Year Uncoded]'
+                                                startYear = shape.polity_start_year;
                                             }
                                             if (endYear == 'None' || endYear == null) {
-                                                endYear = '[Year Uncoded]'
+                                                endYear = shape.polity_end_year;
                                             }
                                             if (counter == 0) {
                                                 popupContent = popupContent + `

From 71829871a40d1e484165b35d44dfd2270f001769 Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Wed, 19 Jun 2024 11:05:05 +0100
Subject: [PATCH 02/48] rename var

---
 seshat/apps/core/templates/core/world_map.html | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/seshat/apps/core/templates/core/world_map.html b/seshat/apps/core/templates/core/world_map.html
index 0b59007e9..7e214c84d 100644
--- a/seshat/apps/core/templates/core/world_map.html
+++ b/seshat/apps/core/templates/core/world_map.html
@@ -623,28 +623,28 @@ <h3>Base Map</h3>
                                         // Iterate through key/values in the dictionary
                                         var counter = 0;
                                         for (const [key, value] of Object.entries(shape[variable + '_dict'])) {
-                                            let startYear = value[0];
-                                            let endYear = value[1];
+                                            let variableStartYear = value[0];
+                                            let variableEndYear = value[1];
                                             let variable_value = longAbsentPresentVarName(key);
                                             // If startYear or endYear are None, set them to the polity start_year or end_year
-                                            if (startYear == 'None' || startYear == null) {
-                                                startYear = shape.polity_start_year;
+                                            if (variableStartYear == 'None' || variableStartYear == null) {
+                                                variableStartYear = displaystart_year;
                                             }
-                                            if (endYear == 'None' || endYear == null) {
-                                                endYear = shape.polity_end_year;
+                                            if (variableEndYear == 'None' || variableEndYear == null) {
+                                                variableEndYear = displayend_year;
                                             }
                                             if (counter == 0) {
                                                 popupContent = popupContent + `
                                                     <tr>
                                                         <td>${variable}</td>
-                                                        <td>${variable_value} from ${startYear} to ${endYear}</td>
+                                                        <td>${variable_value} from ${variableStartYear} to ${variableEndYear}</td>
                                                     </tr>
                                                 `;
                                             } else {                            
                                                 popupContent = popupContent + `
                                                     <tr>
                                                         <td></td>
-                                                        <td>${variable_value} from ${startYear} to ${endYear}</td>
+                                                        <td>${variable_value} from ${variableStartYear} to ${variableEndYear}</td>
                                                     </tr>
                                                 `;
                                             }

From 9f7e513b67e9e17c8d402436b37d5dc0ed43d1a6 Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Wed, 19 Jun 2024 11:11:42 +0100
Subject: [PATCH 03/48] format BCE/CE correctly

---
 .../apps/core/templates/core/world_map.html   | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/seshat/apps/core/templates/core/world_map.html b/seshat/apps/core/templates/core/world_map.html
index 7e214c84d..7fb9ed194 100644
--- a/seshat/apps/core/templates/core/world_map.html
+++ b/seshat/apps/core/templates/core/world_map.html
@@ -626,13 +626,30 @@ <h3>Base Map</h3>
                                             let variableStartYear = value[0];
                                             let variableEndYear = value[1];
                                             let variable_value = longAbsentPresentVarName(key);
-                                            // If startYear or endYear are None, set them to the polity start_year or end_year
+                                            // If startYear or endYear are None, set them to the polity start year or end year
+                                            // Format the years to BCE/CE
                                             if (variableStartYear == 'None' || variableStartYear == null) {
                                                 variableStartYear = displaystart_year;
+                                            } else {
+                                                if (variableStartYear < 0) {
+                                                    variableStartYear = Math.abs(variableStartYear) + ' BCE';
+                                                } else {
+                                                    variableStartYear = variableStartYear + ' CE';
+                                                }
                                             }
                                             if (variableEndYear == 'None' || variableEndYear == null) {
                                                 variableEndYear = displayend_year;
-                                            }
+                                            } else {
+                                                if (variableEndYear == {{ latest_year }}){
+                                                    variableEndYear = 'Present';
+                                                } else {
+                                                    if (variableEndYear < 0) {
+                                                        variableEndYear = Math.abs(variableEndYear) + ' BCE';
+                                                    } else {
+                                                        variableEndYear = variableEndYear + ' CE';
+                                                    }
+                                                }
+                                            }      
                                             if (counter == 0) {
                                                 popupContent = popupContent + `
                                                     <tr>

From 10ecec774a5e5648efb220cdae85cb24ba7e7be4 Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Wed, 19 Jun 2024 11:39:31 +0100
Subject: [PATCH 04/48] make uncoded and no seshat page the same colour

---
 seshat/apps/core/static/core/js/map_functions.js | 6 ++++++
 seshat/apps/core/templates/core/world_map.html   | 6 ++++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/seshat/apps/core/static/core/js/map_functions.js b/seshat/apps/core/static/core/js/map_functions.js
index 7a584c893..812930447 100644
--- a/seshat/apps/core/static/core/js/map_functions.js
+++ b/seshat/apps/core/static/core/js/map_functions.js
@@ -226,6 +226,9 @@ function updateLegend() {
         legendDiv.appendChild(legendTitle);
 
         for (var key in oneLanguageColourMapping) {
+            if (key === 'No Seshat page') {  // Skip the "No Seshat page" key as it's the same colour as "Uncoded" (see world_map.html)
+                continue;
+            }
             var legendItem = document.createElement('p');
 
             var colorBox = document.createElement('span');
@@ -254,6 +257,9 @@ function updateLegend() {
         legendDiv.appendChild(legendTitle);
 
         for (var key in variableColourMapping) {
+            if (key === 'no seshat page') {  // Skip the "No Seshat page" key as it's the same colour as "Uncoded" (see world_map.html)
+                continue;
+            }
             var legendItem = document.createElement('p');
 
             var colorBox = document.createElement('span');
diff --git a/seshat/apps/core/templates/core/world_map.html b/seshat/apps/core/templates/core/world_map.html
index 7fb9ed194..ce5d2fca7 100644
--- a/seshat/apps/core/templates/core/world_map.html
+++ b/seshat/apps/core/templates/core/world_map.html
@@ -354,13 +354,15 @@ <h3>Base Map</h3>
         var provinceLayers = []; // Keep track of province layers to remove them later
 
         // 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)
         let variableColourMapping = {
             'present': 'green',
             'absent': 'red',
             'P~A': 'orange',
             'A~P': 'blue',
             'unknown': 'yellow',
-            'uncoded': '#ffa2a1',
+            'uncoded': 'grey',
             'no seshat page': 'grey'
         };
 
@@ -369,7 +371,7 @@ <h3>Base Map</h3>
             'Present': '#13d446',
             'Absent': 'red',
             'Unknown': 'yellow',
-            'Uncoded': '#ffa2a1',
+            'Uncoded': 'grey',
             'No Seshat page': 'grey'
         };
 

From 434f886ac0431885ecfed9cf5bb5eb2d1671d748 Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Wed, 19 Jun 2024 11:56:13 +0100
Subject: [PATCH 05/48] make switch variable button consistent

---
 .../apps/core/templates/core/world_map.html   | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/seshat/apps/core/templates/core/world_map.html b/seshat/apps/core/templates/core/world_map.html
index ce5d2fca7..a4b6880ff 100644
--- a/seshat/apps/core/templates/core/world_map.html
+++ b/seshat/apps/core/templates/core/world_map.html
@@ -127,8 +127,8 @@ <h3>Polities</h3>
                         {% endfor %}
                     </select><br>
                     <fieldset id="previouslySelectedVariableFieldset" style="display: none">
-                        <label for="previouslySelectedVariable">Switch to </label>
-                        <button id="previouslySelectedVariable" type="button" onclick="previouslySelectedVariableButton()" style="width: 200px; text-overflow: ellipsis;">Polity</button><br>
+                        <label for="previouslySelectedVariable">Variable: </label>
+                        <button id="previouslySelectedVariable" type="button" onclick="previouslySelectedVariableButton()" style="width: 200px; text-overflow: ellipsis;">Previous variable</button><br>
                     </fieldset>
                     <fieldset id="chooseCategoricalVariableSelectionFieldset">
                         <label for="chooseCategoricalVariableSelection"></label>
@@ -404,12 +404,16 @@ <h3>Base Map</h3>
             if (localStorage.getItem('variable') != variable) {
                 // Update previously selected variable button
                 document.getElementById('previouslySelectedVariable').setAttribute('variableSelection', localStorage.getItem('variable'));
-                if (localStorage.getItem('variable') in categorical_variables || localStorage.getItem('variable') == 'polity'){
-                    // Categorical variables don't have a full name so we need to modify TODO: Make this more consistent
-                    document.getElementById('previouslySelectedVariable').innerHTML = localStorage.getItem('variable').replace(/_/g, ' ').split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
-                } else {
-                    document.getElementById('previouslySelectedVariable').innerHTML = localStorage.getItem('variable')
-                }
+
+                // Set the text of the previously selected variable button
+                // Note: we decided to not use the variabled name and instead keep the button text consistent
+                // if (localStorage.getItem('variable') in categorical_variables || localStorage.getItem('variable') == 'polity'){
+                //     // Categorical variables don't have a full name so we need to modify TODO: Make this more consistent
+                //     document.getElementById('previouslySelectedVariable').innerHTML = localStorage.getItem('variable').replace(/_/g, ' ').split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
+                // } else {
+                //     document.getElementById('previouslySelectedVariable').innerHTML = localStorage.getItem('variable')
+                // }
+
                 document.getElementById('previouslySelectedVariableFieldset').style.display = 'block';
             }
 

From dbbbc13ea092f8498e018125fb5ec5b949497088 Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Wed, 19 Jun 2024 14:14:09 +0100
Subject: [PATCH 06/48] add speed in y/s

---
 .../apps/core/static/core/js/map_functions.js | 22 +++++++++++++++++++
 .../apps/core/templates/core/world_map.html   | 13 +++++++++--
 2 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/seshat/apps/core/static/core/js/map_functions.js b/seshat/apps/core/static/core/js/map_functions.js
index 812930447..6e86468d7 100644
--- a/seshat/apps/core/static/core/js/map_functions.js
+++ b/seshat/apps/core/static/core/js/map_functions.js
@@ -20,6 +20,28 @@ function adjustSliderDown() {
     plotPolities(); // This function is defined differently in the world_map and polity_map templates
 }
 
+function updateSliderValue(value) {
+    var sliderValue = document.getElementById('sliderValue');
+    switch (value) {
+        case '1':
+            sliderValue.textContent = '1 y/s';  // See the values in the startPlay function below
+            break;
+        case '2':
+            sliderValue.textContent = '5 y/s';
+            break;
+        case '3':
+            sliderValue.textContent = '20 y/s';
+            break;
+        case '4':
+            sliderValue.textContent = '50 y/s';
+            break;
+        case '5':
+            sliderValue.textContent = '100 y/s';
+            break;
+    }
+    plotPolities();
+}
+
 function startPlay() {
     stopPlay(); // Clear existing interval before starting a new one
 
diff --git a/seshat/apps/core/templates/core/world_map.html b/seshat/apps/core/templates/core/world_map.html
index a4b6880ff..8965f979f 100644
--- a/seshat/apps/core/templates/core/world_map.html
+++ b/seshat/apps/core/templates/core/world_map.html
@@ -144,8 +144,17 @@ <h3>Polities</h3>
                     <label for="playButton">Run animation:</label>
                     <button id="playButton" type="button" onclick="startPlay()">▶️</button>
                     <button id="stopButton" type="button" onclick="stopPlay()">⏸</button><br>
-                    <label for="playRate">Animation speed:</label>
-                    <input type="range" name="playRate" id="playRate" min="1" max="5" value="2" class="slider" onchange="plotPolities()"><br>
+                    <label for="playRate">Speed: </label>
+                    <input type="range" name="playRate" id="playRate" min="1" max="5" value="2" class="slider" list="tickmarks"
+                        onchange="updateSliderValue(this.value)">
+                    <datalist id="tickmarks">
+                        <option value="1"></option>
+                        <option value="2"></option>
+                        <option value="3"></option>
+                        <option value="4"></option>
+                        <option value="5"></option>
+                    </datalist>
+                    <span id="sliderValue">5 y/s</span><br><br>
                     <label for="opacitySlide">Opacity:</label>
                     <input type="range" name="opacitySlide" id="opacitySlide" min="0.1" max="1" step="0.1" value="0.5" class="slider" onchange="plotPolities()" style="width: 150px;"><br><br>
                     <!-- TODO: Uncomment this when there are more capitals with coordinates in the database -->

From 0e662f36a0d8d074e9c838754e67fa597ae0a982 Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Wed, 19 Jun 2024 14:31:27 +0100
Subject: [PATCH 07/48] simplify instructions

---
 .../apps/core/templates/core/world_map.html   | 20 +------------------
 1 file changed, 1 insertion(+), 19 deletions(-)

diff --git a/seshat/apps/core/templates/core/world_map.html b/seshat/apps/core/templates/core/world_map.html
index 8965f979f..2a8b48da2 100644
--- a/seshat/apps/core/templates/core/world_map.html
+++ b/seshat/apps/core/templates/core/world_map.html
@@ -162,18 +162,7 @@ <h3>Polities</h3>
                     <input type="checkbox" id="showCapitals" name="showCapitals" onclick=plotPolities()><br><br> -->
                 </div>
             </fieldset>
-            <ul>
-                <li>Choose the variable to view.</li>
-                <li>Click shape for polity info.</li>
-                <fieldset id="politySpecificInfo" style="display: block">
-                    <li>Click shape to update legend.</li>
-                    <li>Click again to remove from legend.</li>
-                </fieldset>
-                <li>Double click to reach Seshat page.</li>
-                <li>Change the year or play animation.</li>
-                <!-- <li>Show capital city coordinates.</li> -->
-                <li>Try different base maps.</li>
-            </ul>
+            <p>🗣️ <i>Double clicks open Seshat pages.</i></p>
             <fieldset>
                 <legend>
                     <h3>Base Map</h3>
@@ -402,13 +391,6 @@ <h3>Base Map</h3>
             var selectedYear = document.getElementById('dateSlide').value;
             var opacity = document.getElementById('opacitySlide').value;
 
-            // Show or hide the polity-specific info fieldset
-            if (variable == 'polity') {
-                document.getElementById('politySpecificInfo').style.display = 'block';
-            } else {
-                document.getElementById('politySpecificInfo').style.display = 'none';
-            }
-
             // If variable has changed from the previous selection
             if (localStorage.getItem('variable') != variable) {
                 // Update previously selected variable button

From a03693f120a60eba08e4553f7e898cddaf389a98 Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Wed, 19 Jun 2024 14:39:21 +0100
Subject: [PATCH 08/48] update polity map playRate to be same as world map

---
 seshat/apps/core/templates/core/polity_map.html | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/seshat/apps/core/templates/core/polity_map.html b/seshat/apps/core/templates/core/polity_map.html
index c7b2695f1..a038f05f8 100644
--- a/seshat/apps/core/templates/core/polity_map.html
+++ b/seshat/apps/core/templates/core/polity_map.html
@@ -28,8 +28,17 @@
                         <label for="playButton">Run animation:</label>
                         <button id="playButton" type="button" onclick="startPlay()">▶️</button>
                         <button id="stopButton" type="button" onclick="stopPlay()">⏸</button><br>
-                        <label for="playRate">Animation speed:</label>
-                        <input type="range" name="playRate" id="playRate" min="1" max="5" value="2" class="slider" onchange="plotPolities()"><br>
+                        <label for="playRate">Speed: </label>
+                        <input type="range" name="playRate" id="playRate" min="1" max="5" value="2" class="slider" list="tickmarks"
+                            onchange="updateSliderValue(this.value)">
+                        <datalist id="tickmarks">
+                            <option value="1"></option>
+                            <option value="2"></option>
+                            <option value="3"></option>
+                            <option value="4"></option>
+                            <option value="5"></option>
+                        </datalist>
+                        <span id="sliderValue">5 y/s</span><br>
                         <label for="opacitySlide">Opacity:</label>
                         <input type="range" name="opacitySlide" id="opacitySlide" min="0.1" max="1" step="0.1" value="0.5" class="slider" onchange="plotPolities()" style="width: 150px;">
                     </div>

From 6066bb1b273be1ae29e18a76eb88c5b9f8d5889d Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Wed, 19 Jun 2024 14:45:58 +0100
Subject: [PATCH 09/48] set minZoom

---
 seshat/apps/core/templates/core/polity_map.html | 4 +++-
 seshat/apps/core/templates/core/world_map.html  | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/seshat/apps/core/templates/core/polity_map.html b/seshat/apps/core/templates/core/polity_map.html
index a038f05f8..3a2c93a62 100644
--- a/seshat/apps/core/templates/core/polity_map.html
+++ b/seshat/apps/core/templates/core/polity_map.html
@@ -126,7 +126,9 @@ <h5>Base Map:</h5>
                     });
             });
 
-            var map = L.map('map').setView([0, 0], 2);
+            var map = L.map('map', {
+                minZoom: 2,
+            }).setView([0, 0], 2);
 
             var baseLayers = {
                 "carto": L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png'),
diff --git a/seshat/apps/core/templates/core/world_map.html b/seshat/apps/core/templates/core/world_map.html
index 2a8b48da2..002137924 100644
--- a/seshat/apps/core/templates/core/world_map.html
+++ b/seshat/apps/core/templates/core/world_map.html
@@ -340,7 +340,9 @@ <h3>Base Map</h3>
             fetchData('/core/world_map_one_year/', displayYear);
         });
 
-        var map = L.map('map').setView([0, 0], 2);
+        var map = L.map('map', {
+            minZoom: 2,
+        }).setView([0, 0], 2);
 
         var baseLayers = {
             "carto": L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png'),

From cfb886e4141c21b3a2548af9c004606601fc9f65 Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Wed, 19 Jun 2024 14:48:59 +0100
Subject: [PATCH 10/48] restrict map bounds

---
 seshat/apps/core/templates/core/polity_map.html | 6 ++++++
 seshat/apps/core/templates/core/world_map.html  | 6 ++++++
 2 files changed, 12 insertions(+)

diff --git a/seshat/apps/core/templates/core/polity_map.html b/seshat/apps/core/templates/core/polity_map.html
index 3a2c93a62..55f1d3f68 100644
--- a/seshat/apps/core/templates/core/polity_map.html
+++ b/seshat/apps/core/templates/core/polity_map.html
@@ -126,8 +126,14 @@ <h5>Base Map:</h5>
                     });
             });
 
+            var southWest = L.latLng(-89.98155760646617, -180),
+                northEast = L.latLng(89.99346179538875, 180),
+                bounds = L.latLngBounds(southWest, northEast);
+
             var map = L.map('map', {
                 minZoom: 2,
+                maxBounds: bounds,
+                maxBoundsViscosity: 1.0
             }).setView([0, 0], 2);
 
             var baseLayers = {
diff --git a/seshat/apps/core/templates/core/world_map.html b/seshat/apps/core/templates/core/world_map.html
index 002137924..cec245e02 100644
--- a/seshat/apps/core/templates/core/world_map.html
+++ b/seshat/apps/core/templates/core/world_map.html
@@ -340,8 +340,14 @@ <h3>Base Map</h3>
             fetchData('/core/world_map_one_year/', displayYear);
         });
 
+        var southWest = L.latLng(-89.98155760646617, -180),
+            northEast = L.latLng(89.99346179538875, 180),
+            bounds = L.latLngBounds(southWest, northEast);
+
         var map = L.map('map', {
             minZoom: 2,
+            maxBounds: bounds,
+            maxBoundsViscosity: 1.0
         }).setView([0, 0], 2);
 
         var baseLayers = {

From 3dba1459adc9ac6d15cfd298aa951042dbbcb213 Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Wed, 19 Jun 2024 15:25:48 +0100
Subject: [PATCH 11/48] move year slider to bottom of polity map

---
 .../apps/core/templates/core/polity_map.html  | 22 +++++++++++--------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/seshat/apps/core/templates/core/polity_map.html b/seshat/apps/core/templates/core/polity_map.html
index 55f1d3f68..4e6a30167 100644
--- a/seshat/apps/core/templates/core/polity_map.html
+++ b/seshat/apps/core/templates/core/polity_map.html
@@ -16,15 +16,6 @@
             <div>
                 <fieldset>
                     <div class="slidecontainer">
-                        <label for="enterYear">Enter year:</label>
-                        <input type="number" id="enterYear" name="enterYear" value="{{ content.display_year }}" style="width: 75px;"">
-                        <button id="minusButton" type="button" onclick="adjustSliderDown()">-</button>
-                        <button id="plusButton" type="button" onclick="adjustSliderUp()">+</button><br>
-                        <input type="range" name="dateSlide" id="dateSlide" min="{{ content.earliest_year }}"
-                            max="{{ content.latest_year }}" value="{{ content.display_year }}" class="slider"
-                            onchange="plotPolities()" style="width: 300px;"><br>
-                        <label for="sliderDate">Selected year:</label>
-                        <span id="sliderDate"></span><br><br>
                         <label for="playButton">Run animation:</label>
                         <button id="playButton" type="button" onclick="startPlay()">▶️</button>
                         <button id="stopButton" type="button" onclick="stopPlay()">⏸</button><br>
@@ -73,6 +64,19 @@ <h5>Base Map:</h5>
                 <p></p>
             </div>
         </div>
+        <div style="display: block;">
+            <fieldset>
+                <label for="enterYear">Enter year:</label>
+                <input type="number" id="enterYear" name="enterYear" value="{{ content.display_year }}" style="width: 75px;"">
+                <button id=" minusButton" type="button" onclick="adjustSliderDown()">-</button>
+                <button id="plusButton" type="button" onclick="adjustSliderUp()">+</button>
+                <label for="sliderDate">Selected year:</label>
+                <span id="sliderDate"></span><br>
+                <input type="range" name="dateSlide" id="dateSlide" min="{{ content.earliest_year }}"
+                    max="{{ content.latest_year }}" value="{{ content.display_year }}" class="slider" onchange="plotPolities()"
+                    style="width: 100%;"><br>
+            </fieldset>
+        </div>
         <script src="{% static 'core/js/map_functions.js' %}"></script>
         <script>
 

From d276b4f645822dff17ded71d144daac67f0f4f42 Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Wed, 19 Jun 2024 15:34:17 +0100
Subject: [PATCH 12/48] add tickmarks

---
 .../apps/core/templates/core/polity_map.html  | 21 ++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/seshat/apps/core/templates/core/polity_map.html b/seshat/apps/core/templates/core/polity_map.html
index 4e6a30167..bdb796f0c 100644
--- a/seshat/apps/core/templates/core/polity_map.html
+++ b/seshat/apps/core/templates/core/polity_map.html
@@ -72,14 +72,29 @@ <h5>Base Map:</h5>
                 <button id="plusButton" type="button" onclick="adjustSliderUp()">+</button>
                 <label for="sliderDate">Selected year:</label>
                 <span id="sliderDate"></span><br>
-                <input type="range" name="dateSlide" id="dateSlide" min="{{ content.earliest_year }}"
-                    max="{{ content.latest_year }}" value="{{ content.display_year }}" class="slider" onchange="plotPolities()"
-                    style="width: 100%;"><br>
+                <input type="range" name="dateSlide" id="dateSlide" min="{{ content.earliest_year }}" max="{{ content.latest_year }}"
+                    value="{{ content.display_year }}" class="slider" onchange="plotPolities()" style="width: 100%;"
+                    list="yearTickmarks"><br>
+                <datalist id="yearTickmarks"></datalist>
             </fieldset>
         </div>
         <script src="{% static 'core/js/map_functions.js' %}"></script>
         <script>
 
+            window.onload = function () {
+                var min = parseInt(document.getElementById('dateSlide').min);
+                var max = parseInt(document.getElementById('dateSlide').max);
+                var datalist = document.getElementById('yearTickmarks');
+
+                var increment = Math.ceil((max - min) / 10); // Calculate the increment
+
+                for (var i = min; i <= max; i += increment) {
+                    var option = document.createElement('option');
+                    option.value = i;
+                    datalist.appendChild(option);
+                }
+            };
+
             var allPolitiesLoaded = false;
 
             var displayedShapes = [];

From b48fbcfefdf21139640e2d8480064999d96fc2a1 Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Wed, 19 Jun 2024 15:43:50 +0100
Subject: [PATCH 13/48] Revert "add tickmarks"

This reverts commit d276b4f645822dff17ded71d144daac67f0f4f42.
---
 .../apps/core/templates/core/polity_map.html  | 21 +++----------------
 1 file changed, 3 insertions(+), 18 deletions(-)

diff --git a/seshat/apps/core/templates/core/polity_map.html b/seshat/apps/core/templates/core/polity_map.html
index bdb796f0c..4e6a30167 100644
--- a/seshat/apps/core/templates/core/polity_map.html
+++ b/seshat/apps/core/templates/core/polity_map.html
@@ -72,29 +72,14 @@ <h5>Base Map:</h5>
                 <button id="plusButton" type="button" onclick="adjustSliderUp()">+</button>
                 <label for="sliderDate">Selected year:</label>
                 <span id="sliderDate"></span><br>
-                <input type="range" name="dateSlide" id="dateSlide" min="{{ content.earliest_year }}" max="{{ content.latest_year }}"
-                    value="{{ content.display_year }}" class="slider" onchange="plotPolities()" style="width: 100%;"
-                    list="yearTickmarks"><br>
-                <datalist id="yearTickmarks"></datalist>
+                <input type="range" name="dateSlide" id="dateSlide" min="{{ content.earliest_year }}"
+                    max="{{ content.latest_year }}" value="{{ content.display_year }}" class="slider" onchange="plotPolities()"
+                    style="width: 100%;"><br>
             </fieldset>
         </div>
         <script src="{% static 'core/js/map_functions.js' %}"></script>
         <script>
 
-            window.onload = function () {
-                var min = parseInt(document.getElementById('dateSlide').min);
-                var max = parseInt(document.getElementById('dateSlide').max);
-                var datalist = document.getElementById('yearTickmarks');
-
-                var increment = Math.ceil((max - min) / 10); // Calculate the increment
-
-                for (var i = min; i <= max; i += increment) {
-                    var option = document.createElement('option');
-                    option.value = i;
-                    datalist.appendChild(option);
-                }
-            };
-
             var allPolitiesLoaded = false;
 
             var displayedShapes = [];

From 61f64417c53abb767b8df2a1cec9f9297ee217da Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Wed, 19 Jun 2024 15:53:51 +0100
Subject: [PATCH 14/48] add a middle year to tickmarks

---
 seshat/apps/core/templates/core/polity_map.html | 5 +++++
 seshat/apps/core/views.py                       | 1 +
 2 files changed, 6 insertions(+)

diff --git a/seshat/apps/core/templates/core/polity_map.html b/seshat/apps/core/templates/core/polity_map.html
index 4e6a30167..b5dcecb7b 100644
--- a/seshat/apps/core/templates/core/polity_map.html
+++ b/seshat/apps/core/templates/core/polity_map.html
@@ -72,6 +72,11 @@ <h5>Base Map:</h5>
                 <button id="plusButton" type="button" onclick="adjustSliderUp()">+</button>
                 <label for="sliderDate">Selected year:</label>
                 <span id="sliderDate"></span><br>
+                <div id="yearTickmarks">
+                    <span id="minYear">{{ content.earliest_year }}</span>
+                    <span id="midYear" style="position: absolute; left: 50%; transform: translateX(-50%);">{{ content.middle_year }}</span>
+                    <span id="maxYear" style="float: right;">{{ content.latest_year }}</span>
+                </div>
                 <input type="range" name="dateSlide" id="dateSlide" min="{{ content.earliest_year }}"
                     max="{{ content.latest_year }}" value="{{ content.display_year }}" class="slider" onchange="plotPolities()"
                     style="width: 100%;"><br>
diff --git a/seshat/apps/core/views.py b/seshat/apps/core/views.py
index 8210e8564..521112f97 100644
--- a/seshat/apps/core/views.py
+++ b/seshat/apps/core/views.py
@@ -2731,6 +2731,7 @@ def get_polity_shape_content(displayed_year="all", seshat_id="all"):
         'shapes': shapes,
         'earliest_year': earliest_year,
         'display_year': displayed_year,
+        'middle_year': (earliest_year + latest_year) // 2,
         'latest_year': latest_year,
         'seshat_id_page_id': seshat_id_page_id
     }

From 8e84a8396bb536f9a6f8f20337cf0a783ca580af Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Wed, 19 Jun 2024 15:59:24 +0100
Subject: [PATCH 15/48] restore 10 tickmarks

---
 .../apps/core/templates/core/polity_map.html  | 31 ++++++++++++++-----
 1 file changed, 24 insertions(+), 7 deletions(-)

diff --git a/seshat/apps/core/templates/core/polity_map.html b/seshat/apps/core/templates/core/polity_map.html
index b5dcecb7b..a04944272 100644
--- a/seshat/apps/core/templates/core/polity_map.html
+++ b/seshat/apps/core/templates/core/polity_map.html
@@ -72,19 +72,36 @@ <h5>Base Map:</h5>
                 <button id="plusButton" type="button" onclick="adjustSliderUp()">+</button>
                 <label for="sliderDate">Selected year:</label>
                 <span id="sliderDate"></span><br>
-                <div id="yearTickmarks">
-                    <span id="minYear">{{ content.earliest_year }}</span>
-                    <span id="midYear" style="position: absolute; left: 50%; transform: translateX(-50%);">{{ content.middle_year }}</span>
-                    <span id="maxYear" style="float: right;">{{ content.latest_year }}</span>
+                <div class="slider-container">
+                    <datalist id="yearTickmarks"></datalist>
+                    <input type="range" name="dateSlide" id="dateSlide" min="{{ content.earliest_year }}" max="{{ content.latest_year }}"
+                        value="{{ content.display_year }}" class="slider" onchange="plotPolities()" style="width: 100%;"
+                        list="yearTickmarks">
+                    <div id="yearTickmarkValues">
+                        <span id="minYear">{{ content.earliest_year }}</span>
+                        <span id="midYear" style="position: absolute; left: 50%; transform: translateX(-50%);">{{ content.middle_year }}</span>
+                        <span id="maxYear" style="float: right;">{{ content.latest_year }}</span>
+                    </div>
                 </div>
-                <input type="range" name="dateSlide" id="dateSlide" min="{{ content.earliest_year }}"
-                    max="{{ content.latest_year }}" value="{{ content.display_year }}" class="slider" onchange="plotPolities()"
-                    style="width: 100%;"><br>
             </fieldset>
         </div>
         <script src="{% static 'core/js/map_functions.js' %}"></script>
         <script>
 
+            window.onload = function () {
+                var min = parseInt(document.getElementById('dateSlide').min);
+                var max = parseInt(document.getElementById('dateSlide').max);
+                var datalist = document.getElementById('yearTickmarks');
+
+                var increment = Math.ceil((max - min) / 10); // Calculate the increment
+
+                for (var i = min; i <= max; i += increment) {
+                    var option = document.createElement('option');
+                    option.value = i;
+                    datalist.appendChild(option);
+                }
+            };
+
             var allPolitiesLoaded = false;
 
             var displayedShapes = [];

From 9ee279a21189935f45b2bc3b985131f2e5f430a2 Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Wed, 19 Jun 2024 16:13:56 +0100
Subject: [PATCH 16/48] added ticks badly positioned

---
 seshat/apps/core/templates/core/polity_map.html | 17 ++++++++++++-----
 seshat/apps/core/views.py                       |  5 ++++-
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/seshat/apps/core/templates/core/polity_map.html b/seshat/apps/core/templates/core/polity_map.html
index a04944272..aeb36d609 100644
--- a/seshat/apps/core/templates/core/polity_map.html
+++ b/seshat/apps/core/templates/core/polity_map.html
@@ -77,11 +77,7 @@ <h5>Base Map:</h5>
                     <input type="range" name="dateSlide" id="dateSlide" min="{{ content.earliest_year }}" max="{{ content.latest_year }}"
                         value="{{ content.display_year }}" class="slider" onchange="plotPolities()" style="width: 100%;"
                         list="yearTickmarks">
-                    <div id="yearTickmarkValues">
-                        <span id="minYear">{{ content.earliest_year }}</span>
-                        <span id="midYear" style="position: absolute; left: 50%; transform: translateX(-50%);">{{ content.middle_year }}</span>
-                        <span id="maxYear" style="float: right;">{{ content.latest_year }}</span>
-                    </div>
+                    <div id="yearTickmarkValues"></div>
                 </div>
             </fieldset>
         </div>
@@ -92,6 +88,8 @@ <h5>Base Map:</h5>
                 var min = parseInt(document.getElementById('dateSlide').min);
                 var max = parseInt(document.getElementById('dateSlide').max);
                 var datalist = document.getElementById('yearTickmarks');
+                var tickYears = JSON.parse('{{ content.tick_years|escapejs }}');
+                var tickmarkValuesDiv = document.getElementById('yearTickmarkValues');
 
                 var increment = Math.ceil((max - min) / 10); // Calculate the increment
 
@@ -100,6 +98,15 @@ <h5>Base Map:</h5>
                     option.value = i;
                     datalist.appendChild(option);
                 }
+
+                for (var i = 0; i < tickYears.length; i++) {
+                    var span = document.createElement('span');
+                    span.textContent = tickYears[i];
+                    span.style.position = 'absolute';
+                    span.style.left = (i * 10) + '%'; // Position the span
+                    tickmarkValuesDiv.appendChild(span);
+                }
+
             };
 
             var allPolitiesLoaded = false;
diff --git a/seshat/apps/core/views.py b/seshat/apps/core/views.py
index 521112f97..33bb6e36d 100644
--- a/seshat/apps/core/views.py
+++ b/seshat/apps/core/views.py
@@ -2727,11 +2727,14 @@ def get_polity_shape_content(displayed_year="all", seshat_id="all"):
         displayed_year = earliest_year
         latest_year = max([shape['end_year'] for shape in shapes])
 
+    # Get the years for the tick marks on the year slider
+    tick_years = list(range(earliest_year, latest_year + 1, 10))
+
     content = {
         'shapes': shapes,
         'earliest_year': earliest_year,
         'display_year': displayed_year,
-        'middle_year': (earliest_year + latest_year) // 2,
+        'tick_years': json.dumps(tick_years),
         'latest_year': latest_year,
         'seshat_id_page_id': seshat_id_page_id
     }

From dc3c90a35720c35f75236bb6eb2483ddc0ad9ccb Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Wed, 19 Jun 2024 16:25:22 +0100
Subject: [PATCH 17/48] correct number of tickmarks

---
 seshat/apps/core/views.py | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/seshat/apps/core/views.py b/seshat/apps/core/views.py
index 33bb6e36d..913289dbc 100644
--- a/seshat/apps/core/views.py
+++ b/seshat/apps/core/views.py
@@ -1,6 +1,7 @@
 import sys
 import importlib
 import random
+import numpy as np
 
 from collections import defaultdict
 from seshat.utils.utils import adder, dic_of_all_vars, list_of_all_Polities, dic_of_all_vars_in_sections
@@ -2728,7 +2729,7 @@ def get_polity_shape_content(displayed_year="all", seshat_id="all"):
         latest_year = max([shape['end_year'] for shape in shapes])
 
     # Get the years for the tick marks on the year slider
-    tick_years = list(range(earliest_year, latest_year + 1, 10))
+    tick_years = [round(year) for year in np.linspace(earliest_year, latest_year, num=10)]
 
     content = {
         'shapes': shapes,

From 27cfaf4f2d188194dbe279a21c1c17b33994f0e3 Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Fri, 21 Jun 2024 15:08:28 +0100
Subject: [PATCH 18/48] tickmarks are accurate but labels don't line up neatly

---
 .../apps/core/templates/core/polity_map.html  | 23 +++++++++++--------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/seshat/apps/core/templates/core/polity_map.html b/seshat/apps/core/templates/core/polity_map.html
index aeb36d609..70f496f22 100644
--- a/seshat/apps/core/templates/core/polity_map.html
+++ b/seshat/apps/core/templates/core/polity_map.html
@@ -72,7 +72,7 @@ <h5>Base Map:</h5>
                 <button id="plusButton" type="button" onclick="adjustSliderUp()">+</button>
                 <label for="sliderDate">Selected year:</label>
                 <span id="sliderDate"></span><br>
-                <div class="slider-container">
+                <div class="slider-container" style="position: relative;">
                     <datalist id="yearTickmarks"></datalist>
                     <input type="range" name="dateSlide" id="dateSlide" min="{{ content.earliest_year }}" max="{{ content.latest_year }}"
                         value="{{ content.display_year }}" class="slider" onchange="plotPolities()" style="width: 100%;"
@@ -91,22 +91,27 @@ <h5>Base Map:</h5>
                 var tickYears = JSON.parse('{{ content.tick_years|escapejs }}');
                 var tickmarkValuesDiv = document.getElementById('yearTickmarkValues');
 
-                var increment = Math.ceil((max - min) / 10); // Calculate the increment
+                // Calculate the increment for 9 intervals, resulting in 10 tickmarks
+                var increment = (max - min) / 9;
 
-                for (var i = min; i <= max; i += increment) {
+                // Loop to add tickmarks
+                for (var i = 0; i <= 9; i++) {
+                    var tickValue = Math.round(min + increment * i);
                     var option = document.createElement('option');
-                    option.value = i;
+                    option.value = tickValue;
                     datalist.appendChild(option);
-                }
 
-                for (var i = 0; i < tickYears.length; i++) {
+                    // Create and add corresponding span for tickmark labels
                     var span = document.createElement('span');
-                    span.textContent = tickYears[i];
+                    span.textContent = tickValue;
                     span.style.position = 'absolute';
-                    span.style.left = (i * 10) + '%'; // Position the span
+                    span.style.left = (i / 9 * 100) + '%';
+                    // Adjust the last span to prevent overflow
+                    if (i === 9) {
+                        span.style.transform = 'translateX(-100%)';
+                    }
                     tickmarkValuesDiv.appendChild(span);
                 }
-
             };
 
             var allPolitiesLoaded = false;

From 6bfc52bde67552e93bfb1f25c8da5b314c0e5048 Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Fri, 21 Jun 2024 15:22:22 +0100
Subject: [PATCH 19/48] center tick values

---
 seshat/apps/core/templates/core/polity_map.html | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/seshat/apps/core/templates/core/polity_map.html b/seshat/apps/core/templates/core/polity_map.html
index 70f496f22..0c00c1ac4 100644
--- a/seshat/apps/core/templates/core/polity_map.html
+++ b/seshat/apps/core/templates/core/polity_map.html
@@ -105,7 +105,11 @@ <h5>Base Map:</h5>
                     var span = document.createElement('span');
                     span.textContent = tickValue;
                     span.style.position = 'absolute';
-                    span.style.left = (i / 9 * 100) + '%';
+                    span.style.textAlign = 'center';
+                    // Use transform to center the span over the tickmark
+                    var leftPercentage = (i / 9 * 100);
+                    span.style.left = `${leftPercentage}%`;
+                    span.style.transform = 'translateX(-50%)';
                     // Adjust the last span to prevent overflow
                     if (i === 9) {
                         span.style.transform = 'translateX(-100%)';

From 3840371be19bf5b541956d9602f1fdb73f39925e Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Fri, 21 Jun 2024 15:25:59 +0100
Subject: [PATCH 20/48] ticks perfect

---
 seshat/apps/core/templates/core/polity_map.html | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/seshat/apps/core/templates/core/polity_map.html b/seshat/apps/core/templates/core/polity_map.html
index 0c00c1ac4..394a93831 100644
--- a/seshat/apps/core/templates/core/polity_map.html
+++ b/seshat/apps/core/templates/core/polity_map.html
@@ -88,7 +88,6 @@ <h5>Base Map:</h5>
                 var min = parseInt(document.getElementById('dateSlide').min);
                 var max = parseInt(document.getElementById('dateSlide').max);
                 var datalist = document.getElementById('yearTickmarks');
-                var tickYears = JSON.parse('{{ content.tick_years|escapejs }}');
                 var tickmarkValuesDiv = document.getElementById('yearTickmarkValues');
 
                 // Calculate the increment for 9 intervals, resulting in 10 tickmarks
@@ -106,13 +105,17 @@ <h5>Base Map:</h5>
                     span.textContent = tickValue;
                     span.style.position = 'absolute';
                     span.style.textAlign = 'center';
-                    // Use transform to center the span over the tickmark
+                    
+                    // Use transform to center the span over the tickmark, with special handling for the first and last span
                     var leftPercentage = (i / 9 * 100);
                     span.style.left = `${leftPercentage}%`;
-                    span.style.transform = 'translateX(-50%)';
-                    // Adjust the last span to prevent overflow
-                    if (i === 9) {
-                        span.style.transform = 'translateX(-100%)';
+                    if (i === 0) {
+                        span.style.transform = 'translateX(0%)'; // No translation for the first span
+                        span.style.textAlign = 'left'; // Align text to the left for the first span
+                    } else if (i === 9) {
+                        span.style.transform = 'translateX(-100%)'; // Adjust the last span to prevent overflow
+                    } else {
+                        span.style.transform = 'translateX(-50%)'; // Center all other spans
                     }
                     tickmarkValuesDiv.appendChild(span);
                 }

From 910cb12b7cbdd08f3b253992ee9d7fb190130958 Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Fri, 21 Jun 2024 15:34:04 +0100
Subject: [PATCH 21/48] move year controls to left

---
 seshat/apps/core/templates/core/polity_map.html | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/seshat/apps/core/templates/core/polity_map.html b/seshat/apps/core/templates/core/polity_map.html
index 394a93831..23ac0523a 100644
--- a/seshat/apps/core/templates/core/polity_map.html
+++ b/seshat/apps/core/templates/core/polity_map.html
@@ -15,7 +15,7 @@
         <div style="display: flex;">
             <div>
                 <fieldset>
-                    <div class="slidecontainer">
+                    <div>
                         <label for="playButton">Run animation:</label>
                         <button id="playButton" type="button" onclick="startPlay()">▶️</button>
                         <button id="stopButton" type="button" onclick="stopPlay()">⏸</button><br>
@@ -30,6 +30,12 @@
                             <option value="5"></option>
                         </datalist>
                         <span id="sliderValue">5 y/s</span><br>
+                        <label for="enterYear">Enter year:</label>
+                        <input type="number" id="enterYear" name="enterYear" value="{{ content.display_year }}" style="width: 75px;"">
+                                        <button id=" minusButton" type="button" onclick="adjustSliderDown()">-</button>
+                        <button id="plusButton" type="button" onclick="adjustSliderUp()">+</button><br>
+                        <label for="sliderDate">Selected year:</label>
+                        <span id="sliderDate"></span><br>
                         <label for="opacitySlide">Opacity:</label>
                         <input type="range" name="opacitySlide" id="opacitySlide" min="0.1" max="1" step="0.1" value="0.5" class="slider" onchange="plotPolities()" style="width: 150px;">
                     </div>
@@ -66,12 +72,6 @@ <h5>Base Map:</h5>
         </div>
         <div style="display: block;">
             <fieldset>
-                <label for="enterYear">Enter year:</label>
-                <input type="number" id="enterYear" name="enterYear" value="{{ content.display_year }}" style="width: 75px;"">
-                <button id=" minusButton" type="button" onclick="adjustSliderDown()">-</button>
-                <button id="plusButton" type="button" onclick="adjustSliderUp()">+</button>
-                <label for="sliderDate">Selected year:</label>
-                <span id="sliderDate"></span><br>
                 <div class="slider-container" style="position: relative;">
                     <datalist id="yearTickmarks"></datalist>
                     <input type="range" name="dateSlide" id="dateSlide" min="{{ content.earliest_year }}" max="{{ content.latest_year }}"

From b48c45fc1c5fb9f1b242b2d5d40c7af8a6e3800a Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Fri, 21 Jun 2024 15:53:06 +0100
Subject: [PATCH 22/48] adjust header and year

---
 .../apps/core/templates/core/polity/polity_detail.html   | 9 ++++-----
 seshat/apps/core/templates/core/polity_map.html          | 3 +--
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/seshat/apps/core/templates/core/polity/polity_detail.html b/seshat/apps/core/templates/core/polity/polity_detail.html
index 0d77b1c3b..f5ddd3751 100644
--- a/seshat/apps/core/templates/core/polity/polity_detail.html
+++ b/seshat/apps/core/templates/core/polity/polity_detail.html
@@ -183,10 +183,6 @@
 <!-- showcase for index -->
 
 <div class="container">
-    <div>
-        <span class="fw-bolder fs-1 text-teal"><i class="fa-solid fa-star fa-sm"></i> {{ object.long_name }}</span>
-        {% polity_map pk %}
-    </div>
     <div class="row mt-3">
         <div class="col-md-12">
             <div class="row d-flex align-items-center mb-2">
@@ -202,7 +198,10 @@ <h1 class="h1 text-teal federicka-bigger"> {{ object.long_name }}</h1>
                         {% endif %}
 
                     </div>
-
+                    <div>
+                        {% polity_map pk %}
+                        <br><p></p><br>
+                    </div>
 
                     <div class="col-md-8 py-2">
                         {% if object.general_description %}
diff --git a/seshat/apps/core/templates/core/polity_map.html b/seshat/apps/core/templates/core/polity_map.html
index 23ac0523a..81718ab63 100644
--- a/seshat/apps/core/templates/core/polity_map.html
+++ b/seshat/apps/core/templates/core/polity_map.html
@@ -12,6 +12,7 @@
 <body>
     {% block content %}
     {% if content.include_polity_map %}
+        <h2 class="h1 text-teal federicka-bigger" id="sliderDate"></h2>
         <div style="display: flex;">
             <div>
                 <fieldset>
@@ -34,8 +35,6 @@
                         <input type="number" id="enterYear" name="enterYear" value="{{ content.display_year }}" style="width: 75px;"">
                                         <button id=" minusButton" type="button" onclick="adjustSliderDown()">-</button>
                         <button id="plusButton" type="button" onclick="adjustSliderUp()">+</button><br>
-                        <label for="sliderDate">Selected year:</label>
-                        <span id="sliderDate"></span><br>
                         <label for="opacitySlide">Opacity:</label>
                         <input type="range" name="opacitySlide" id="opacitySlide" min="0.1" max="1" step="0.1" value="0.5" class="slider" onchange="plotPolities()" style="width: 150px;">
                     </div>

From 389641ec961e272e9a087713c7670e10ede28ba2 Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Fri, 21 Jun 2024 16:03:36 +0100
Subject: [PATCH 23/48] rearrange controls

---
 .../apps/core/templates/core/polity_map.html  | 60 +++++++++----------
 1 file changed, 28 insertions(+), 32 deletions(-)

diff --git a/seshat/apps/core/templates/core/polity_map.html b/seshat/apps/core/templates/core/polity_map.html
index 81718ab63..94fcf2b52 100644
--- a/seshat/apps/core/templates/core/polity_map.html
+++ b/seshat/apps/core/templates/core/polity_map.html
@@ -17,6 +17,9 @@ <h2 class="h1 text-teal federicka-bigger" id="sliderDate"></h2>
             <div>
                 <fieldset>
                     <div>
+                        <label for="enterYear">Enter year:</label>
+                        <input type="number" id="enterYear" name="enterYear" value="{{ content.display_year }}" style="width: 75px;""><button id=" minusButton" type="button" onclick="adjustSliderDown()">-</button>
+                        <button id="plusButton" type="button" onclick="adjustSliderUp()">+</button><br>
                         <label for="playButton">Run animation:</label>
                         <button id="playButton" type="button" onclick="startPlay()">▶️</button>
                         <button id="stopButton" type="button" onclick="stopPlay()">⏸</button><br>
@@ -31,43 +34,36 @@ <h2 class="h1 text-teal federicka-bigger" id="sliderDate"></h2>
                             <option value="5"></option>
                         </datalist>
                         <span id="sliderValue">5 y/s</span><br>
-                        <label for="enterYear">Enter year:</label>
-                        <input type="number" id="enterYear" name="enterYear" value="{{ content.display_year }}" style="width: 75px;"">
-                                        <button id=" minusButton" type="button" onclick="adjustSliderDown()">-</button>
-                        <button id="plusButton" type="button" onclick="adjustSliderUp()">+</button><br>
                         <label for="opacitySlide">Opacity:</label>
-                        <input type="range" name="opacitySlide" id="opacitySlide" min="0.1" max="1" step="0.1" value="0.5" class="slider" onchange="plotPolities()" style="width: 150px;">
+                        <input type="range" name="opacitySlide" id="opacitySlide" min="0.1" max="1" step="0.1" value="0.5" class="slider"
+                            onchange="plotPolities()" style="width: 150px;">
+                        <fieldset>
+                            <br>
+                            <label for="baseMapOnly">Base map only</label>
+                            <input type="checkbox" id="baseMapOnly" name="baseMapOnly" onclick=plotPolities()><br><br>
+                            <label><input type="radio" name="baseMap" id="baseMapBasic" value="cartobasic" onclick="switchBaseMap()"
+                                    checked>Basic</label><br>
+                            <label><input type="radio" name="baseMap" id="baseMapOSM" value="osm"
+                                    onclick="switchBaseMap()">OpenStreetMap</label><br>
+                            <label><input type="radio" name="baseMap" id="baseMapCurrent" value="gadm" onclick="switchBaseMap()"
+                                    disabled>Current borders</label>
+                            <!-- Add a loading indicator for Current borders -->
+                            <div id="baseMapCurrentLoadingIndicator">
+                                <p><sub>Loading current borders...</sub></p>
+                                <!-- <div class="spinner"></div> -->
+                            </div><br>
+                        </fieldset>
+                        <fieldset id="baseMapGADMFieldset">
+                            <label for="baseMapGADM">Current borders:</label>
+                            <select name="baseMapGADM" id="baseMapGADM" onchange="switchBaseMap()">
+                                <option value="country">Countries</option>
+                                <option value="province">Provinces</option>
+                            </select><br>
+                        </fieldset>
                     </div>
                 </fieldset>
             </div>
             <div id="map" style="height: 30vh; flex: 1;"></div>
-            <div>
-                <fieldset>
-                    <br>
-                    <h5>Base Map:</h5>
-                    <label for="baseMapOnly">Base map only</label>
-                    <input type="checkbox" id="baseMapOnly" name="baseMapOnly" onclick=plotPolities()><br><br>
-                    <label><input type="radio" name="baseMap" id="baseMapBasic" value="cartobasic" onclick="switchBaseMap()"
-                            checked>Basic</label><br>
-                    <label><input type="radio" name="baseMap" id="baseMapOSM" value="osm"
-                            onclick="switchBaseMap()">OpenStreetMap</label><br>
-                    <label><input type="radio" name="baseMap" id="baseMapCurrent" value="gadm" onclick="switchBaseMap()"
-                            disabled>Current borders</label>
-                    <!-- Add a loading indicator for Current borders -->
-                    <div id="baseMapCurrentLoadingIndicator">
-                        <p><sub>Loading current borders...</sub></p>
-                        <!-- <div class="spinner"></div> -->
-                    </div><br>
-                </fieldset>
-                <fieldset id="baseMapGADMFieldset">
-                    <label for="baseMapGADM">Current borders:</label>
-                    <select name="baseMapGADM" id="baseMapGADM" onchange="switchBaseMap()">
-                        <option value="country">Countries</option>
-                        <option value="province">Provinces</option>
-                    </select><br>
-                </fieldset>
-                <p></p>
-            </div>
         </div>
         <div style="display: block;">
             <fieldset>

From 6f1566f8fadd6a964d5c3b3bea867a90b5e552ca Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Fri, 21 Jun 2024 16:05:02 +0100
Subject: [PATCH 24/48] move year into fieldset

---
 seshat/apps/core/templates/core/polity_map.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/seshat/apps/core/templates/core/polity_map.html b/seshat/apps/core/templates/core/polity_map.html
index 94fcf2b52..950151fe2 100644
--- a/seshat/apps/core/templates/core/polity_map.html
+++ b/seshat/apps/core/templates/core/polity_map.html
@@ -12,11 +12,11 @@
 <body>
     {% block content %}
     {% if content.include_polity_map %}
-        <h2 class="h1 text-teal federicka-bigger" id="sliderDate"></h2>
         <div style="display: flex;">
             <div>
                 <fieldset>
                     <div>
+                        <h2 class="h1 text-teal federicka-bigger" id="sliderDate"></h2>
                         <label for="enterYear">Enter year:</label>
                         <input type="number" id="enterYear" name="enterYear" value="{{ content.display_year }}" style="width: 75px;""><button id=" minusButton" type="button" onclick="adjustSliderDown()">-</button>
                         <button id="plusButton" type="button" onclick="adjustSliderUp()">+</button><br>

From 187a7c11127ee639cb4bac820e225b2b5ceb8d06 Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Fri, 21 Jun 2024 16:15:57 +0100
Subject: [PATCH 25/48] put slider below map

---
 .../apps/core/templates/core/polity_map.html  | 24 ++++++++++---------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/seshat/apps/core/templates/core/polity_map.html b/seshat/apps/core/templates/core/polity_map.html
index 950151fe2..bd3ae8db5 100644
--- a/seshat/apps/core/templates/core/polity_map.html
+++ b/seshat/apps/core/templates/core/polity_map.html
@@ -63,18 +63,20 @@ <h2 class="h1 text-teal federicka-bigger" id="sliderDate"></h2>
                     </div>
                 </fieldset>
             </div>
-            <div id="map" style="height: 30vh; flex: 1;"></div>
-        </div>
-        <div style="display: block;">
-            <fieldset>
-                <div class="slider-container" style="position: relative;">
-                    <datalist id="yearTickmarks"></datalist>
-                    <input type="range" name="dateSlide" id="dateSlide" min="{{ content.earliest_year }}" max="{{ content.latest_year }}"
-                        value="{{ content.display_year }}" class="slider" onchange="plotPolities()" style="width: 100%;"
-                        list="yearTickmarks">
-                    <div id="yearTickmarkValues"></div>
+            <div style="display: flex; flex-direction: column; width: 100%">
+                <div id="map" style="height: 30vh; flex: 1; width: 100%"></div>
+                <div style="display: block; width: 100%">
+                    <fieldset>
+                        <div class="slider-container" style="position: relative;">
+                            <datalist id="yearTickmarks"></datalist>
+                            <input type="range" name="dateSlide" id="dateSlide" min="{{ content.earliest_year }}" max="{{ content.latest_year }}"
+                                value="{{ content.display_year }}" class="slider" onchange="plotPolities()" style="width: 100%;"
+                                list="yearTickmarks">
+                            <div id="yearTickmarkValues"></div>
+                        </div>
+                    </fieldset>
                 </div>
-            </fieldset>
+            </div>
         </div>
         <script src="{% static 'core/js/map_functions.js' %}"></script>
         <script>

From 1df3aa23920532f049bcbd16e99621cc0a715f2b Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Fri, 21 Jun 2024 16:18:01 +0100
Subject: [PATCH 26/48] fix width issues

---
 seshat/apps/core/templates/core/polity_map.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/seshat/apps/core/templates/core/polity_map.html b/seshat/apps/core/templates/core/polity_map.html
index bd3ae8db5..42b8834f8 100644
--- a/seshat/apps/core/templates/core/polity_map.html
+++ b/seshat/apps/core/templates/core/polity_map.html
@@ -13,7 +13,7 @@
     {% block content %}
     {% if content.include_polity_map %}
         <div style="display: flex;">
-            <div>
+            <div style="width: 20%">
                 <fieldset>
                     <div>
                         <h2 class="h1 text-teal federicka-bigger" id="sliderDate"></h2>
@@ -63,7 +63,7 @@ <h2 class="h1 text-teal federicka-bigger" id="sliderDate"></h2>
                     </div>
                 </fieldset>
             </div>
-            <div style="display: flex; flex-direction: column; width: 100%">
+            <div style="display: flex; flex-direction: column; width: 80%">
                 <div id="map" style="height: 30vh; flex: 1; width: 100%"></div>
                 <div style="display: block; width: 100%">
                     <fieldset>

From 2675b8e157f2bca652f6e2edf6f45e7c548a42e3 Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Fri, 21 Jun 2024 16:32:34 +0100
Subject: [PATCH 27/48] create setSliderTicks func

---
 .../apps/core/static/core/js/map_functions.js | 37 +++++++++++++++++++
 .../apps/core/templates/core/polity_map.html  | 37 +------------------
 2 files changed, 38 insertions(+), 36 deletions(-)

diff --git a/seshat/apps/core/static/core/js/map_functions.js b/seshat/apps/core/static/core/js/map_functions.js
index 6e86468d7..e5d62ce13 100644
--- a/seshat/apps/core/static/core/js/map_functions.js
+++ b/seshat/apps/core/static/core/js/map_functions.js
@@ -42,6 +42,43 @@ function updateSliderValue(value) {
     plotPolities();
 }
 
+function setSliderTicks () {
+    var min = parseInt(document.getElementById('dateSlide').min);
+    var max = parseInt(document.getElementById('dateSlide').max);
+    var datalist = document.getElementById('yearTickmarks');
+    var tickmarkValuesDiv = document.getElementById('yearTickmarkValues');
+
+    // Calculate the increment for 9 intervals, resulting in 10 tickmarks
+    var increment = (max - min) / 9;
+
+    // Loop to add tickmarks
+    for (var i = 0; i <= 9; i++) {
+        var tickValue = Math.round(min + increment * i);
+        var option = document.createElement('option');
+        option.value = tickValue;
+        datalist.appendChild(option);
+
+        // Create and add corresponding span for tickmark labels
+        var span = document.createElement('span');
+        span.textContent = tickValue;
+        span.style.position = 'absolute';
+        span.style.textAlign = 'center';
+
+        // Use transform to center the span over the tickmark, with special handling for the first and last span
+        var leftPercentage = (i / 9 * 100);
+        span.style.left = `${leftPercentage}%`;
+        if (i === 0) {
+            span.style.transform = 'translateX(0%)'; // No translation for the first span
+            span.style.textAlign = 'left'; // Align text to the left for the first span
+        } else if (i === 9) {
+            span.style.transform = 'translateX(-100%)'; // Adjust the last span to prevent overflow
+        } else {
+            span.style.transform = 'translateX(-50%)'; // Center all other spans
+        }
+        tickmarkValuesDiv.appendChild(span);
+    }
+};
+
 function startPlay() {
     stopPlay(); // Clear existing interval before starting a new one
 
diff --git a/seshat/apps/core/templates/core/polity_map.html b/seshat/apps/core/templates/core/polity_map.html
index 42b8834f8..ef06e749d 100644
--- a/seshat/apps/core/templates/core/polity_map.html
+++ b/seshat/apps/core/templates/core/polity_map.html
@@ -81,42 +81,7 @@ <h2 class="h1 text-teal federicka-bigger" id="sliderDate"></h2>
         <script src="{% static 'core/js/map_functions.js' %}"></script>
         <script>
 
-            window.onload = function () {
-                var min = parseInt(document.getElementById('dateSlide').min);
-                var max = parseInt(document.getElementById('dateSlide').max);
-                var datalist = document.getElementById('yearTickmarks');
-                var tickmarkValuesDiv = document.getElementById('yearTickmarkValues');
-
-                // Calculate the increment for 9 intervals, resulting in 10 tickmarks
-                var increment = (max - min) / 9;
-
-                // Loop to add tickmarks
-                for (var i = 0; i <= 9; i++) {
-                    var tickValue = Math.round(min + increment * i);
-                    var option = document.createElement('option');
-                    option.value = tickValue;
-                    datalist.appendChild(option);
-
-                    // Create and add corresponding span for tickmark labels
-                    var span = document.createElement('span');
-                    span.textContent = tickValue;
-                    span.style.position = 'absolute';
-                    span.style.textAlign = 'center';
-                    
-                    // Use transform to center the span over the tickmark, with special handling for the first and last span
-                    var leftPercentage = (i / 9 * 100);
-                    span.style.left = `${leftPercentage}%`;
-                    if (i === 0) {
-                        span.style.transform = 'translateX(0%)'; // No translation for the first span
-                        span.style.textAlign = 'left'; // Align text to the left for the first span
-                    } else if (i === 9) {
-                        span.style.transform = 'translateX(-100%)'; // Adjust the last span to prevent overflow
-                    } else {
-                        span.style.transform = 'translateX(-50%)'; // Center all other spans
-                    }
-                    tickmarkValuesDiv.appendChild(span);
-                }
-            };
+            window.onload = setSliderTicks();
 
             var allPolitiesLoaded = false;
 

From dc02dd8b5b3756cfe26ff43aeb2ce3efacbe11a9 Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Fri, 21 Jun 2024 16:37:15 +0100
Subject: [PATCH 28/48] works for world map all years but not initial

---
 .../apps/core/templates/core/world_map.html   | 23 +++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/seshat/apps/core/templates/core/world_map.html b/seshat/apps/core/templates/core/world_map.html
index cec245e02..d3a9481e0 100644
--- a/seshat/apps/core/templates/core/world_map.html
+++ b/seshat/apps/core/templates/core/world_map.html
@@ -92,7 +92,7 @@
     {% include "core/partials/_navbar.html" %}
     {% block content %}
     <div style="display: flex;">
-        <div>
+        <div style="width: 20%">
             <fieldset>
                 <legend>
                     <h3>Polities</h3>
@@ -139,7 +139,6 @@ <h3>Polities</h3>
                     <input type="number" id="enterYear" name="enterYear" value="{{ display_year }}" style="width: 75px;" onchange="storeYear()">
                     <button id="minusButton" type="button" onclick="adjustSliderDown()">-</button>
                     <button id="plusButton" type="button" onclick="adjustSliderUp()">+</button><br>
-                    <input type="range" name="dateSlide" id="dateSlide" min="{{ earliest_year }}" max="{{ latest_year }}" value="{{ display_year }}" class="slider" onchange="plotPolities(); storeYear()" style="width: 300px;"><br>
                     <label for="sliderDate">Selected year:&nbsp;</label><span id="sliderDate"></span><br><br>
                     <label for="playButton">Run animation:</label>
                     <button id="playButton" type="button" onclick="startPlay()">▶️</button>
@@ -190,12 +189,27 @@ <h3>Base Map</h3>
                 <p>Click a country or province.</p>
             </fieldset>
         </div>
-        <div id="map" style="height: 85vh; flex: 1;"></div>
-        <div id="variableLegend"></div>
+        <div style="display: flex; flex-direction: column; width: 80%">
+            <div id="map" style="height: 85vh; flex: 1; width: 100%"></div>
+            <div id="variableLegend"></div>
+            <div style="display: block; width: 100%">
+                <fieldset>
+                    <div class="slider-container" style="position: relative;">
+                        <datalist id="yearTickmarks"></datalist>
+                        <input type="range" name="dateSlide" id="dateSlide" min="{{ content.earliest_year }}"
+                            max="{{ content.latest_year }}" value="{{ content.display_year }}" class="slider"
+                            onchange="plotPolities()" style="width: 100%;" list="yearTickmarks">
+                        <div id="yearTickmarkValues"></div>
+                    </div>
+                </fieldset>
+            </div>
+        </div>
     </div>
     <script src="{% static 'core/js/map_functions.js' %}"></script>
     <script>
 
+        // window.onload = setSliderTicks();
+
         var categorical_variables = {{ categorical_variables | safe }};
         updateCategoricalVariableSelection('language');  // Set the default categorical variable selection
 
@@ -310,6 +324,7 @@ <h3>Base Map</h3>
                         document.getElementById('dateSlide').max = data.latest_year;
                         allPolitiesLoaded = true;
                         document.getElementById('loadingIndicator').style.display = 'none';
+                        setSliderTicks();
 
                         return fetch('/core/provinces_and_countries');
                     })

From dd3cfd27ce6c2b09eef4f4a65b6755b99ef38313 Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Mon, 24 Jun 2024 09:44:50 +0100
Subject: [PATCH 29/48] put slider at bottom of world map

---
 seshat/apps/core/templates/core/world_map.html | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/seshat/apps/core/templates/core/world_map.html b/seshat/apps/core/templates/core/world_map.html
index d3a9481e0..75b12aab1 100644
--- a/seshat/apps/core/templates/core/world_map.html
+++ b/seshat/apps/core/templates/core/world_map.html
@@ -189,10 +189,9 @@ <h3>Base Map</h3>
                 <p>Click a country or province.</p>
             </fieldset>
         </div>
-        <div style="display: flex; flex-direction: column; width: 80%">
-            <div id="map" style="height: 85vh; flex: 1; width: 100%"></div>
-            <div id="variableLegend"></div>
-            <div style="display: block; width: 100%">
+        <div style="position: relative; height: 85vh; width: 80%">
+            <div id="map" style="height: 100%; width: 100%; z-index: 0;"></div>
+            <div style="display: block; position: absolute; bottom: 4.5vh; width: 100%; z-index: 2">
                 <fieldset>
                     <div class="slider-container" style="position: relative;">
                         <datalist id="yearTickmarks"></datalist>
@@ -203,12 +202,13 @@ <h3>Base Map</h3>
                     </div>
                 </fieldset>
             </div>
+            <div id="variableLegend"></div>
         </div>
     </div>
     <script src="{% static 'core/js/map_functions.js' %}"></script>
     <script>
 
-        // window.onload = setSliderTicks();
+        window.onload = setSliderTicks();
 
         var categorical_variables = {{ categorical_variables | safe }};
         updateCategoricalVariableSelection('language');  // Set the default categorical variable selection

From d7a13b9c9706062b5fb27e2d3a1d04771755c6f1 Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Mon, 24 Jun 2024 10:01:17 +0100
Subject: [PATCH 30/48] add tick_number as an arg

---
 seshat/apps/core/views.py | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/seshat/apps/core/views.py b/seshat/apps/core/views.py
index 913289dbc..84a27e47a 100644
--- a/seshat/apps/core/views.py
+++ b/seshat/apps/core/views.py
@@ -2674,7 +2674,7 @@ def get_provinces(selected_base_map_gadm='province'):
 
     return provinces
 
-def get_polity_shape_content(displayed_year="all", seshat_id="all"):
+def get_polity_shape_content(displayed_year="all", seshat_id="all", tick_number=10):
     """
         This function returns the polity shapes and other content for the map.
         Only one of displayed_year or seshat_id should be set not both.
@@ -2729,7 +2729,7 @@ def get_polity_shape_content(displayed_year="all", seshat_id="all"):
         latest_year = max([shape['end_year'] for shape in shapes])
 
     # Get the years for the tick marks on the year slider
-    tick_years = [round(year) for year in np.linspace(earliest_year, latest_year, num=10)]
+    tick_years = [round(year) for year in np.linspace(earliest_year, latest_year, num=tick_number)]
 
     content = {
         'shapes': shapes,
@@ -3019,6 +3019,8 @@ def map_view_initial(request):
 
     # For the initial view, set the displayed year to the polity's start year
     content['display_year'] = world_map_initial_displayed_year
+
+    print(content)
     
     return render(request,
                   'core/world_map.html',

From 9b3c8fdcc7b1d7600ff3bc1b07fac6362ba0e77e Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Mon, 24 Jun 2024 10:12:43 +0100
Subject: [PATCH 31/48] update tests to include tick_years

---
 seshat/apps/core/templatetags/core_tags.py |  7 +++++--
 seshat/apps/core/tests/tests.py            | 19 ++++++++++++-------
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/seshat/apps/core/templatetags/core_tags.py b/seshat/apps/core/templatetags/core_tags.py
index 03ce9dc23..611039545 100644
--- a/seshat/apps/core/templatetags/core_tags.py
+++ b/seshat/apps/core/templatetags/core_tags.py
@@ -8,7 +8,7 @@
 register = template.Library()
 
 @register.inclusion_tag('core/polity_map.html')
-def polity_map(pk):
+def polity_map(pk, test=False):
     """
         This function is used by the polity_map template and gets the specific polity shape data and capital information.
         Sets include_polity_map to False if there is no shape data.
@@ -17,7 +17,10 @@ def polity_map(pk):
     page_id = str(pk)
     polity = Polity.objects.get(id=page_id)
     try:
-        content = get_polity_shape_content(seshat_id=polity.new_name)
+        if test:
+            content = get_polity_shape_content(seshat_id=polity.new_name, tick_number=3)
+        else:
+            content = get_polity_shape_content(seshat_id=polity.new_name)
         capitals_info = get_polity_capitals(pk)
         # Set the start and end years to be the same as the polity where missing
         modified_caps = capitals_info
diff --git a/seshat/apps/core/tests/tests.py b/seshat/apps/core/tests/tests.py
index 31f1d9124..c8ffc415b 100644
--- a/seshat/apps/core/tests/tests.py
+++ b/seshat/apps/core/tests/tests.py
@@ -227,13 +227,14 @@ def test_get_polity_shape_content(self):
             ],
             'earliest_year': 0,
             'display_year': 0,
+            'tick_years': json.dumps([0, 1010, 2020]),
             'latest_year': 2020,
             'seshat_id_page_id': {
                 'Test seshat_id': {'id': 1, 'long_name': 'TestPolity'},
                 'Test seshat_id 2': {'id': 2, 'long_name': 'TestPolity2'}
             }
         }
-        result = get_polity_shape_content()
+        result = get_polity_shape_content(tick_number=3)
 
         self.assertEqual(result, expected_result)
 
@@ -260,12 +261,13 @@ def test_get_polity_shape_content_single_year(self):
             ],
             'earliest_year': 0,  # This is the earliest year in the database, not the earliest year of the polity
             'display_year': 2000,
+            'tick_years': json.dumps([0, 1010, 2020]),
             'latest_year': 2020,
             'seshat_id_page_id': {
                 'Test seshat_id': {'id': 1, 'long_name': 'TestPolity'}
             }
         }
-        result = get_polity_shape_content(displayed_year=2000)
+        result = get_polity_shape_content(displayed_year=2000, tick_number=3)
 
         self.assertEqual(result, expected_result)
 
@@ -292,18 +294,19 @@ def test_get_polity_shape_content_single_seshat_id(self):
             ],
             'earliest_year': 2000,  # This is the earliest year of the polity
             'display_year': 2000,
+            'tick_years': json.dumps([2000, 2010, 2020]),
             'latest_year': 2020,
             'seshat_id_page_id': {
                 'Test seshat_id': {'id': 1, 'long_name': 'TestPolity'}
             }
         }
-        result = get_polity_shape_content(seshat_id='Test seshat_id')
+        result = get_polity_shape_content(seshat_id='Test seshat_id', tick_number=3)
 
         self.assertEqual(result, expected_result)
 
     def test_get_polity_shape_content_displayed_year_and_seshat_id_both_set(self):
         """Test that a ValueError is raised if both displayed_year and seshat_id are set."""
-        self.assertRaises(ValueError, get_polity_shape_content, displayed_year=2000, seshat_id='Test seshat_id')
+        self.assertRaises(ValueError, get_polity_shape_content, displayed_year=2000, seshat_id='Test seshat_id', tick_number=3)
 
     def test_get_polity_capitals(self):
         """Test the get_polity_capitals function."""
@@ -348,6 +351,7 @@ def test_polity_map(self):
                 'earliest_year': 2000,
                 'display_year': 2001,  # This is the peak year of the polity
                 'latest_year': 2020,
+                'tick_years': json.dumps([2000, 2010, 2020]),
                 'seshat_id_page_id': {
                     'Test seshat_id': {'id': 1, 'long_name': 'TestPolity'}
                 },
@@ -357,7 +361,7 @@ def test_polity_map(self):
                 ]
             }
         }
-        result = polity_map(self.pk)
+        result = polity_map(self.pk, test=True)
     
         self.assertEqual(result, expected_result)
 
@@ -383,6 +387,7 @@ def test_polity_map_no_peak_year_set(self):
                 'earliest_year': 0,
                 'display_year': 0,
                 'latest_year': 1000,
+                'tick_years': json.dumps([0, 500, 1000]),
                 'seshat_id_page_id': {
                     'Test seshat_id 2': {'id': 2, 'long_name': 'TestPolity2'}
                 },
@@ -393,7 +398,7 @@ def test_polity_map_no_peak_year_set(self):
                 ]
             }
         }
-        result = polity_map(2)
+        result = polity_map(2, test=True)
 
         self.assertEqual(result, expected_result)
 
@@ -404,7 +409,7 @@ def test_polity_map_no_content(self):
                 'include_polity_map': False
             }
         }
-        result = polity_map(3)
+        result = polity_map(3, test=True)
         self.assertEqual(result, expected_result)
 
     def test_map_view_initial(self):

From 858d3eec523f00d0c35a9c3222a97ef3d22d6965 Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Mon, 24 Jun 2024 10:20:12 +0100
Subject: [PATCH 32/48] remove print

---
 seshat/apps/core/views.py | 2 --
 1 file changed, 2 deletions(-)

diff --git a/seshat/apps/core/views.py b/seshat/apps/core/views.py
index 84a27e47a..272693fa3 100644
--- a/seshat/apps/core/views.py
+++ b/seshat/apps/core/views.py
@@ -3019,8 +3019,6 @@ def map_view_initial(request):
 
     # For the initial view, set the displayed year to the polity's start year
     content['display_year'] = world_map_initial_displayed_year
-
-    print(content)
     
     return render(request,
                   'core/world_map.html',

From 5aae546dc36a8ae03505ec7340ff5fe49e9ae661 Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Mon, 24 Jun 2024 10:40:21 +0100
Subject: [PATCH 33/48] use tick_years from django

---
 seshat/apps/core/static/core/js/map_functions.js | 16 ++++++----------
 seshat/apps/core/templates/core/polity_map.html  |  2 +-
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/seshat/apps/core/static/core/js/map_functions.js b/seshat/apps/core/static/core/js/map_functions.js
index e5d62ce13..25e2d2969 100644
--- a/seshat/apps/core/static/core/js/map_functions.js
+++ b/seshat/apps/core/static/core/js/map_functions.js
@@ -42,18 +42,13 @@ function updateSliderValue(value) {
     plotPolities();
 }
 
-function setSliderTicks () {
-    var min = parseInt(document.getElementById('dateSlide').min);
-    var max = parseInt(document.getElementById('dateSlide').max);
+function setSliderTicks (tickYears) {
     var datalist = document.getElementById('yearTickmarks');
     var tickmarkValuesDiv = document.getElementById('yearTickmarkValues');
 
-    // Calculate the increment for 9 intervals, resulting in 10 tickmarks
-    var increment = (max - min) / 9;
-
     // Loop to add tickmarks
-    for (var i = 0; i <= 9; i++) {
-        var tickValue = Math.round(min + increment * i);
+    i = 0;
+    for (const tickValue of tickYears) {
         var option = document.createElement('option');
         option.value = tickValue;
         datalist.appendChild(option);
@@ -65,17 +60,18 @@ function setSliderTicks () {
         span.style.textAlign = 'center';
 
         // Use transform to center the span over the tickmark, with special handling for the first and last span
-        var leftPercentage = (i / 9 * 100);
+        var leftPercentage = (i / (tickYears.length - 1) * 100);
         span.style.left = `${leftPercentage}%`;
         if (i === 0) {
             span.style.transform = 'translateX(0%)'; // No translation for the first span
             span.style.textAlign = 'left'; // Align text to the left for the first span
-        } else if (i === 9) {
+       } else if (i === (tickYears.length - 1)) {
             span.style.transform = 'translateX(-100%)'; // Adjust the last span to prevent overflow
         } else {
             span.style.transform = 'translateX(-50%)'; // Center all other spans
         }
         tickmarkValuesDiv.appendChild(span);
+        i++;
     }
 };
 
diff --git a/seshat/apps/core/templates/core/polity_map.html b/seshat/apps/core/templates/core/polity_map.html
index ef06e749d..8b029c833 100644
--- a/seshat/apps/core/templates/core/polity_map.html
+++ b/seshat/apps/core/templates/core/polity_map.html
@@ -81,7 +81,7 @@ <h2 class="h1 text-teal federicka-bigger" id="sliderDate"></h2>
         <script src="{% static 'core/js/map_functions.js' %}"></script>
         <script>
 
-            window.onload = setSliderTicks();
+            window.onload = setSliderTicks({{ content.tick_years }});
 
             var allPolitiesLoaded = false;
 

From 2cd74ff5355ec86dfdabc6c5a70eb4fe898285f9 Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Mon, 24 Jun 2024 10:40:55 +0100
Subject: [PATCH 34/48] set default tick_number to 20, but 10 for polity map

---
 seshat/apps/core/templatetags/core_tags.py | 2 +-
 seshat/apps/core/views.py                  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/seshat/apps/core/templatetags/core_tags.py b/seshat/apps/core/templatetags/core_tags.py
index 611039545..eff7d17f9 100644
--- a/seshat/apps/core/templatetags/core_tags.py
+++ b/seshat/apps/core/templatetags/core_tags.py
@@ -20,7 +20,7 @@ def polity_map(pk, test=False):
         if test:
             content = get_polity_shape_content(seshat_id=polity.new_name, tick_number=3)
         else:
-            content = get_polity_shape_content(seshat_id=polity.new_name)
+            content = get_polity_shape_content(seshat_id=polity.new_name, tick_number=10)
         capitals_info = get_polity_capitals(pk)
         # Set the start and end years to be the same as the polity where missing
         modified_caps = capitals_info
diff --git a/seshat/apps/core/views.py b/seshat/apps/core/views.py
index 272693fa3..b68a2ca9d 100644
--- a/seshat/apps/core/views.py
+++ b/seshat/apps/core/views.py
@@ -2674,7 +2674,7 @@ def get_provinces(selected_base_map_gadm='province'):
 
     return provinces
 
-def get_polity_shape_content(displayed_year="all", seshat_id="all", tick_number=10):
+def get_polity_shape_content(displayed_year="all", seshat_id="all", tick_number=20):
     """
         This function returns the polity shapes and other content for the map.
         Only one of displayed_year or seshat_id should be set not both.

From fde5b2ca581f3a3e07d8217f2b70784d6de12082 Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Mon, 24 Jun 2024 10:43:47 +0100
Subject: [PATCH 35/48] set slider ticks in world map

---
 seshat/apps/core/templates/core/world_map.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/seshat/apps/core/templates/core/world_map.html b/seshat/apps/core/templates/core/world_map.html
index 75b12aab1..a944c9723 100644
--- a/seshat/apps/core/templates/core/world_map.html
+++ b/seshat/apps/core/templates/core/world_map.html
@@ -208,7 +208,7 @@ <h3>Base Map</h3>
     <script src="{% static 'core/js/map_functions.js' %}"></script>
     <script>
 
-        window.onload = setSliderTicks();
+        window.onload = setSliderTicks({{ tick_years }});
 
         var categorical_variables = {{ categorical_variables | safe }};
         updateCategoricalVariableSelection('language');  // Set the default categorical variable selection
@@ -324,7 +324,7 @@ <h3>Base Map</h3>
                         document.getElementById('dateSlide').max = data.latest_year;
                         allPolitiesLoaded = true;
                         document.getElementById('loadingIndicator').style.display = 'none';
-                        setSliderTicks();
+                        setSliderTicks({{ data.tick_years }});
 
                         return fetch('/core/provinces_and_countries');
                     })

From e604491e54822d70935902aa13c53c8a35f0bb17 Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Mon, 24 Jun 2024 11:10:51 +0100
Subject: [PATCH 36/48] update ticks once everything loaded

---
 seshat/apps/core/static/core/js/map_functions.js | 9 +++++++++
 seshat/apps/core/templates/core/world_map.html   | 6 ++++--
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/seshat/apps/core/static/core/js/map_functions.js b/seshat/apps/core/static/core/js/map_functions.js
index 25e2d2969..c79fb516b 100644
--- a/seshat/apps/core/static/core/js/map_functions.js
+++ b/seshat/apps/core/static/core/js/map_functions.js
@@ -46,6 +46,15 @@ function setSliderTicks (tickYears) {
     var datalist = document.getElementById('yearTickmarks');
     var tickmarkValuesDiv = document.getElementById('yearTickmarkValues');
 
+    // If the data list already has options, remove them
+    while (datalist.firstChild) {
+        datalist.removeChild(datalist.firstChild);
+    };
+    // If the tickmark values div already has spans, remove them
+    while (tickmarkValuesDiv.firstChild) {
+        tickmarkValuesDiv.removeChild(tickmarkValuesDiv.firstChild);
+    };
+
     // Loop to add tickmarks
     i = 0;
     for (const tickValue of tickYears) {
diff --git a/seshat/apps/core/templates/core/world_map.html b/seshat/apps/core/templates/core/world_map.html
index a944c9723..334984c25 100644
--- a/seshat/apps/core/templates/core/world_map.html
+++ b/seshat/apps/core/templates/core/world_map.html
@@ -208,7 +208,8 @@ <h3>Base Map</h3>
     <script src="{% static 'core/js/map_functions.js' %}"></script>
     <script>
 
-        window.onload = setSliderTicks({{ tick_years }});
+        var tick_years = {{ tick_years }};
+        window.onload = setSliderTicks(tick_years);
 
         var categorical_variables = {{ categorical_variables | safe }};
         updateCategoricalVariableSelection('language');  // Set the default categorical variable selection
@@ -324,12 +325,13 @@ <h3>Base Map</h3>
                         document.getElementById('dateSlide').max = data.latest_year;
                         allPolitiesLoaded = true;
                         document.getElementById('loadingIndicator').style.display = 'none';
-                        setSliderTicks({{ data.tick_years }});
+                        tick_years =  JSON.parse(data.tick_years);
 
                         return fetch('/core/provinces_and_countries');
                     })
                     .then(response => response.json())
                     .then(data => {
+                        setSliderTicks(tick_years);
                         provinceShapeData = data.provinces.map(function (shape) {
                             return {
                                 geometry: JSON.parse(shape.aggregated_geometry),

From 40f3d266ad6f35af3a54a9ef64a349e9ce5524ad Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Mon, 24 Jun 2024 11:27:50 +0100
Subject: [PATCH 37/48] add override_latest_year

---
 seshat/apps/core/views.py | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/seshat/apps/core/views.py b/seshat/apps/core/views.py
index b68a2ca9d..3a822757e 100644
--- a/seshat/apps/core/views.py
+++ b/seshat/apps/core/views.py
@@ -2674,7 +2674,7 @@ def get_provinces(selected_base_map_gadm='province'):
 
     return provinces
 
-def get_polity_shape_content(displayed_year="all", seshat_id="all", tick_number=20):
+def get_polity_shape_content(displayed_year="all", seshat_id="all", tick_number=20, override_earliest_year=None, override_latest_year=None):
     """
         This function returns the polity shapes and other content for the map.
         Only one of displayed_year or seshat_id should be set not both.
@@ -2720,6 +2720,11 @@ def get_polity_shape_content(displayed_year="all", seshat_id="all", tick_number=
         earliest_year, latest_year = 2014, 2014
         initial_displayed_year = -3400
 
+    if override_earliest_year is not None:
+        earliest_year = override_earliest_year
+    if override_latest_year is not None:
+        latest_year = override_latest_year
+
     if displayed_year == "all":
         displayed_year = initial_displayed_year 
 
@@ -2982,10 +2987,6 @@ def common_map_view_content(content):
     # Add categorical variable choices to content for dropdown selection
     content['categorical_variables'] = categorical_variables
 
-    # TODO: Temporary restriction on the latest year for the map view
-    if content['latest_year'] > 2014:
-        content['latest_year'] = 2014
-
     # Set the initial polity to highlight
     content['world_map_initial_polity'] = world_map_initial_polity
 
@@ -3043,7 +3044,8 @@ def map_view_all(request):
         The view loads all polities for the range of years.
     """
 
-    content = get_polity_shape_content()
+    # Temporary restriction on the latest year for the whole map view
+    content = get_polity_shape_content(override_latest_year=2014)
 
     content = common_map_view_content(content)
     

From a0760b53552dfa4be172dfb1b1a06ee2775b8543 Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Mon, 24 Jun 2024 11:44:58 +0100
Subject: [PATCH 38/48] show initial ticks

---
 seshat/apps/core/templates/core/world_map.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/seshat/apps/core/templates/core/world_map.html b/seshat/apps/core/templates/core/world_map.html
index 334984c25..5ee572ec4 100644
--- a/seshat/apps/core/templates/core/world_map.html
+++ b/seshat/apps/core/templates/core/world_map.html
@@ -208,9 +208,6 @@ <h3>Base Map</h3>
     <script src="{% static 'core/js/map_functions.js' %}"></script>
     <script>
 
-        var tick_years = {{ tick_years }};
-        window.onload = setSliderTicks(tick_years);
-
         var categorical_variables = {{ categorical_variables | safe }};
         updateCategoricalVariableSelection('language');  // Set the default categorical variable selection
 
@@ -285,6 +282,9 @@ <h3>Base Map</h3>
 
         var allPolitiesLoaded = false;  // Used in storeYear()
 
+        var tick_years = {{ tick_years }};
+        setSliderTicks(tick_years);
+
         // Load all polity shapes and modern province/country shapes in background
         window.addEventListener('load', function () {
             function fetchData(url, displayYear) {
@@ -325,7 +325,7 @@ <h3>Base Map</h3>
                         document.getElementById('dateSlide').max = data.latest_year;
                         allPolitiesLoaded = true;
                         document.getElementById('loadingIndicator').style.display = 'none';
-                        tick_years =  JSON.parse(data.tick_years);
+                        tick_years = JSON.parse(data.tick_years);
 
                         return fetch('/core/provinces_and_countries');
                     })

From bbaa7d7ecba9eacef8840f7c5057181271dee65a Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Mon, 24 Jun 2024 12:06:40 +0100
Subject: [PATCH 39/48] add comment

---
 seshat/apps/core/templates/core/world_map.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/seshat/apps/core/templates/core/world_map.html b/seshat/apps/core/templates/core/world_map.html
index 5ee572ec4..36ae3023a 100644
--- a/seshat/apps/core/templates/core/world_map.html
+++ b/seshat/apps/core/templates/core/world_map.html
@@ -902,7 +902,7 @@ <h3>Base Map</h3>
         // Display slider value
         var slider = document.getElementById("dateSlide");
         var enterYearInput = document.getElementById("enterYear");
-        var output = document.getElementById("sliderDate");
+        var output = document.getElementById("sliderDate");  // Used in updateSliderOutput()
         updateSliderOutput(); // Display the default slider value
 
         // Update the current slider value (each time you drag the slider handle)

From 38f9c1758b884028801b973fab99aa8a4d33dcd5 Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Mon, 24 Jun 2024 12:15:22 +0100
Subject: [PATCH 40/48] hide slider before all polities loaded

---
 seshat/apps/core/templates/core/world_map.html | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/seshat/apps/core/templates/core/world_map.html b/seshat/apps/core/templates/core/world_map.html
index 36ae3023a..c402adcbb 100644
--- a/seshat/apps/core/templates/core/world_map.html
+++ b/seshat/apps/core/templates/core/world_map.html
@@ -191,7 +191,7 @@ <h3>Base Map</h3>
         </div>
         <div style="position: relative; height: 85vh; width: 80%">
             <div id="map" style="height: 100%; width: 100%; z-index: 0;"></div>
-            <div style="display: block; position: absolute; bottom: 4.5vh; width: 100%; z-index: 2">
+            <div id="sliderdiv" style="display: block; position: absolute; bottom: 4.5vh; width: 100%; z-index: 2; display: none;">
                 <fieldset>
                     <div class="slider-container" style="position: relative;">
                         <datalist id="yearTickmarks"></datalist>
@@ -324,7 +324,6 @@ <h3>Base Map</h3>
                         document.getElementById('dateSlide').min = data.earliest_year;
                         document.getElementById('dateSlide').max = data.latest_year;
                         allPolitiesLoaded = true;
-                        document.getElementById('loadingIndicator').style.display = 'none';
                         tick_years = JSON.parse(data.tick_years);
 
                         return fetch('/core/provinces_and_countries');
@@ -332,6 +331,8 @@ <h3>Base Map</h3>
                     .then(response => response.json())
                     .then(data => {
                         setSliderTicks(tick_years);
+                        document.getElementById('sliderdiv').style.display = 'block';
+                        document.getElementById('loadingIndicator').style.display = 'none';
                         provinceShapeData = data.provinces.map(function (shape) {
                             return {
                                 geometry: JSON.parse(shape.aggregated_geometry),

From 5e8f30212d87136da6e27834ce7ef69fae0a3e85 Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Mon, 24 Jun 2024 12:32:39 +0100
Subject: [PATCH 41/48] fix display year

---
 seshat/apps/core/templates/core/world_map.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/seshat/apps/core/templates/core/world_map.html b/seshat/apps/core/templates/core/world_map.html
index c402adcbb..be9479d43 100644
--- a/seshat/apps/core/templates/core/world_map.html
+++ b/seshat/apps/core/templates/core/world_map.html
@@ -195,8 +195,8 @@ <h3>Base Map</h3>
                 <fieldset>
                     <div class="slider-container" style="position: relative;">
                         <datalist id="yearTickmarks"></datalist>
-                        <input type="range" name="dateSlide" id="dateSlide" min="{{ content.earliest_year }}"
-                            max="{{ content.latest_year }}" value="{{ content.display_year }}" class="slider"
+                        <input type="range" name="dateSlide" id="dateSlide" min="{{ earliest_year }}"
+                            max="{{ latest_year }}" value="{{ display_year }}" class="slider"
                             onchange="plotPolities()" style="width: 100%;" list="yearTickmarks">
                         <div id="yearTickmarkValues"></div>
                     </div>

From bdf39f764025e690d9f027fc1e20fe174b799670 Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Mon, 24 Jun 2024 12:36:18 +0100
Subject: [PATCH 42/48] restore slider initially

---
 seshat/apps/core/templates/core/world_map.html | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/seshat/apps/core/templates/core/world_map.html b/seshat/apps/core/templates/core/world_map.html
index be9479d43..533f33364 100644
--- a/seshat/apps/core/templates/core/world_map.html
+++ b/seshat/apps/core/templates/core/world_map.html
@@ -191,7 +191,7 @@ <h3>Base Map</h3>
         </div>
         <div style="position: relative; height: 85vh; width: 80%">
             <div id="map" style="height: 100%; width: 100%; z-index: 0;"></div>
-            <div id="sliderdiv" style="display: block; position: absolute; bottom: 4.5vh; width: 100%; z-index: 2; display: none;">
+            <div id="sliderdiv" style="display: block; position: absolute; bottom: 4.5vh; width: 100%; z-index: 2">
                 <fieldset>
                     <div class="slider-container" style="position: relative;">
                         <datalist id="yearTickmarks"></datalist>
@@ -325,14 +325,13 @@ <h3>Base Map</h3>
                         document.getElementById('dateSlide').max = data.latest_year;
                         allPolitiesLoaded = true;
                         tick_years = JSON.parse(data.tick_years);
+                        setSliderTicks(tick_years);
+                        document.getElementById('loadingIndicator').style.display = 'none';
 
                         return fetch('/core/provinces_and_countries');
                     })
                     .then(response => response.json())
                     .then(data => {
-                        setSliderTicks(tick_years);
-                        document.getElementById('sliderdiv').style.display = 'block';
-                        document.getElementById('loadingIndicator').style.display = 'none';
                         provinceShapeData = data.provinces.map(function (shape) {
                             return {
                                 geometry: JSON.parse(shape.aggregated_geometry),

From 82a6b95619fb2fe461f49dcd709428fb42ba0b86 Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Mon, 24 Jun 2024 16:26:02 +0100
Subject: [PATCH 43/48] improve text

---
 seshat/apps/core/templates/core/world_map.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/seshat/apps/core/templates/core/world_map.html b/seshat/apps/core/templates/core/world_map.html
index 533f33364..e1ac681e1 100644
--- a/seshat/apps/core/templates/core/world_map.html
+++ b/seshat/apps/core/templates/core/world_map.html
@@ -161,7 +161,7 @@ <h3>Polities</h3>
                     <input type="checkbox" id="showCapitals" name="showCapitals" onclick=plotPolities()><br><br> -->
                 </div>
             </fieldset>
-            <p>🗣️ <i>Double clicks open Seshat pages.</i></p>
+            <p>🗣️ <i>Double click to reach polity pages.</i></p>
             <fieldset>
                 <legend>
                     <h3>Base Map</h3>

From 4c2598dfd7adb37fbede5bcc7e1e5e1814b0ad95 Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Mon, 24 Jun 2024 16:36:29 +0100
Subject: [PATCH 44/48] make previous variable button smaller

---
 seshat/apps/core/templates/core/world_map.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/seshat/apps/core/templates/core/world_map.html b/seshat/apps/core/templates/core/world_map.html
index e1ac681e1..eb50f2175 100644
--- a/seshat/apps/core/templates/core/world_map.html
+++ b/seshat/apps/core/templates/core/world_map.html
@@ -128,7 +128,7 @@ <h3>Polities</h3>
                     </select><br>
                     <fieldset id="previouslySelectedVariableFieldset" style="display: none">
                         <label for="previouslySelectedVariable">Variable: </label>
-                        <button id="previouslySelectedVariable" type="button" onclick="previouslySelectedVariableButton()" style="width: 200px; text-overflow: ellipsis;">Previous variable</button><br>
+                        <button id="previouslySelectedVariable" type="button" onclick="previouslySelectedVariableButton()" style="width: 150px; text-overflow: ellipsis;">Previous variable</button><br>
                     </fieldset>
                     <fieldset id="chooseCategoricalVariableSelectionFieldset">
                         <label for="chooseCategoricalVariableSelection"></label>

From 3c537bc58d96e8c79b5eb329e55c1d8314c27b92 Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Mon, 24 Jun 2024 16:45:31 +0100
Subject: [PATCH 45/48] reduce side panel width

---
 seshat/apps/core/templates/core/world_map.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/seshat/apps/core/templates/core/world_map.html b/seshat/apps/core/templates/core/world_map.html
index eb50f2175..d1afb2b64 100644
--- a/seshat/apps/core/templates/core/world_map.html
+++ b/seshat/apps/core/templates/core/world_map.html
@@ -92,7 +92,7 @@
     {% include "core/partials/_navbar.html" %}
     {% block content %}
     <div style="display: flex;">
-        <div style="width: 20%">
+        <div style="width: 15%">
             <fieldset>
                 <legend>
                     <h3>Polities</h3>

From 623168dd259fee02f2fbbeab9d44264c2d1a5d6d Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Mon, 24 Jun 2024 16:50:28 +0100
Subject: [PATCH 46/48] put year at top

---
 seshat/apps/core/templates/core/world_map.html | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/seshat/apps/core/templates/core/world_map.html b/seshat/apps/core/templates/core/world_map.html
index d1afb2b64..5cc3f0bdd 100644
--- a/seshat/apps/core/templates/core/world_map.html
+++ b/seshat/apps/core/templates/core/world_map.html
@@ -95,7 +95,7 @@
         <div style="width: 15%">
             <fieldset>
                 <legend>
-                    <h3>Polities</h3>
+                    <h3 class="h1 text-teal federicka-bigger" id="sliderDate"></h3>
                     <!-- Add a loading indicator -->
                     <div id="loadingIndicator">
                         <p id="loadingText" style="font-size: 16px;">Loading all polities for all years...</p>
@@ -138,8 +138,7 @@ <h3>Polities</h3>
                     <label for="enterYear">Enter year:</label>
                     <input type="number" id="enterYear" name="enterYear" value="{{ display_year }}" style="width: 75px;" onchange="storeYear()">
                     <button id="minusButton" type="button" onclick="adjustSliderDown()">-</button>
-                    <button id="plusButton" type="button" onclick="adjustSliderUp()">+</button><br>
-                    <label for="sliderDate">Selected year:&nbsp;</label><span id="sliderDate"></span><br><br>
+                    <button id="plusButton" type="button" onclick="adjustSliderUp()">+</button><br><br>
                     <label for="playButton">Run animation:</label>
                     <button id="playButton" type="button" onclick="startPlay()">▶️</button>
                     <button id="stopButton" type="button" onclick="stopPlay()">⏸</button><br>

From f6a40632ca554cf7651a53e5ef923487db0ea845 Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Mon, 24 Jun 2024 16:54:13 +0100
Subject: [PATCH 47/48] move speed to centre

---
 seshat/apps/core/templates/core/world_map.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/seshat/apps/core/templates/core/world_map.html b/seshat/apps/core/templates/core/world_map.html
index 5cc3f0bdd..19bf0f1ee 100644
--- a/seshat/apps/core/templates/core/world_map.html
+++ b/seshat/apps/core/templates/core/world_map.html
@@ -151,8 +151,8 @@ <h3 class="h1 text-teal federicka-bigger" id="sliderDate"></h3>
                         <option value="3"></option>
                         <option value="4"></option>
                         <option value="5"></option>
-                    </datalist>
-                    <span id="sliderValue">5 y/s</span><br><br>
+                    </datalist><br>
+                    <div style="text-align: center;"><span id="sliderValue">5 y/s</span></div><br>
                     <label for="opacitySlide">Opacity:</label>
                     <input type="range" name="opacitySlide" id="opacitySlide" min="0.1" max="1" step="0.1" value="0.5" class="slider" onchange="plotPolities()" style="width: 150px;"><br><br>
                     <!-- TODO: Uncomment this when there are more capitals with coordinates in the database -->

From 4c537601f2e34d37fb83824fbcc83de9398a5676 Mon Sep 17 00:00:00 2001
From: Ed Chalstrey <edwardchalstrey@gmail.com>
Date: Mon, 24 Jun 2024 17:00:06 +0100
Subject: [PATCH 48/48] increase size of polity map window

---
 seshat/apps/core/templates/core/polity_map.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/seshat/apps/core/templates/core/polity_map.html b/seshat/apps/core/templates/core/polity_map.html
index 8b029c833..fbefce690 100644
--- a/seshat/apps/core/templates/core/polity_map.html
+++ b/seshat/apps/core/templates/core/polity_map.html
@@ -63,8 +63,8 @@ <h2 class="h1 text-teal federicka-bigger" id="sliderDate"></h2>
                     </div>
                 </fieldset>
             </div>
-            <div style="display: flex; flex-direction: column; width: 80%">
-                <div id="map" style="height: 30vh; flex: 1; width: 100%"></div>
+            <div style="display: flex; flex-direction: column; width: 80%; height: 60vh;">
+                <div id="map" style="flex: 1; width: 100%"></div>
                 <div style="display: block; width: 100%">
                     <fieldset>
                         <div class="slider-container" style="position: relative;">