topic Re: Adding Media to PopupTemplate in ArcGIS JavaScript Maps SDK Questions

Adding Media to PopupTemplate

MohamadMousheimish1 — Wed, 27 Feb 2019 14:29:02 GMT

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 ??

Re: Adding Media to PopupTemplate

RobertScheitlin__GISP — Wed, 27 Feb 2019 14:45:41 GMT

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

Re: Adding Media to PopupTemplate

MohamadMousheimish1 — Wed, 27 Feb 2019 15:09:26 GMT

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)

Re: Adding Media to PopupTemplate

RobertScheitlin__GISP — Wed, 27 Feb 2019 15:20:33 GMT

Mohamad,

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

Re: Adding Media to PopupTemplate

MohamadMousheimish1 — Thu, 28 Feb 2019 06:04:30 GMT

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

Thank you for your response. Appreciate it.

Re: Adding Media to PopupTemplate

BirajaNayak — Thu, 28 Feb 2019 21:46:08 GMT

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>