mapping_movements/distances.html

109 lines
3.4 KiB
HTML
Raw Normal View History

2024-01-03 11:47:11 +01:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mapping Movements - Alternative map of movements</title>
<style>
#map {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.initiative {
position: absolute;
top: calc(50% - 50px);
left: 0;
height: 100px;
width: 100px;
overflow: hidden;
transition: left 2s, top 2s;
}
</style>
<script>
class Map {
constructor(mapEl) {
this.mapEl = mapEl;
this.initiatives = []
this.similarities = {}
}
_load() {
return fetch("similarities.json")
.then((response) => {
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
return response.json();
})
.then((response) => {
this.initiatives = response.initiatives
this.similarities = response.similarities
});
}
init() {
this._load()
.then(() => {
this._createElements()
this.selectInitiative(0)
});
}
_createElements() {
this.mapEl.innerHMTL = "";
this.initiatives.forEach((initiative, initiative_idx) => {
const el = document.createElement('div')
el.classList.add('initiative')
el.innerHTML = `
<h2>${initiative.Title}</h2>
<div class='organisation'>${initiative.Organisation}</div>
`;
el.addEventListener('click', (e) => this.selectInitiative(initiative_idx));
initiative['el'] = el;
this.mapEl.appendChild(el);
})
}
selectInitiative(nr) {
this.selectedIndex = nr;
this.selectedInitiative = this.initiatives[nr];
this.similarities[this.selectedIndex].forEach((similarity, initiative_idx) => {
// if (initiative_idx == this.selectedIndex) {
// return;
// }
const el = this.initiatives[initiative_idx]['el'];
const position = window.innerWidth - (similarity * window.innerWidth);
el.style.left = `${position}px`;
// console.log(distance_idx, distance)
});
}
}
var map;
document.addEventListener("DOMContentLoaded", (event) => {
map = new Map(document.getElementById('map'));
map.init()
});
</script>
</head>
<body>
<div class="about">This map was created by Ruben van de Ven for the <em>Mapping Movements</em> pressure cooker,
organised by Creative Coding Utrecht for the Copernicus Institute of the Utrecht University.</div>
<div id="map"></div>
</body>
</html>