SI25 Urban Small Talk

Urban Small Talk

Description:

Close your eyes, take a breath… the ambience has something to say. URBAN SMALL TALK is a digital archive of field recordings collected around Rotterdam, offering a new perspective into experiencing the city. Take a stroll around the soundmap and reconnect with Rotterdam, whether you are a fresh acquaintance or an old friend.

Cookbook

change of plans

Initial Steps taken

Signed up to UMAP and created a new map
Customized the map, centered it on Rotterdam
Created a csv file on cerealbox, where the data would go
Linked the csv file to the UMAP
Created HTML page on the cerealbox and embeded the map

Version 1

Next Steps:

Scrapped the whole thing, unfortunately. I started from scratch, following this documentation: OpenLayers Simple Example
and then moved on to leafletjs.com

Latest Version

the map on browser v0000

Eleni used leaflet js library to write a snippet of code and use a .csv file as the database which can be found here: https://pzwiki.wdka.nl/mediadesign/User:Eleni/Special_Issue_25/Soundmap/Data

This is how the code looks like right now:

// setting the center of the maps
    var map = L.map('map').setView([51.924444, 4.469444], 13);
    L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', {
      minZoom: 11,
	    maxZoom: 22,
      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
  }).addTo(map);

  // Read markers data from data.csv
  $.get('data.csv', function(csvString) {

  // Use PapaParse to convert string to array of objects
  var data = Papa.parse(csvString, {header: true, dynamicTyping: true}).data;

  // For each row in data, create a marker and add it to the map
  // For each row, columns `Latitude`, `Longitude`, and `Title` are required
  for (var i in data) {
    var row = data[i];

    // code from https://gist.github.com/uafrazier/d589caa322f1b1e7c651
    var customPopup = "<h2>"+row.Title+"</h2><p>"+row.Description+"</p>"+"<audio id='player' controls>"+row.URL+"<source src='" + row.URL + "' type='audio/ogg'>";
    
    // specify popup options 
    var customOptions =
        {
        'maxWidth': '250',
        'minWidth':'150',
        'className' : 'custom'
        }
    var marker = L.marker([row.Latitude, row.Longitude], {
      
      opacity: 1,

    // this part is for custom marker icon
    icon: L.icon({
      iconUrl: 'resources/map.png',
      iconSize: [60, 60]
    })
    
    }) .bindPopup(customPopup,customOptions).addTo(map);
  }});

  map.attributionControl.setPrefix(
  'View <a href="https://github.com/HandsOnDataViz/leaflet-map-csv" target="_blank">code on GitHub</a>'
  );

One of the issues Eleni had was that the code wouldn't work even though she had everything right. It was:

  <script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>