Skip to content
New issue

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

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

Already on GitHub? Sign in to your account

Update world map and polity map look and feel #170

Merged
merged 48 commits into from
Jun 24, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
48 commits
Select commit Hold shift + click to select a range
e5d65b5
use duration when start or end year missing for absent present vars
edwardchalstrey1 Jun 19, 2024
7182987
rename var
edwardchalstrey1 Jun 19, 2024
9f7e513
format BCE/CE correctly
edwardchalstrey1 Jun 19, 2024
10ecec7
make uncoded and no seshat page the same colour
edwardchalstrey1 Jun 19, 2024
434f886
make switch variable button consistent
edwardchalstrey1 Jun 19, 2024
dbbbc13
add speed in y/s
edwardchalstrey1 Jun 19, 2024
0e662f3
simplify instructions
edwardchalstrey1 Jun 19, 2024
a03693f
update polity map playRate to be same as world map
edwardchalstrey1 Jun 19, 2024
6066bb1
set minZoom
edwardchalstrey1 Jun 19, 2024
cfb886e
restrict map bounds
edwardchalstrey1 Jun 19, 2024
3dba145
move year slider to bottom of polity map
edwardchalstrey1 Jun 19, 2024
d276b4f
add tickmarks
edwardchalstrey1 Jun 19, 2024
b48fbcf
Revert "add tickmarks"
edwardchalstrey1 Jun 19, 2024
61f6441
add a middle year to tickmarks
edwardchalstrey1 Jun 19, 2024
8e84a83
restore 10 tickmarks
edwardchalstrey1 Jun 19, 2024
9ee279a
added ticks badly positioned
edwardchalstrey1 Jun 19, 2024
dc3c90a
correct number of tickmarks
edwardchalstrey1 Jun 19, 2024
27cfaf4
tickmarks are accurate but labels don't line up neatly
edwardchalstrey1 Jun 21, 2024
6bfc52b
center tick values
edwardchalstrey1 Jun 21, 2024
3840371
ticks perfect
edwardchalstrey1 Jun 21, 2024
910cb12
move year controls to left
edwardchalstrey1 Jun 21, 2024
b48c45f
adjust header and year
edwardchalstrey1 Jun 21, 2024
389641e
rearrange controls
edwardchalstrey1 Jun 21, 2024
6f1566f
move year into fieldset
edwardchalstrey1 Jun 21, 2024
187a7c1
put slider below map
edwardchalstrey1 Jun 21, 2024
1df3aa2
fix width issues
edwardchalstrey1 Jun 21, 2024
2675b8e
create setSliderTicks func
edwardchalstrey1 Jun 21, 2024
dc02dd8
works for world map all years but not initial
edwardchalstrey1 Jun 21, 2024
dd3cfd2
put slider at bottom of world map
edwardchalstrey1 Jun 24, 2024
d7a13b9
add tick_number as an arg
edwardchalstrey1 Jun 24, 2024
9b3c8fd
update tests to include tick_years
edwardchalstrey1 Jun 24, 2024
858d3ee
remove print
edwardchalstrey1 Jun 24, 2024
5aae546
use tick_years from django
edwardchalstrey1 Jun 24, 2024
2cd74ff
set default tick_number to 20, but 10 for polity map
edwardchalstrey1 Jun 24, 2024
fde5b2c
set slider ticks in world map
edwardchalstrey1 Jun 24, 2024
e604491
update ticks once everything loaded
edwardchalstrey1 Jun 24, 2024
40f3d26
add override_latest_year
edwardchalstrey1 Jun 24, 2024
a0760b5
show initial ticks
edwardchalstrey1 Jun 24, 2024
bbaa7d7
add comment
edwardchalstrey1 Jun 24, 2024
38f9c17
hide slider before all polities loaded
edwardchalstrey1 Jun 24, 2024
5e8f302
fix display year
edwardchalstrey1 Jun 24, 2024
bdf39f7
restore slider initially
edwardchalstrey1 Jun 24, 2024
82a6b95
improve text
edwardchalstrey1 Jun 24, 2024
4c2598d
make previous variable button smaller
edwardchalstrey1 Jun 24, 2024
3c537bc
reduce side panel width
edwardchalstrey1 Jun 24, 2024
623168d
put year at top
edwardchalstrey1 Jun 24, 2024
f6a4063
move speed to centre
edwardchalstrey1 Jun 24, 2024
4c53760
increase size of polity map window
edwardchalstrey1 Jun 24, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 70 additions & 0 deletions seshat/apps/core/static/core/js/map_functions.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,70 @@ 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 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) {
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 / (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 === (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++;
}
};

function startPlay() {
stopPlay(); // Clear existing interval before starting a new one

Expand Down Expand Up @@ -226,6 +290,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');
Expand Down Expand Up @@ -254,6 +321,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');
Expand Down
9 changes: 4 additions & 5 deletions seshat/apps/core/templates/core/polity/polity_detail.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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 %}
Expand Down
104 changes: 64 additions & 40 deletions seshat/apps/core/templates/core/polity_map.html
Original file line number Diff line number Diff line change
Expand Up @@ -13,60 +13,76 @@
{% block content %}
{% if content.include_polity_map %}
<div style="display: flex;">
<div>
<div style="width: 20%">
<fieldset>
<div class="slidecontainer">
<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>
<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>
<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;">
<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 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;">
<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({{ content.tick_years }});

var allPolitiesLoaded = false;

var displayedShapes = [];
Expand Down Expand Up @@ -117,7 +133,15 @@ <h5>Base Map:</h5>
});
});

var map = L.map('map').setView([0, 0], 2);
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 = {
"carto": L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png'),
Expand Down
Loading
Loading