User:Eleni/Special Issue 25/Soundmap: Difference between revisions

From XPUB & Lens-Based wiki
No edit summary
No edit summary
Β 
(14 intermediate revisions by 2 users not shown)
Line 1: Line 1:
== Sound Map ==


Inspired by Sara Lana's DIY Soundmap Tutorial<ref>https://saralana.xyz/sound-map</ref>, I decided to create a soundmap as a way to archive the field recordings we have created. Could be considered a companion to [[Radio WORM: Protocols for Collective Performance/Radio Broadcast 02|Broadcast Week 2]]. <blockquote>You can see the current state of the project [https://hub.xpub.nl/cerealbox/~eleni/soundmap/soundmap.html here!]</blockquote>
The idea for this project came to me after taking part in the second Broadcast on Radio Worm, for the Special Issue 25. We had collected so many field recordings from all around the city of Rotterdam, and I wanted to create a dynamic archive centered around them. Coinsidentally, in the same month I came across [https://saralana.xyz/sound-map this tutorial on how to make a DIY soundmap] . Everything clicked in my mind and I started the project as a past time in October. With the help of Sevgi and Imre it turned into something much bigger! πŸ’•
[[File:Ust-sticker(1).png|frameless|right|323x323px]]


== Cookbook ==
[[File:Screenshot_2024-10-26_223107.png|thumb|328x328px|change of plans]]


=== 26/10/2024 ===
==Initial Version==
====Steps taken====
It only took a few hours of working with the tutorial to realize that I wouldn't be able to customize the map or the popups, since the final result would be an <iframe> in my html. Alas, I was not deflatedβ€” the plan simply changed. We went '''truly''' DIY. However, I am providing the steps I took in case you, the reader of this monologue, would like to make your own soundmap sweat-free. '''PS'''. Don't fret! I will be providing a full tutorial of how I made the final, fully customizable version further below!
# Signed up to UMAP and created a new map
===Steps taken===
# Customized the map, centered it on Rotterdam
[[File:Screenshot_2024-10-26_223107.png|right|frameless|339x339px]]
# Created a csv file on cerealbox, where the data would go
#Signed up to UMAP and created a new map
# Linked the csv file to the UMAP
#Customized the map, centered it on Rotterdam
# Created HTML page on the cerealbox and embeded the map
#Created a csv file on cerealbox, where the data would go
====Version====
#Linked the csv file to the UMAP
#Created HTML page on the cerealbox and embeded the map
Β 
=== Result===
<gallery mode="packed-hover" widths="450" heights="200">
<gallery mode="packed-hover" widths="450" heights="200">
File:Screenshot 2024-10-26 223437.png
File:Screenshot 2024-10-26 223437.png
Line 19: Line 20:
</gallery>
</gallery>


=== 10/11/2024 ===
====Next Steps:====
====Steps taken====
As I stated above, I had to scrap the whole progress, as my expectations for the project had started getting higher.
Scrapped the whole thing, unfortunately. I started from scratch, following this documentation: [https://wiki.openstreetmap.org/wiki/OpenLayers_Simple_Example OpenLayers Simple Example]<br>
and then moved on to [https://leafletjs.com leafletjs.com]


====Version====
== New Version ==
[[File:Screenshot 2024-11-10 214036.png|456x456px|left|frameless]]
[[File:Screenshot 2024-11-10 214036.png|456x456px|left|frameless]]


==Data==
[[User:Eleni/Special Issue 25/Soundmap/Data|find uploaded data here!]]


==Resources==
https://cdnjs.com/ for libraries


http://alexurquhart.github.io/free-tiles/ for tiles


[https://www.openstreetmap.org/#map=7/52.154/5.295 OpenStreetMap]


Β 
[https://leafletjs.com/ leafletjs]
Β 
Β 
== References ==

Latest revision as of 19:42, 16 November 2024

The idea for this project came to me after taking part in the second Broadcast on Radio Worm, for the Special Issue 25. We had collected so many field recordings from all around the city of Rotterdam, and I wanted to create a dynamic archive centered around them. Coinsidentally, in the same month I came across this tutorial on how to make a DIY soundmap . Everything clicked in my mind and I started the project as a past time in October. With the help of Sevgi and Imre it turned into something much bigger! πŸ’•

Ust-sticker(1).png


Initial Version

It only took a few hours of working with the tutorial to realize that I wouldn't be able to customize the map or the popups, since the final result would be an <iframe> in my html. Alas, I was not deflatedβ€” the plan simply changed. We went truly DIY. However, I am providing the steps I took in case you, the reader of this monologue, would like to make your own soundmap sweat-free. PS. Don't fret! I will be providing a full tutorial of how I made the final, fully customizable version further below!

Steps taken

Screenshot 2024-10-26 223107.png
  1. Signed up to UMAP and created a new map
  2. Customized the map, centered it on Rotterdam
  3. Created a csv file on cerealbox, where the data would go
  4. Linked the csv file to the UMAP
  5. Created HTML page on the cerealbox and embeded the map

Result

Next Steps:

As I stated above, I had to scrap the whole progress, as my expectations for the project had started getting higher.

New Version

Screenshot 2024-11-10 214036.png

Data

find uploaded data here!

Resources

https://cdnjs.com/ for libraries

http://alexurquhart.github.io/free-tiles/ for tiles

OpenStreetMap

leafletjs