nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Adding Media to PopupTemplate

MohamadMousheimish1

I'm currently using the PopupTemplate class from esri. As I noticed we can load an image and view it in the PopupTemplate. My question is can we load a video of type mp4?? Or a voice of type mp3 to the PopupTemplate??

Or is the media type restriced only to mediaInfos of type image ??

Find more posts tagged with

Accepted answers

rscheitlin

Mohammed,

I don't think those are supported media info types but you can add a video to a popup as seen here:

https://community.esri.com/thread/121245

All comments

BirajaNayak

Here is the sample code in 4.10 in case anyone wanted it in future:

<!DOCTYPE html>

<html>

<head>

<title>PopupTemplate with video - 4.10</title>

<style>

html,

body,

#viewDiv {

padding: 0;

margin: 0;

height: 100%;

width: 100%;

}

</style>

require([

"esri/Map",

"esri/layers/FeatureLayer",

"esri/views/MapView"

], function(

Map,

FeatureLayer,

MapView

) {

// Create the map

var map = new Map({

basemap: "gray"

});

// Create the MapView

var view = new MapView({

container: "viewDiv",

map: map,

center: [-73.950, 40.702],

zoom: 11

});

var template = { // autocasts as new PopupTemplate()

title: "Marriage in NY, Zip Code: {ZIP}",

content: getContent()

};

function getContent(){

var Content = "<b>City Name: </b>" + "{areaname}" + "<br> <b>Population: </b>" + "{pop2000}" + "<br>";

var Hyperlink = '<video width="250" height="250" controls><source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4></video> ';

return Content + Hyperlink;

}

// Reference the popupTemplate instance in the

// popupTemplate property of FeatureLayer

var featureLayer = new FeatureLayer({

url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/0",

outFields: ["*"],

popupTemplate: template

});

map.add(featureLayer);

});

</script>

</head>

<body>

</body>

</html>

MohamadMousheimish1

Robert, after implementing some instructions used in the link you sent yesterday. Things worked fine.

Thank you for your response. Appreciate it.

rscheitlin

Mohamad,

Converting that example to 4.10 is not very hard. Did you try?

MohamadMousheimish1

Thank you for your answer and for your reference, but I'm sorry to let you down. The provided link didn't have what I wanted. Loading the video into my PopupTemplate didn't work out. I think they're using an old API version since I'm using latest (4.10)

rscheitlin

Mohammed,

I don't think those are supported media info types but you can add a video to a popup as seen here:

https://community.esri.com/thread/121245

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.