Firing an infoWindow from a data grid list

MartynSmith · ‎09-11-2012

I'm trying to duplicate the functionality you see when click a graphic on the map opening up an infoWindow anchored at a graphic.

For example, a set of points are displayed on the map and an infoWindow has been configured for these and works correctly when a point on the map is clicked. But I'm also displaying a text list of the names of these same points in a dojo datagrid in a left pane. I'd like to fire up the same infoWindow action when a user clicks a row in the data grid corresponding to a point.

I've looked in the API reference, and I see there is an infoWindow.show() , but that would require re-creating the popups that are already tied to the graphics layer, which is NOT what I want to do.

I'm looking for a method that triggers the same action as clicking a point on the map. Seems like it should be something simple that I am missing.

Thanks for any help!

DerekMiller · ‎11-21-2012

Derek:
I do have it working. My work around was to create a counter and determine if it was even or odd. Depending on the result the factor added/subtracted from the extent alternates between two values. It's not very pretty so maybe someone out there can suggest some changes to make it a little more elegant. Thanks for your help.

//row click counter
            x = x + 1;
            //known bug in popup window, my workaround is to alternate the factor variable
            var factor;
            if (x % 2 === 0) {
                factor = 1000
            }
            else {
                factor = 1500
            }

            //set the point extent and spatial reference, to center & zoom in
            //factor must be no greater than 1500 so clusters are singles
             extent = new esri.geometry.Extent(
             selectedAddress.x - factor,
             selectedAddress.y - factor,
             selectedAddress.x + factor,
             selectedAddress.y + factor,
             new esri.SpatialReference({ wkid: 102100 }));
            map.setExtent(extent);

Hi Gordon,

Glad you got it working. I was able to resolve the issues I was having as well. The issue I was experiencing was a result of the map navigation to the selected feature, the assignment of the selected feature to the popup, and the popup.show method being called simultaneously. The fix was navigating to the selected feature using a map.centerAt method, then passing the selected feature to the popup through an 'onExtentChange' listener on the map.

I'd be interested to see your app; is it public?

Best,

- d

KenBurcham · ‎03-20-2013

Hi guys,

I went about this slightly differently, but I'm happy with it and thought I'd share a full working example for others.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Dynamic layer template with datagrid test</title>

    <link href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dojox/grid/resources/Grid.css"/>
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css" />
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/" type="text/javascript"></script>

    <script>var dojoConfig = { parseOnLoad: true };</script>

    <script type="text/javascript">

        //Ken Burcham - from many examples - 3/20/13
        //CTUIR - GIS

        dojo.require("dojo.parser");

        dojo.require("esri.dijit.Popup");
        dojo.require("esri.map");
        dojo.require("esri.dijit.Scalebar");
        dojo.require("esri.layers.FeatureLayer");
        dojo.require("dijit.form.Button");
        dojo.require("dijit.form.TextBox");
        dojo.require("dijit.layout.BorderContainer");
        dojo.require("dijit.layout.ContentPane");

        dojo.require("dojox.grid.DataGrid");
        dojo.require("dojo.data.ItemFileReadStore");

        var map;

        function init() {

            //define custom popup options        
            var popupOptions =
            {
                markerSymbol: new esri.symbol.SimpleMarkerSymbol("circle", 32, null, new dojo.Color([0, 0, 0, 0.25])),
                marginLeft: "20",
                marginTop: "20"
            };

            //create a popup to replace the map's info window        
            var popup = new esri.dijit.Popup(popupOptions, dojo.create("div"));

            //define a popup template        
            var popupTemplate = new esri.dijit.PopupTemplate({
                title: "Study Site: {StudySiteID}",
                fieldInfos: [
                    { fieldName: "Description", visible: true, label: "Description" },
                    { fieldName: "Latitude", visible: true, label: "Latitude" },
                    { fieldName: "Longitude", visible: true, label: "Longitude" },
                    { fieldName: "RiverName", visible: true, label: "River" }
                ], showAttachments: true
            });

            map = new esri.Map("map", {
                sliderOrientation: "horizontal",
                center: [-118.45, 45.56],
                zoom: 10,
                infoWindow: popup
            });

            //define my basemap
            var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer");
            map.addLayer(basemap);

            //define our overlay layer of the reservation
            var boundary = new esri.layers.ArcGISDynamicMapServiceLayer("http://restdata.umatilla.nsn.us/arcgis/rest/services/TribalLands/MapServer");
            map.addLayer(boundary);

            //define the feature layer which will be our water temp study sites
            // api reference: http://help.arcgis.com/en/webapi/javascript/arcgis/jsapi/featurelayer.html
            var featureLayer =
                new esri.layers.FeatureLayer("http://restdata.umatilla.nsn.us/arcgis/rest/services/StudySites/MapServer/0",
                {
                    mode: esri.layers.FeatureLayer.MODE_SNAPSHOT, //using this mode starts off showing all of the points 
                    infoTemplate: popupTemplate,
                    outFields: ["StudySiteID", "Latitude", "Longitude", "Description", "RiverName"]
                });

            //clicking on the map should show the infowindow for that point
            dojo.connect(featureLayer, "onClick", function (evt) {
                map.infoWindow.setFeatures([evt.graphic]);
            });

            //populate our datagrid with all of the studysite data
            dojo.connect(featureLayer, 'onLoad', function (layer) {
                var query = new esri.tasks.Query();
                query.where = "1=1";
                layer.queryFeatures(query, function (featureSet) {

                    var items = dojo.map(featureSet.features, function (feature) {
                        return feature.attributes;
                    });
                    
                    var data = {
                        identifier:"StudySiteID",
                        items: items
                    };

                    store = new dojo.data.ItemFileReadStore({ data:data });

                    try
                    {
                        var layout = [[
                              { 'name': 'Study Site ID', 'field': 'StudySiteID', 'width': '100px' },
                              { 'name': 'River Name', 'field': 'RiverName', 'width': '140px' },
                              { 'name': 'Description', 'field': 'Description', 'width': '660px' }
                        ]];

                        
                        var grid = new dojox.grid.DataGrid({
                            id: 'grid',
                            store: store,
                            structure: layout,
                            rowSelector: '20px'
                        });
                        
                        grid.placeAt("data"); //this is the div below that we want to fill
                        grid.startup();

                        //connect to the onRowClick event - clicking a row should show the studysite in the map
                        grid.onRowClick = function (e) { zoomRow(e.grid.getItem(e.rowIndex).StudySiteID); };

                    }
                    catch (err) {
                        console.dir(err);
                    }
                });
            });

            map.addLayer(featureLayer);

            //set our infowindow dimensions
            dojo.connect(map, "onLoad", function (map) {
                map.infoWindow.resize(270, 180);
            });

            //zoom in the map to this point (called when someone clicks a datagrid row)
            //param: id = StudySiteID
            function zoomRow(id) {
                
                try
                {
                    var query = new esri.tasks.Query();
                    query.objectIds = [id];

                    featureLayer.selectFeatures(query, esri.layers.FeatureLayer.SELECTION_ADD, function (features) {
                        
                        //zoom to the selected feature and show the infowindow
                        map.infoWindow.setContent(features[0].getContent());
                        map.infoWindow.setTitle(features[0].getTitle());
                        map.infoWindow.show(features[0].geometry);
                        //map.infoWindow.resize(270, 180);  //not necessary
                        
                    });
                    
                } catch (err) {
                    console.dir(err);
                }
            }

            var scalebar = new esri.dijit.Scalebar({
                map: map,
                attachTo: "top-left"
            });

        }

        dojo.addOnLoad(init);

    </script>

     <style>  
         html,body,#mapDiv,.map.container
         {    
             padding:0;    
             margin:0;    
             height:100%;  
         }  
     </style>

</head>
<body class="claro">

     <div id="map" style="width:100%; height:80%; border:1px solid #000;"></div>
     <div id="data" style="width:100%; height:20%"></div>

</body>


</html>

DerekMiller · ‎03-20-2013

I see you have a function to zoom to a point on the map when a row in the grid is clicked. However, I put your code into jsfiddle and this is not functioning. Am I missing something?

- d

KenBurcham · ‎03-20-2013

This is the line that does it:

map.infoWindow.show(features[0].geometry);

So you might have to check the response you get back from the server and make sure "features[0]" has a populated response from the query.

ken.

DerekMiller · ‎03-20-2013

This is the line that does it:
map.infoWindow.show(features[0].geometry);
So you might have to check the response you get back from the server and make sure "features[0]" has a populated response from the query.

ken.

Wouldn't that simply show the infowindow, and not pan the map?

KenBurcham · ‎03-20-2013

Oh, you mean pan the MAAAaaaaap! Yeah, that just shows the infowindow. I hadn't tried to get the pan the map thing working yet. I think there was a setExtent method that might do that.

Arg, I'm a moron. Sorry! 🙂

ken.

DerekMiller · ‎03-20-2013

Oh, you mean pan the MAAAaaaaap! Yeah, that just shows the infowindow. I hadn't tried to get the pan the map thing working yet. I think there was a setExtent method that might do that.

Arg, I'm a moron. Sorry! 🙂

ken.

No worries!

I was just curious. I tied a function to the grid that pulls the id of the selected cell, uses that id as a query to the feature layer, then centers the map at the returned geometry using the map.centerAt() method. Didn't know if you had found a more simple method of accomplishing that. Also note that I'm using a dgrid as opposed to dojox.datagrid... while similar there could be different methods/properties between the two.

Anyways, you can see the solution I came up with here if interested.

Cheers.

- d