ArcGIS JS API 3.21 InfoTemplate ZoomIn Button

[MatthewDewell]

Has anyone had luck attaching a click event to a custom button built in the HTML of the InfoTemplate? Here's my InfoTemplate HTML:

uploadInfoTemplate = new InfoTemplate ({     title: "",     content: "<strong>Segment:</strong> ${segment}" +              "<hr/>" +              "<strong>Time:</strong> <i>${dateTime}</i>" +              "<div style='width: 100%; text-align:right;'>" +                  "<input class='zoomButton' type='button' value='Zoom to' />" +              "</div>" });

I then have hidden items on the default InfoTemplate, i.e. the zoomTo link. I want to simply replace the zoomTo's functionality with a button, to make it look a little nicer.

[MatthewDewell]

Hello again Robert,

This looks VERY promising with the domConstruct being used and the query on the '.actionList' class, yet, I'm curious, how the 'link' variable got assigned to the zone.  Please pardon my ignorance, how did the buffer area know the spot was being clicked?  When I'm creating an infoTemplate, I assign it to the graphic I'm creating.

Thank You,

Matt

[RobertScheitlin__GISP]

Matt,

how did the buffer area know the spot was being clicked

Well that is this line of code:

var feature = window.map.infoWindow.getSelectedFeature();

how the 'link' variable got assigned to the zone

Not sure what you mean by zone. If you are talking about the bottom of the popup then it was from the dojo query of the .actionList class in the popup.

[MatthewDewell]

Hello Robert,

Sorry for the confusion about the 'zone'.  The way I'm seeing it happen for use of the sample's 'click', there is a green area that you can click on.  When you click on it, perhaps the bufferZone, it triggers the popup?  Maybe it happens in more areas of the layer.  But, I will also admit, I'm not too familiar with Feature Layers along with Graphics Layers.  Heck, I'm not too familiar with Feature Layers, and maybe a little more familiar with Graphics Layers.   I'll try looking it Feature Layers, along with the use of Graphics Layers.  Do have any help/examples with using the two layers together?

Thank You,

Matt

[MatthewDewell]

Hello Robert,

I think I see that it's getting assigned this way:

featureSet.features = [graphic];

It is using the FeatureSet, but I'm not exactly getting how it's knowing to "execute" the click to go to its functions, as I'm not using a Geoprocessor.  I just have a graphic/point the user is clicking on.  Do you have any insight here?

Thank You,

Matt

[MatthewDewell]

Hello Robert,

I guess a better question may be, can you assign a feature layer per point/graphic drawn, and then assign the domConstruct to that.  I do believe it's exactly what needs to be done, but I'm not exactly getting how to do it.  Any help would be greatly appreciated.

Thank You,

Matt

[RobertScheitlin__GISP]

Matt,

  If you are wanting to only assign your button to specific features then you would need to attach to the set-features event of the maps infoWindow:

map.infoWindow.on ('set-features', function(features){
  //Validate if this is one of your features by looping through the features
  //and checking for some specific attribute name or just by getting the 
  //features layer i.e. feature.getLayer() and check if it is your layer
  //Then if true you use domConstruct to add the button
});‍‍‍‍‍‍

[MatthewDewell · Accepted solution]

Hello Robert,

I may be looking for using featureLayers in a bit here, but I got the actionList button to work by using some of your suggestion's example:

var zoomButtonHTML = '<div style="width: 100%; text-align: right;"><input type="button" value="Zoom to" /></div>';

var zoomButton = domConstruct.create("div", {

    "class": "action",

    "id": "uploadLink",

    "innerHTML": zoomToButtonHTML

}, query(".actionList", this.map.infoWindow.domNode)[0]);

on(zoomButton, 'click', this._zoomToPoint);

My code then loops through all the points I have to plot, where I pass the zoom Button object to the _pointPlot function for each point.  Wherein, I define my uploadInfoTemplate:

uploadInfoTemplate = new InfoTemplate({

    domNode: zoomButton,

   title: "",

   content: content

});

I guess I'm lucky, I didn't have to go about creating a FeatureLayer, and it seems to have just used the InfoWindow/infoTemplate.  Now, it looks like I'm going to have to go about translating the x/y cords of the graphic to the actual lat/long.  Is that the WebMercator I use?  Oh well.

Thank You ... again,

Matt

Note: I got the idea from Robert's post about the example - Geoprocessing tool link in popup | ArcGIS API for JavaScript 3.21  above.