Skip to content

Instantly share code, notes, and snippets.

@odoe
Last active November 9, 2017 19:12
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save odoe/5059401 to your computer and use it in GitHub Desktop.
Save odoe/5059401 to your computer and use it in GitHub Desktop.
Add an attachment image to popup infoWindow for ArcGIS JavaScript API.
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ArcGIS Web Development</title>
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css">
<link rel="stylesheet" href='http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/dijit/css/Popup.css'/>
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
#map { position: absolute; top:0; bottom:0; left:0; right:0; }
</style>
</head>
<body class="claro">
<div id="map"></div>
</body>
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script>
<script src="main.js"></script>
</html>
/*
* Add attachment images through this sample: http://help.arcgis.com/en/webapi/javascript/arcgis/samples/ed_attachments/index.html
* And use this demo to view them in a popup
*/
(function() {
// dojo config stuff
require({
parseOnLoad:true
});
require([
'dojo/dom-construct',
'dojo/_base/connect',
'esri/dijit/Popup',
'esri/layers/FeatureLayer',
'dojo/domReady!'
], function (domConstruct, connect) {
var map, popup, featureLayer;
popup = new esri.dijit.Popup(null, domConstruct.create('div'));
map = new esri.Map('map', {
basemap: 'streets',
center: [-122.427, 37.769],
zoom: 19,
infoWindow: popup
});
connect.connect(map, 'onLoad', function (_map_) {
featureLayer = new esri.layers.FeatureLayer('http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/SanFrancisco/311Incidents/FeatureServer/0', {
mode: esri.layers.FeatureLayer.MODE_ONDEMAND
});
connect.connect(featureLayer, 'onClick', 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);
});
});
}).call(this);
@maphew
Copy link

maphew commented Mar 27, 2013

Seems broken today. The map displays and pan/zoom functions but there are no popups at all. Tested with Chrome25, Firefox19 and IE9, all on Windows.

@EnzoIbrahim
Copy link

I would like an example with the silverlight API on how to display Image Attachments in Popup ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment