InfoTemplate: embed an image?

AlexanderStepanov · ‎02-23-2011

Hi All:

I was wondering if it is possible to embed/show an image in "infoTemplate", when clicking on a Graphic.

the second question is if it is possible to control size of 'infoTemplate' call-out, in such way that there will be no vertical scrolling.

Your advice is greatly appreciated,

Kind regards,

Alexander

DanielYim · ‎02-24-2011

What you can do to further customize the map's InfoWindow is to tie the content of the InfoWindow to a DOM object (such as a <div> in your page) instead of using the InfoTemplate.

So, for instance, you have this in your init():

        myMap.infoWindow.resize(300, 200);
        myMap.infoWindow.setContent(dijit.byId("infowinID").domNode);
        dojo.connect(myMap.infoWindow, "onShow", function() {
            dijit.byId("infowinID").resize();
        });

And in your .html file, you have the following:

<div id="infowinID" dojoType="dijit.layout.ContentPane" title="Something">
    <img src="/your/path/toAnImage.png" alt="asdf" />
</div>

To stop scrollbars from appearing, maybe you'd have something like the following in your CSS:

#infowinID {
    overflow: hidden;
}

Personally, I find that the InfoTemplate is a quick and easy way to show content inside of an InfoWindow, but you lose a lot of customization as a tradeoff.

MelissaMathis · ‎03-31-2011

Hi All,
I am using the InfoWindow - DOM example code to embed an image(png) into an InfoWindow.
I can't seem to make it work correctly. When I click in the map I see my image appear and it is embedded in the web page, rather than in an InfoWindow. I am sure it is something easy but I can't figure it out.

Any help or examples on how to embed an image into an InfoWindow or Infotemplate would be great.   Thanks

var map;
      function init() {
         var initExtent = new esri.geometry.Extent({
          "xmin": 6333000,
   "ymin": 3246000,
          "xmax": 8860000,
          "ymax": 4900000,

          "spatialReference": {
            "wkid": 102100
          }
        });
        map = new esri.Map("map", {
          extent: initExtent
        });

        dojo.connect(map,"onLoad", function(map) {map.infoWindow.resize(300, 200);} );
        map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"));
        map.infoWindow.setContent(dijit.byId("infowinID").domNode);
        dojo.connect(map.infoWindow, "onShow", function() {
            dijit.byId("infowinID").resize();
        });
      }
     dojo.addOnLoad(init);
    </script>
</head>
<body class="claro">
    <div id="map" style="width:1024px; height:512px; border:1px solid #000;"></div>
    <<div id="infowinID" dojoType="dijit.layout.ContentPane" title="Something">
    <img src="1_341400071020000.xlsgraphics_files.png" />
</div>
</body>
</html>

RobWaller · ‎04-05-2011

I didn't try running your code but just a quick look notice you have 2 start brackets on your infowinID DIV:

<<div id="infowinID" dojoType="dijit.layout.ContentPane" title="Something">
<img src="1_341400071020000.xlsgraphics_files.png" />
</div>

If that's how your tag actually is then that could cause a problem with the html structure. Not sure if that's your only issue but one thing to start with.

DanielYim · ‎04-07-2011

It's showing up down there because you haven't set it to show at the click's coordinates. I hope this helps.

dojo.connect(myMap, "onclick", function(evt) {
        myMap.infoWindow.setTitle("Some title");
        dijit.byId("infowinID").setContent("<img src='something.png' />');
        myMap.infoWindow.resize(355, 140);
        myMap.infoWindow.show(evt.screenPoint, myMap.getInfoWindowAnchor(evt.screenPoint));
});

MelissaMathis · ‎04-08-2011

Thank you Daniel for replying your code was helpful, I figured it was something simple.

I ended up using an InfoTemplate. I am posting my code to help others.
On the <img> tag, I didn't realize the <br> needed to be inside of the quotes.

var template = new esri.InfoTemplate();

template.setTitle("<b>Site Number</b>: ${site_no}");

template.setContent("<b>Name</b>: ${name}" + "<br><img src = thumbnail/chart.png>" +"<br> <a target='_blank' href = http://igs084/tables/${link} +>Excel Spreadsheet</a>");