ruangrupa/lumbung.space
ruangrupa/lumbung.space
1
0
Fork 1
Code Issues 11 Pull Requests Projects Releases Wiki Activity

adds audio and video to leaflet map popup

Browse Source
This commit is contained in:
the-digital-anarchist 2022-09-23 14:23:45 +02:00
parent b8e44aa6e2
commit 78a37c87b7
2 changed files with 33 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
data/geojsonContributors.json
View File

@ -23,7 +23,10 @@
"Rayya Badran",
"Siwar Kraitm",
"Yazan Khalili"
]
],
"video": "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm",
"iframe": "https://tv.lumbung.space/videos/embed/d5b26273-cb7e-4f5e-9041-5694a504405e?title=0",
"audio": "https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3"
}
},
{
@ -48,7 +51,8 @@
"Rayya Badran",
"Siwar Kraitm",
"Yazan Khalili"
]
],
"iframe": "https://tv.lumbung.space/videos/embed/d5b26273-cb7e-4f5e-9041-5694a504405e?title=0"
}
},
{
@ -73,7 +77,8 @@
"Rayya Badran",
"Siwar Kraitm",
"Yazan Khalili"
]
],
"iframe": "https://tv.lumbung.space/videos/embed/d5b26273-cb7e-4f5e-9041-5694a504405e?title=0"
}
},
{

35
themes/lumbung-theme/layouts/shortcodes/map.html
View File

@ -38,28 +38,43 @@
<script>
// Utils
function properties(feature, layer) {
console.log(JSON.stringify(feature.properties))
// Iterate over the properties keys
// NOTE: there is no way for javascipt to preserve the order of de declaration of object values.
// JS will just print in alfabetical order (so if you wanna order it name the keys in alfabetical order like 'a', 'b', 'c')
const textOutput = Object.keys(feature.properties).map(function (key, index) {
console.log(key)
if (key === 'groupName') {
return '<h1>' + feature.properties[key] + '</h1>'
} else if (key === 'listOfNames') {
return '<span><strong>Members:</strong></span><br>' + feature.properties[key].map(function (item) { return '• <span>' + item + '</span><br>' }).join('')
const objectOrder = {
...feature.properties,
"AgroupName": feature.properties.groupName,
"BlistOfNames": feature.properties.listOfNames,
}
if (objectOrder?.groupName) { delete objectOrder.groupName }
if (objectOrder?.listOfNames) { delete objectOrder.listOfNames }
const newObjectOrder = Object.keys(objectOrder).sort()
const textOutput = newObjectOrder.map(function (key, index) {
console.log(key, objectOrder[key])
if (!objectOrder[key]) return
if (key === 'AgroupName') {
return '<h1>' + objectOrder[key] + '</h1>'
} else if (key === 'BlistOfNames') {
return '<div style="padding-bottom: 12px"><span><strong>Members:</strong></span><br>' + objectOrder[key].map(function (item) { return '• <span>' + item + '</span><br>' }).join('') + '</div>'
} else if (key === 'iframe') {
return '<iframe src="' + objectOrder[key] + '" allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups" style="width: 100%; margin-top: 12px; margin-bottom: 12px;" frameborder="0"></iframe>'
} else if (key === 'video') {
return '<video width="320" controls style="padding-bottom: 12px; width: 100%;"><source src="' + objectOrder[key] + '"></video>'
} else if (key === 'audio') {
return '<audio controls style="padding-bottom: 12px; width: 100%;"><source src="' + objectOrder[key] + '"></audio>'
} else {
return '<p>' + feature.properties[key] + '</p>'
return '<p>' + objectOrder[key] + '</p>'
}
});
layer.bindPopup(textOutput.join(''))
layer.bindPopup(textOutput.join(''), { maxHeight: 500, innerWidth: 400 })
}
var map = L.map('map').setView([-7.2344, 108.3211], 3);
window.addEventListener('load', (event) => {
// TODO: find way to make this smoother, now the map first shows partly gray
map.invalidateSize();
});