topic Re: Button to Zoom and show popup in ArcGIS JavaScript Maps SDK Questions

Button to Zoom and show popup

ShaneHogg — Sat, 06 Jul 2013 01:03:05 GMT

Hi been stuck on this for a few days. What I am trying to do is when someone clicks on a button the map zooms to the specified extent then also displays a points popup in that extent.

Currently, on click of the button the map zooms to the correct extent, and the point is visible, but the popup does not display.

Any help or direction would be appreciated.

My button is as follows:

HTML Button

<div dojoType="dijit.form.Button" id="NewZealandAuckland" iconClass="NewZealandAuckland" onClick="ZoomToNewZealandAuckland();">Auckland</div>

This links to the button to display the extent.
Javascript extent

function ZoomToNewZealandAuckland() {  
var customExtent = new esri.geometry.Extent(174.756,-36.857,174.763,-36.852,new esri.SpatialReference({"wkid":4326}));
map.setExtent(customExtent);
}

This is my point.
Point

 
var Auckland = new esri.geometry.Point(174.758, -36.855, new esri.SpatialReference({ 'wkid': 4326 }));
map.graphics.add(new esri.Graphic( esri.geometry.geographicToWebMercator(Auckland),
new esri.symbol.SimpleMarkerSymbol( {"angle":1,"xoffset":0,"yoffset":0,"type":"esriPMS","url":"http://static.arcgis.com/images/Symbols/Basic/BlueStickpin.png","imageData":"","contentType":"image/png","width":24,"height":24} ), 
{ 'title': '', 'content': ' },
new esri.InfoTemplate('${title}', '${content}')
));

I have a feeling popup.show(); might be involved in the zoom to extent, but unsure how to use.

Re: Button to Zoom and show popup

ZorbaConlen — Mon, 08 Jul 2013 20:57:45 GMT

Hey Shane,
I got something like this working. In my app, it's a picklist where the user picks or types an asset, the app queries the appropreate layers for that asset and then the map zooms to that location, highlights the asset and displays the popup with any features returned by the query task. See this post - http://forums.arcgis.com/threads/84514-Launch-webmap-popup-programmatically. I just replyed to someone else about this same issue so it may be useful...

The trick is that you have to create an infotemplate that looks like the default popup. As you mentioned, you do use map.infowindow..show(screenpoint); (or map.popup.show as case might be). However, if you have not defined the infoTemplate and applied it to the feature(s), the popup will not display.

Good luck.

Re: Button to Zoom and show popup

ShaneHogg — Sat, 11 Dec 2021 12:53:45 GMT

Hey Zconlen, Thanks for getting back to me, I am messing around with the code you supplied, but getting a bit stuck.

So far my geomerty point is:

////////////////AUCKLAND
var Auckland = new esri.geometry.Point(174.758, -36.855, new esri.SpatialReference({ 'wkid': 4326 }));
map.graphics.add(new esri.Graphic(esri.geometry.geographicToWebMercator(Auckland), // geometry
new esri.symbol.SimpleMarkerSymbol( {"angle":1,"xoffset":1,"yoffset":6,"type":"esriPMS","url":"http://static.arcgis.com/images/Symbols/Basic/BlueStickpin.png","imageData":"","contentType":"image/png","width":24,"height":24} ), 
// symbol
{ 'title': 'TITLE', 'content': 'CONTENT' }, // attributes
new esri.InfoTemplate ('${title}', '${content}')
));
*

and I have added your code into my zoom to extent which is called from a HTML Button.


function ZoomToNewZealandAuckland() {
var customExtentAndSR = new esri.geometry.Extent(174.756,-36.857,174.763,-36.852,new esri.SpatialReference({"wkid":4326}));
map.setExtent(customExtentAndSR);
var extent = map.extent;
if(extent.contains(graphic.geometry)) {
//Use html to mimic look and feel of default webmap popup
//Use html to mimic look and feel of default webmap popup
var infoTemplate = new esri.InfoTemplate("test", "<div id='Popup'><strong>${title}</strong><hr><table cellpadding='5'><tr><td></td></tr><tr></tr><tr><td><td>${content}</td></tr></table><br></div>");
//call defineInfoTemplate func, to apply above infoTemplate to features
defineInfoTemplate(Auckland, infoTemplate);
//set infowindow features to full array
map.infoWindow.setFeatures(Auckland);
//text for title bar
map.infoWindow.setTitle('+ title +');
// zoom map
map.infoWindow.show(Auckland); 
}

Everything works fine but no infowindow. This is my first esri Javascript so feeling quite lost.
Thanks for you help! much appreciated

Re: Button to Zoom and show popup

ZorbaConlen — Mon, 08 Jul 2013 23:52:56 GMT

So, it looks like you want to hard code the button to always zoom to the same feature (Aukland), and show the popup. Is that right?

The code I provided is for a very different case (dynamically show one or more features in the popup based on user selection), so not necessarily applicable.

A couple things to look at though:

defineInfoTemplate is not a method in the api. Its a function I created. You probably dont need it for your purposes, but if you try to call it, and it does not exist, that will be a problem. Instead you should use something like

graphic.setInfoTemplate(infoTemplate);

I think the setFeatures method expects a graphic and it looks to me like you are passing in a point. Try passing in a variable which points to the desired graphic.

Re: Button to Zoom and show popup

ShaneHogg — Sat, 11 Dec 2021 12:53:48 GMT

Hey thanks for the help, I am getting closer to the solution.

The following code will zoom to the extent, display a point, and a infowindow, however I want to try and link it to the infowindow I have already defined as default (currently opens up a blank popup).

function ZoomToNewZealandAuckland() { 
var Auckland = new esri.geometry.Point(174.75815, -36.85515, new esri.SpatialReference({ 'wkid': 4326 }));
map.graphics.add(new esri.Graphic(
esri.geometry.geographicToWebMercator(Auckland), // geometry
new esri.symbol.SimpleMarkerSymbol( {"angle":1,"xoffset":1,"yoffset":6,"type":"esriPMS","url":"http://static.arcgis.com/images/Symbols/Basic/BlueStickpin.png","imageData":"","contentType":"image/png","width":32,"height":32} ), 
// symbol
{ 'title': 'TITLE', 'Content: 'CONTENT' }, // attributes
new esri.InfoTemplate('${title}', '${content}')
));
var customExtentAndSR = new esri.geometry.Extent(174.756,-36.857,174.763,-36.852,new esri.SpatialReference({"wkid":4326}));
map.setExtent(customExtentAndSR);
map.infoWindow.show(Auckland);
}

Maybe if i turn my "new esri.InfoTemplate('${title}', '${content}')" into a variable amd link it to "map.infoWindow.show(Auckland);
"?

Thanks
Shane H

Re: Button to Zoom and show popup

ZorbaConlen — Sat, 11 Dec 2021 12:53:51 GMT

Sounds like the graphic still does not have an infotemplate defined. Maybe try:

...
var infoTemplate = new esri.InfoTemplate("title", "some content");
Auckland.setInfoTemplate(infoTemplate);
map.infoWindow.show(Auckland);

Re: Button to Zoom and show popup

ShaneHogg — Tue, 09 Jul 2013 19:39:12 GMT

Hey, I managed to figure it out yesterday.

The result is thus, when zooming on custom buttons the info template is displayed, clicking on other points or other zoom buttons cancels the infotemplate open and opens the correct one for that extent or clicked point.

Thanks for the idea of creating 2 infotemplates from your previous post, that was 1/2 the problem.

Thanks for you help
zconlen