Query Task within Tooltip Dialog pop up window

CameronIrvine — Thu, 07 Jul 2011 15:11:51 GMT

Hi,

I am trying to use the dojo tooltip dialog widget which is in the samples on the ESRI Javascript page - http://help.arcgis.com/EN/webapi/javascript/arcgis/demos/map/map_dialog.html. I want it to be added to any address pages on our website so that when a user clicks the hyperlink it parses a property reference to a querytask that zooms to the property and highlights it.

However, when I have tried to do this using the tool tip widget it doesn't work. The map appears but it doesn't zoom to the location of the property. I guess the question I have is can the map object be created on a dynamic div content?

This is what we have tried:

When the map object is created on a div that is the content on a dojo tooltip that is created in the following steps:

1. Create the dojo tooltip as:

     var htmlFragment = '<div>Click on the map.</div>';
          htmlFragment += '<div id="mapTwo" style="width:350px; height:350px; border: 1px solid #A8A8A8;"></div>';
          // CREATE TOOLTIP DIALOG
          tooltipDialog = new dijit.TooltipDialog({
            content: htmlFragment,
            autofocus: !dojo.isIE, // NOTE: turning focus ON in IE causes errors when reopening the dialog
            refocus: !dojo.isIE
          });

2. Create the map object as:

var map = new esri.Map("mapDiv" ,{
          slider: false
        });

3. Execute a Query as:
create the query task and set the query parameters with the where clause.
        queryTask.execute(query, function(fset){
   if (fset.features.length === 1) {
    showFeature(fset.features[0]);
   }

4. Show features will zoom to the extent

function showFeature(feature) {
        map.graphics.clear();
        curFeature = feature;
           var fExtent = feature.geometry.getExtent();
        var centerPt = fExtent.getCenter();
        map.centerAt(centerPt);
      var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 255, 0]), 5), new dojo.Color([0, 0, 0, 0.25]));
        feature.setSymbol(symbol);
           feature.setInfoTemplate(new esri.InfoTemplate ("Address", "${FullAddressNoAddr1}" ));
           map.graphics.add(feature);
           map.infoWindow.resize(150, 100);
        map.infoWindow.setTitle(feature.getTitle()).setContent(feature.getContent());
           map.infoWindow.show(map.toScreen(centerPt), map.getInfoWindowAnchor(map.toScreen(centerPt)));
       }

Basically this does not work and the zoomed map is not shown. But debug messages show that the query is executed and the results are fetched in the show features.

But if the change is made such that the map object is created on a div that is created in the body of the html tag as:
<div id="mapDiv" style="width:450px; height:350px; border: 1px solid #A8A8A8;"></div>

And the init function is called on load

The init function created the map as:
map = new esri.Map("mapDiv", {
   nav: true,
   displayGraphicsOnPan: !dojo.isIE
   });

This works and the map is displayed to the zoomed in location.

I hope what we are trying to achieve is clear.

Thanks
Cameron

topic Query Task within Tooltip Dialog pop up window in ArcGIS JavaScript Maps SDK Questions

Query Task within Tooltip Dialog pop up window