2

I am trying to configure a pop up on a webmap in ArcGIS Online (Organisation). I want the pop up to show a small audio player pointing to an mp3 file. I want the mp3 file to change depending on what feature is selected on the map by the user.

I have a single point dataset with a single field "Species". I have a value list assigned to this field of around 40 different species. I also have an mp3 file for each of the 40 species.

My thinking was that I could use an if/else statement to select which mp3 file should be displayed in the pop up.

To create the pop up, I am creating a Custom Attribute Display.

{Species} was heard here
    <br />
    <br />
    <audio controls=""> <source src="https://www.xeno-canto.org/sounds/uploaded/XTVEPHMPPJ/Haematopus_leucopodus_1984_02_04e.mp3" type="audio/mpeg"></source> </audio>

The above code works to bring up a player

enter image description here

I can also add a second player to the pop up as per below

{Species} was heard here
<br />
<br />
<audio controls=""> <source src="https://downloads.esri.com/agol/labs/maptour/horse.mp3" type="audio/mpeg"></source> </audio>
<br />
<br />
<audio controls=""> <source src="https://www.xeno-canto.org/sounds/uploaded/XTVEPHMPPJ/Haematopus_leucopodus_1984_02_04e.mp3" type="audio/mpeg"></source> </audio>

This brings up 2 audio players within the pop up window.

enter image description here

But I am unable to choose the file based on the {Species} variable.

Attempting to do an if/else statement

{Species} was heard here
<br />
<br />
IIf($feature.Species=="Egret". "<audio controls=""> <source src="https://downloads.esri.com/agol/labs/maptour/horse.mp3" type="audio/mpeg"></source> </audio>", "<audio controls=""> <source src="https://www.xeno-canto.org/sounds/uploaded/XTVEPHMPPJ/Haematopus_leucopodus_1984_02_04e.mp3" type="audio/mpeg"></source> </audio>

Brings back this pop up:

enter image description here

I've also tried using this code in an Arcade expression, but I can't even get a single audio player to show.

Something like:

If {Species} = Crow Play crow MP3 URL Else if {Species} = Egret Play Egret MP3 URL Else if {Species} = Robin Play Robin MP3 URL

Is anybody able to advise how I can show a single audio player depending on what {Species} value is assigned to the point the user has clicked on?

1

The key step is to either have a field with the filename, or create an attribute expression that has the file name (or full URL), but not the full HTML.

If you have a field with contents that matches the file name, it's as easy as configure the pop-up, choose "A custom attribute display", and click the icon for "View HTML Source" and add:

<audio controls="">
    <source src="https://downloads.esri.com/agol/labs/maptour/{species_filename}.mp3"
    type="audio/mpeg"></source>
</audio>

If you don't have such a field, you can create an attribute expression that creates that info in a virtual field that you can use as above.

1

I've had very little experience in embedding controls into pop ups nor am I a fully fledge web developer but I can tell by looking at your sample code that its incorrectly structured. First of all look at this blog there is a code snippet in it.

You have your code structured as such:

<audio controls="">
   <source src="https://downloads.esri.com/agol/labs/maptour/horse.mp3" type="audio/mpeg"> 
   </source>
</audio>

You don't need the </source>, you see it correctly structured in @Bjorn_Svenssons answer.

Your attempt to put an if then else like logic is flawed, you wrote:

{Species} was heard here
<br/>
<br/>
IIf($feature.Species=="Egret". "<audio controls=""> <source src="https://downloads.esri.com/agol/labs/maptour/horse.mp3" type="audio/mpeg">
</source>
</audio>", "<audio controls="">
<source src="https://www.xeno-canto.org/sounds/uploaded/XTVEPHMPPJ/Haematopus_leucopodus_1984_02_04e.mp3" type="audio/mpeg">
</source>
</audio>

For your IIf() command you have a full stop instead of a comma after "Egret" you also have no closing bracket. So your code would never execute anyway. But I think the bigger issue here is you are attempting to embed arcade commands directly into HTML, which "ain't gona work".

Have a look at this blog on how to integrate arcade logic into HTML. It's not something I have had to do yet.

1
  • 1
    Thanks Duncan. I’ve actually already solved this using an arcade expression to calculate a field on the fly. I’ve then just embedded that field into the html. I will post the solution later when I get a chance 🙂
    – Dan_h_b
    Feb 19 at 11:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.