Audio afspelen in Pop-up marker

Weet iemand of het mogelijk is om in een Marker op een OSM-kaart (locatie) een audioplayer op te nemen om een file af te spelen die op mijn server staat?

Leaflet example

https://link.springer.com/article/10.1007/s42489-019-00006-2

Dank je wel, ik ga lezen…

Ik heb het gelezen, maar dit is voor mij hogere wiskunde.

Ik maak nu mijn maps in de franse versie (http://umap.openstreetmap.fr/nl/map/zeeverhalen-van-binnenuit-osm_453939) waar veel mooie dingen in kunnen, maar nou net niet een audioplayer. Althans niet dat ik weet, maar misschien is er een code die er voor zorgt dat het wel kan…? Of een toepassing die ik kan kopen waar het wel in kan?

En alle plugins die ik heb bekeken in Wordpress doen ook weer net niet wat ik zou willen hebben. Bijv. in MapIt kan veel, maar daar kan ik weer geen route in tekenen. Bij iedere oplossing is er wel weer een ander probleem.

Jammer, maar helaas…

Bedankt voor je (re)actie.

Iets zoals Leaflet (zoals in link van Allroads) geeft je de meeste vrijheid zelf iets te maken, maar kan me voorstellen dat dit lastig is. Misschien zie ik met uMap wel een mogelijkheid. Je kunt een iframe (site binnen een site) binnen de popup plaatsen met daarin link naar het audiobestand. Hoe het dan wordt weergegeven hangt wel van de browser af. In Chrome/Chromium ziet het er best acceptabel uit vind ik zelf:

Wat je dan in uMap als inhoud moet instellen is:

{{{https://example.com/audiobestand.extensie|breedte-iframe*hoogte-iframe}}}

Bijvoorbeeld voor een geluidsbestand van Wikipedia met breedte iframe 200 pixels en hoogte 50 pixels:

{{{https://upload.wikimedia.org/wikipedia/commons/f/fb/Nl-welkom_voor_nieuwkomers-article.ogg|200*50}}}

Ben nog iets meer verder gaan rommelen en het resultaat is compacter als je zelf een html pagina maakt het daarin alleen het HTML5 audio-element. Zie dit voorbeeld van w3schools: https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_audio_all

Je zou dan voor elke popup een HTML-pagina kunnen zetten op je server met bovenstaande code (uiteraard aangepast voor het juiste geluidsbestand) en in de uMap-popup die pagina als iframe. Hoogte en breedte opgeven lijtk niet nodig. Dus stel je pagina heet geluidsfragment1.html dan zou het volgende volstaan:

{{{https://www.example.com/geluidsfragment1.html}}}

Hier ga ik even rustig over nadenken hoe ik dat ga doen. Ik houd je op de hoogte…!

Bedankt.

Zoek naar voorbeeld sites Umap
webcam zoek
https://umap.openstreetmap.fr/nl/search/?q=webcam
vele voorbeelden, van live tot een beeld (om de zoveel tijd ververst?). Of link naar pagina in browser.

zoek op audio, geeft niet een resultaat, die jij wilt, het is verlinkt naar een .mp3 url geopend in een browser.
https://umap.openstreetmap.fr/nl/map/sentier-audio-firbeix_226045#6/51.000/2.000

het iframe gebruik wordt hier vernoemd.
https://wiki.openstreetmap.org/wiki/UMap/Tips#Add_a_media_.28video.2Fsound.29_in_a_popup
https://wiki.openstreetmap.org/wiki/UMap/Guide/Text_formatting

Blijkbaar is het inmiddels al gelukt. Ik kan in ieder geval bij de vuurtoren (punt 1) een audiobestand beluisteren. Probleem opgelost?

Hi, wordt hard aan gewerkt. Krijg mooie tips en ben die aan het uitproberen. Nog wat scrollbars in de weg en wat afmetingen die niet helemaal goed gaan, maar daar hoop ik uit te komen. Bedankt…

We zijn er bijna… :wink:

Ik heb de tip van ‘erik1984’ opgevolgd en alles in html opgenomen. Ziet er voor mij perfect uit (https://demo.routemaps.nl/zeeverhalen-van-binnenuit/). Maar, als ik dan op een smartphone kijk, dan is de popup net even te groot en valt het kruisje om te sluiten buiten beeld. Mijn hopelijk laatste vraag is dus:

  • is er een optie om de breedte van de pop-up aan te passen (of dat de pop-up zich aanpast aan de beschikbare breedte)?
  • en zo niet, is er een optie om het kruisje naar links te verplaatsen, want dat is wel in beeld.

In CSS heb ik geen oplossingen hiervoor kunnen vinden, helaas.

Ondertussen is er al weer van alles veranderd sinds ik mijn vorige vraag stelde. In de link is het probleem niet meer zichtbaar. We hebben het probleem opgelost door in het Thema de schermbreedte aan te passen. Ben nog wel benieuwd of er ook binnen OSM een oplossing is voor het aanpassen van de pop-up breedte.

Bedankt allemaal…

popup style

large?

https://wiki.openstreetmap.org/wiki/UMap/Guide/Configure_shape_interaction_(labels%E2%80%A6)

Nee, werkte ook niet. Rechterkant bleef in alle gevallen buiten beeld. Ook bij de zijbar viel rechts tekst weg omdat de pop-up zijn breedte niet aanpast aan het scherm. En het (b)lijkt dat de standaard breedte 300px is, wat ik er ook inzette.

Zolang ik zulke goede tips krijg van jullie durf ik nog wel een vraag te stellen.

Als je op de telefoon kijkt op www.routemaps.nl dan ziet dat er perfect uit. Ben ik heel blij mee. Als ik op een marker klik dan vult de popup bijna het beeld en dat is goed. Het gaat mij om het sluiten.

Klik ik op het X dan staat het gekozen nummer aan de onderkant van het schermpje, omdat de popup daar boven stond.
Klik ik op + in de footer, dan sluit de popup en staat het nummer gecentreerd.

Dat laatste vind ik het duidelijks. Dus de vraag is of er een mogelijkheid is om die functie Centreren onder de + ook te zetten onder de X (inclusief Sluiten). Of een tip met hetzelfde resultaat.

Alvast bedankt en een goed weekend.

Resultaat ziet er goed uit CGID!

Dankjewel Commodoortje, is een hele zoektocht geweest. En ik ben bijna waar ik wil zijn… :wink: