1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
|
const map = L.map('map').setView([55.67, 12.56], 12, animate=false);
const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
/* Add togglable layers */
var marker_layer = L.featureGroup();
var heatmap_layer = L.featureGroup();
marker_layer.addTo(map);
// heatmap_layer.addTo(map); // Disabled by default. toggleable by user
/* Add the layer toggle menu in the top right corner */
var overlayMaps = {
"Artwork markers": marker_layer,
"Artwork heatmap": heatmap_layer
};
var layerControl = L.control.layers({},overlayMaps).addTo(map);
/* Heatmap options */
const heatmap_intensity = 35;
const heatmap_radius = 15;
var markers = {};
var myIcon = L.icon({
iconUrl: 'static/icons/pin.svg',
iconSize: [32, 32],
iconAnchor: [16, 32],
popupAnchor: [0, -32]
});
function focus_marker(marker, open=true) {
var mapSize = map.getSize();
var centerX = mapSize.x / 2;
var centerY = mapSize.y * 0.9;
var panX = centerX - mapSize.x / 2;
var panY = centerY - mapSize.y / 2;
// Fit image in view, using a hardcoded offset to fit image
map.flyTo([marker._latlng.lat + panY * 0.000013, marker._latlng.lng], 16, {
animate: true,
duration: 1.0
});
if (open) {
marker.openPopup();
}
}
map.on('popupopen', function (e) {
const popupEl = e.popup.getElement();
if (popupEl) {
const img = popupEl.querySelector('img');
if (img) {
setTimeout(function() {
WZoom.create(img,
{
smoothTime: 0,
minScale: 1,
maxScale: 10,
onGrab: function () {
img.style.cursor = 'grabbing';
},
onDrop: function () {
img.style.cursor = 'grab';
},
}
);
}, 1000);
}
}
});
/*map.on('popupopen', function (e) {
console.log('Popup opened:', e.popup);
const img = e.popup.getElement().querySelector('img');
if (img) {
WZoom.create(img);
}
});*/
fetch('static/js/data.json')
.then(response => response.json())
.then(data => {
function click_marker(marker) {
// Callback, when clicking a marker
// Save work name in URL to allow linking to this work
history.pushState({}, null, `#${marker.target.options.title}`);
focus_marker(marker.target, open=false);
}
const markersData = data;
console.log(markersData)
var ul = document.getElementById('links');
Object.entries(markersData).forEach(([name, markerData], index) => {
var marker = L.marker([markerData.lat, markerData.lng], {icon: myIcon, title: `${name}` }).addTo(marker_layer).on('click', click_marker);;
var authorsList = markerData.authors.join(', ');
marker.bindPopup(`<img id="zoom-image-${index}" class="zoomable-img" src="${markerData.image}" alt="${name}"> ${name} - ${authorsList}`, {maxWidth: 800, closeButton: false});
markers[name] = {marker: marker, index: index};
var link = document.createElement('a');
var pin = document.createElement('img');
pin.classList.add('link-pin');
pin.setAttribute('src', './static/icons/pin.svg');
link.textContent = `${name}`;
link.addEventListener('click', function(event) {
focus_marker(marker, markerData);
// Append open image name to url to allow user to link to a specific image
history.pushState({}, null, `#${name}`);
// Scroll map into view on list click, for phone view
map._container.scrollIntoView()
});
var listItem = document.createElement('li');
listItem.appendChild(link);
ul.appendChild(listItem);
});
// Load image name from url (if relevant) and open it
if (window.location.hash){
focus_marker(markers[decodeURIComponent(window.location.hash.substring(1))].marker);
}
/* Heatmap */
heatmap_layer.clearLayers();
const artworks_heatmap_format = Object.values(markersData).map(r => [r.lat, r.lng, heatmap_intensity]); // Convert data to heatmap format
var heat = L.heatLayer(artworks_heatmap_format, {radius: heatmap_radius}).addTo(heatmap_layer);
});
|
