Adding Media to PopupTemplate

648
5
Jump to solution
02-27-2019 06:29 AM
MohamadMousheimish1
New Contributor II

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

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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 

View solution in original post

5 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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 

MohamadMousheimish1
New Contributor II

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)

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Mohamad,

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

0 Kudos
MohamadMousheimish1
New Contributor II

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

Thank you for your response. Appreciate it.

0 Kudos
BirajaNayak
Esri Contributor

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>PopupTemplate with video - 4.10</title>

<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>

<link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/css/main.css">
<script src="https://js.arcgis.com/4.10/"></script>

<script>
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>
<div id="viewDiv"></div>
</body>

</html>
0 Kudos