i need to display photos in info template.can any one tell me how to do it
Hi Veena,
I found the following sample on GitHub:
Add an attachment image to popup infoWindow for ArcGIS JavaScript API. · GitHub
Here it is an example of the code converted to AMD:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices--> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Sample Map</title> <link rel="stylesheet" href="http://js.arcgis.com/3.15/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.15/esri/css/esri.css"> <style> html, body, #mapDiv { padding:0; margin:0; height:100%; } </style> <script src="http://js.arcgis.com/3.15/"></script> <script> var map, popup, featureLayer; require([ "esri/map", "esri/layers/FeatureLayer", "esri/dijit/Popup", "dojo/dom-construct","dojo/on", "dojo/domReady!" ], function ( Map, FeatureLayer, Popup, domConstruct, on ) { popup = new Popup(null, domConstruct.create('div')); map = new Map('mapDiv', { basemap: 'streets', center: [-74.0499, 40.0403], zoom: 17, infoWindow: popup }); on(map, 'load', function (_map_) { featureLayer = new FeatureLayer('http://services.arcgis.com/dlFJXQQtlWFB4qUk/arcgis/rest/services/ResidentialBuildings/FeatureServer/...', { mode: FeatureLayer.MODE_ONDEMAND }); on(featureLayer, 'click', function (e) { var objectId, el; objectId = e.graphic.attributes[featureLayer.objectIdField]; featureLayer.queryAttachmentInfos(objectId, function (infos) { map.infoWindow.setTitle(objectId); el = document.createElement('img'); if (!!infos[0].url) { el.setAttribute('src', infos[0].url); map.infoWindow.setContent(el); map.infoWindow.show(e.screenPoint, map.getInfoWindowAnchor(e.screenPoint)); } }); }); map.addLayer(featureLayer); }); }); </script> </head> <body class="claro"> <div id="mapDiv"></div> </body> </html>
its displaying only image i need to dispaly something like this
http://developers.arcgis.com/javascript/sandbox/sandbox.html?sample=widget_popupfl
above example is for popup window but i need to do it for infotemplate
Veena,
Can you explain why you have a requirement to use infoTemplate? I have found that most of the time people just think that they need infoTemplate and really have no specific requirement.
i am using identifier so i am using info template
what would you use?
Robert,
Here is that sample updated to use the popups media infos, so that multiple images are supported and the images are more manageable size:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Sample Map</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.20/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.20/esri/css/esri.css">
<style>
html,
body,
#mapDiv {
padding: 0;
margin: 0;
height: 100%;
}
</style>
<script src="http://js.arcgis.com/3.20/"></script>
<script>
var map, popup, featureLayer;
require([
"esri/map", "esri/layers/FeatureLayer", "esri/dijit/Popup",
"esri/dijit/PopupTemplate", "dojo/dom-construct", "dojo/on",
"dojo/_base/array", "dojo/domReady!"
], function(
Map, FeatureLayer, Popup,
PopupTemplate, domConstruct, on, arrayUtils
) {
popup = new Popup(null, domConstruct.create('div'));
map = new Map('mapDiv', {
basemap: 'streets',
center: [-74.0499, 40.0403],
zoom: 17,
infoWindow: popup
});
on(map, 'load', function(_map_) {
featureLayer = new FeatureLayer('some url', {
mode: FeatureLayer.MODE_ONDEMAND
});
on(featureLayer, 'click', function(e) {
var objectId, el;
var pminfos = [];
var popUpMediaInfo;
objectId = e.graphic.attributes[featureLayer.objectIdField];
featureLayer.queryAttachmentInfos(objectId, function(infos) {
var popUpInfo = {
title: "Attachment images",
description: "",
showAttachments: false
};
arrayUtils.map(infos, function(info){
if (!!info.url) {
popUpMediaInfo = {};
popUpMediaInfo.type = 'image';
popUpMediaInfo.value = {};
popUpMediaInfo.value.sourceURL = info.url;
popUpMediaInfo.value.linkURL = info.url;
popUpMediaInfo.caption = info.name;
pminfos.push(popUpMediaInfo);
}
});
popUpInfo.mediaInfos = pminfos;
var pt = new PopupTemplate(popUpInfo);
e.graphic.setInfoTemplate(pt);
map.infoWindow.setFeatures([e.graphic]);
map.infoWindow.show(e.screenPoint, map.getInfoWindowAnchor(e.screenPoint));
});
});
map.addLayer(featureLayer);
});
});
</script>
</head>
<body class="claro">
<div id="mapDiv"></div>
</body>
</html>
Thanks so much! That is pretty slick!
on(myLayer, 'click', function (e) {
map.graphics.clear();
var id;
var pminfosA = [];
id = e.graphic.attributes[artlayers.objectIdField];
artlayers.queryAttachmentInfos(id, function (infos) {
if (infos.length > 0) {
arrayUtils.map(infos, function (info) {
var popUpMediaInfo;
if (!!info.url) {
popUpMediaInfo = {};
popUpMediaInfo.type = 'image';
popUpMediaInfo.value = {};
popUpMediaInfo.value.sourceURL = info.url;
popUpMediaInfo.value.linkURL = info.url;
popUpMediaInfo.caption = info.name;
pminfosA.push(popUpMediaInfo);
}
});
var pt = new PopupTemplate({
title: "{FEATURE_NAME}",
showAttachments: false,
mediaInfos: (pminfosA)
});
e.graphic.setInfoTemplate(pt);
map.infoWindow.setFeatures([e.graphic]);
map.infoWindow.show(e.screenPoint, map.getInfoWindowAnchor(e.screenPoint));
}
else {
var pt2 = new PopupTemplate({
title: "{FEATURE_NAME}",
showAttachments: false,
description: "no images available"
});
e.graphic.setInfoTemplate(pt2);
map.infoWindow.setFeatures([e.graphic]);
map.infoWindow.show(e.screenPoint, map.getInfoWindowAnchor(e.screenPoint));
}
});
});
Above is some code that will show multiple photos. Also, How would i display a PDF in the pop that is an attachment?