map = { let parent = DOM.element('div', { style: `width:${width}px;height:${width / 2}px` }); yield parent; let map = L.map(parent).setView([44.2220, 12.0409], 9); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap' }).addTo(map); // Add your track (make sure `geojson` is defined in another cell) const layers = geojson_tracks.map((geojson, i) => L.geoJSON(geojson, { style: { color: 'blue', weight: 4 } }).addTo(map) ); trainRoutes.forEach(route => { L.polyline(route.coords, { color: route.color, weight: 3, dashArray: "6, 6" // makes it dashed (optional) }) .bindPopup(route.name) .addTo(map); }); // Auto zoom to fit the track map.setView(city.value, city.zoom); let marker_sfog = L.marker([44.49323, 11.34632], {icon: restaurant}).addTo(map); marker_sfog.bindPopup(` Sfoglia Rina
Restaurant

`); let marker_towers = L.marker([44.49435, 11.34646], {icon: viewpoint}).addTo(map); marker_towers.bindPopup(` Due Torri
Viewpoint

`); // "bind" basically means "connect" let marker_7church = L.marker([44.49228, 11.34824], {icon: viewpoint}).addTo(map); marker_7church.bindPopup(` Basilica Santuario Santo Stefano
Viewpoint

`); // "bind" basically means "connect" let marker_creamvs = L.marker([44.49318, 11.34759], {icon: gelato}).addTo(map); marker_creamvs.bindPopup(` Creameria La Vecchia Stalla
Gelato

`); // "bind" basically means "connect" let marker_tratt = L.marker([44.49855, 11.34531], {icon: restaurant}).addTo(map); marker_tratt.bindPopup(` Trattoria La Finestrella
Restaurant

`); // "bind" basically means "connect" let marker_noi = L.marker([44.49613, 11.33804], {icon: restaurant}).addTo(map); marker_noi.bindPopup(` NOI - Quelli di Cantina Bentivoglio
Restaurant

`); // "bind" basically means "connect" let marker_slpeak = L.marker([44.47925, 11.29790], {icon: viewpoint}).addTo(map); marker_slpeak.bindPopup(` Santuario della Beata Vergine di San Luca
Viewpoint

`); // "bind" basically means "connect" let marker_cc = L.marker([44.49119, 11.34402], {icon: gelato}).addTo(map); marker_cc.bindPopup(` Cremeria Cavour
Gelato

`); // "bind" basically means "connect" let marker_bv = L.marker([44.49338, 11.34400], {icon: restaurant}).addTo(map); marker_bv.bindPopup(` Bella Vita
Restaurant

`); // "bind" basically means "connect" //marker_bv.openPopup(); let marker_pm = L.marker([44.49348, 11.34367], {icon: viewpoint}).addTo(map); marker_pm.bindPopup(`Piazza Maggiore
Viewpoint

`); // "bind" basically means "connect" let marker_rp = L.marker([44.41698, 12.19949], {icon: restaurant}).addTo(map); marker_rp.bindPopup(` Profumo di piadina
Restaurant

`); // "bind" basically means "connect" let marker_pcg3 = L.marker([44.41835, 12.20375], {icon: gelato}).addTo(map); marker_pcg3.bindPopup(` Pasticceria Caffetteria Gelateria 3 Sorelle
Gelato

`); // "bind" basically means "connect" let marker_fi1 = L.marker([44.41703, 12.20071], {icon: flashInvader}).addTo(map); marker_fi1.bindPopup(` Flash Invader 1
Flash Invader

`); // "bind" basically means "connect" let marker_fi2 = L.marker([44.41846, 12.20342], {icon: flashInvader}).addTo(map); marker_fi2.bindPopup(` Flash Invader 2
Flash Invader

`); // "bind" basically means "connect" let marker_cf = L.marker([44.41623, 12.20116], {icon: viewpoint}).addTo(map); marker_cf.bindPopup(` Chiostri Francescani
Viewpoint

`); // "bind" basically means "connect" let marker_fi3 = L.marker([44.41881, 12.19911], {icon: flashInvader}).addTo(map); marker_fi3.bindPopup(` Flash Invader 3
Flash Invader

`); // "bind" basically means "connect" let marker_fi4 = L.marker([44.41673, 12.19960], {icon: flashInvader}).addTo(map); marker_fi4.bindPopup(` Flash Invader 4
Flash Invader

`); // "bind" basically means "connect" let marker_dt = L.marker([44.41626, 12.20098], {icon: flashInvader}).addTo(map); marker_dt.bindPopup(` Dante's Tomb
Viewpoint

`); // "bind" basically means "connect" let marker_ost = L.marker([44.06775, 12.57916], {icon: restaurant}).addTo(map); marker_ost.bindPopup(` Osteria Le Logge
Restaurant

`); // "bind" basically means "connect" let marker_bis = L.marker([44.06723, 12.58100], {icon: gelato}).addTo(map); marker_bis.bindPopup(` 3 bis
Gelato

`); // "bind" basically means "connect" let marker_pagamirror = L.marker([44.06970, 12.58044], {icon: frisbee}).addTo(map); marker_pagamirror .bindPopup(` Mirror Selfie
Paganello 2025

`); // "bind" basically means "connect" let marker_ts = L.marker([44.06466, 12.58396], {icon: restaurant}).addTo(map); marker_ts.bindPopup(` Toki Sushi
Restaurant

`); // "bind" basically means "connect" let marker_teammates = L.marker([44.06824, 12.58565], {icon: frisbee}).addTo(map); marker_teammates.bindPopup(` Teammates <3
Paganello 2025

`); // "bind" basically means "connect" let marker_mc = L.marker([44.07047, 12.57720], {icon: restaurant}).addTo(map); marker_mc.bindPopup(` Marina Centro - Cucina di Riviera
Restaurant

`); // "bind" basically means "connect" let marker_finals = L.marker([44.06771, 12.58442], {icon: frisbee}).addTo(map); marker_finals .bindPopup(` Finals
Paganello 2025

`); // "bind" basically means "connect" }