nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Firing an infoWindow from a data grid list

MartynSmith

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!

Finde mehr Beiträge mit dem Tag

Accepted answers

All comments

MillerDerek

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

KenBurcham

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.

MillerDerek

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

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.

MillerDerek

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

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>

MillerDerek

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

GordonBooth

//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);

MillerDerek

Pramod and Derek: I too I'm having similar problems - with On click of a row in the datagrid the popup appears for the first time perfectly placed to the right and centered. (Note: If at this point I zoom in/out and then click another row in the datagrid it will work perfectly again.) However if I don't change the zoom level and I click another row in the datagrid it zooms to that level but popup is only partially in the view. I've attached my code and some screen shots. One of the problems I had earlier was the zoom. I'm using base maps and map layers all projected in Web Mercator (102100) and I'm zooming to a point. If you're doing this you need to set extent by adding to & subtracting from the point geometry.
I'd welcome some help - thanks.

I've had similar issues with popups in the past when embedding applications in an existing page. I found this bug notice while looking into the issue. Not sure if this might have anything to do with your issues:

http://forums.arcgis.com/threads/55515-Popup-is-not-displayed-correctly-when-map-is-absolute-positioned-on-page?highlight=query+show+popup

Thoughts?

Hope you can get it figured out. Happy to help if I can.

- d

GordonBooth

Pramod and Derek: I too I'm having similar problems - with On click of a row in the datagrid the popup appears for the first time perfectly placed to the right and centered. (Note: If at this point I zoom in/out and then click another row in the datagrid it will work perfectly again.) However if I don't change the zoom level and I click another row in the datagrid it zooms to that level but popup is only partially in the view. I've attached my code and some screen shots. One of the problems I had earlier was the zoom. I'm using base maps and map layers all projected in Web Mercator (102100) and I'm zooming to a point. If you're doing this you need to set extent by adding to & subtracting from the point geometry.
I'd welcome some help - thanks.

 //Select an offender in the data grid
        function onRowClickHandler(evt) {
            var clickedOffender = grid.getItem(evt.rowIndex).OBJECTID;
            var selectedAddress;
            for (var i = 0, il = map.graphics.graphics.length; i < il; i++) {
                var currentGraphic = map.graphics.graphics;
                //assign selection to a graphic
                if (currentGraphic.attributes.OBJECTID == clickedOffender) {
                    selectedAddress = currentGraphic;
                    break;
                }
            }

            //automatically show popup
            map.infoWindow.setContent(selectedAddress.getContent());
            map.infoWindow.setTitle(selectedAddress.getTitle());
            map.infoWindow.show(selectedAddress.geometry, new esri.SpatialReference({ wkid: 102100 }));
            //set the point extent and spatial reference, to zoom in
            //requires a value (250 or 500 work well) for adding or subtracting from xmax,xmin,ymax,ymin
            var factor = 250;
            extent = new esri.geometry.Extent(
            selectedAddress.geometry.x - factor,
            selectedAddress.geometry.y - factor,
            selectedAddress.geometry.x + factor,
            selectedAddress.geometry.y + factor,
            new esri.SpatialReference({ wkid: 102100 }));
            map.setExtent(extent);
        }


        dojo.addOnLoad(init);

FirstTime_PerfectPlacement.JPG

SecondTime_Partially hidden.JPG

MillerDerek

I had a strange behaviour of popup in my app for a similar kind of approach.
On click of grid the popup appears for the first time and when i click on next grid it only zooms to that level but without popup.
a click again on the same grid, gets the popup back or even the zoom out of map helps. Not sure why this stuff happens!

Trying to replicate the same, couldn't find much luck
Here's the fiddle.
search for Owner name Katz

to see such a behaviour first click on row
192717701 Sidney F Katz Null 1966 1379 Stuyvessant Rd and then on
190745300 Samuel Katz Null 1982 3377 Indian Summer Dr

Not sure why this happens with only these two pairs but i have this prob with every row in my app.

Whats making this happen?

Ever find a solution to this, Pramod? I'm experiencing very similar behavior, and would like to sort it out, clearly. Also having issues selecting the grid when a user clicks a feature on the map, but that's an issue for a separate post.

You can view what's going on in my app here: map

Hopefully we can get them both to function properly!

Thanks.

- D

PramodHarithsa1

I had a strange behaviour of popup in my app for a similar kind of approach.
On click of grid the popup appears for the first time and when i click on next grid it only zooms to that level but without popup.
a click again on the same grid, gets the popup back or even the zoom out of map helps. Not sure why this stuff happens!

Trying to replicate the same, couldn't find much luck
Here's the fiddle.
search for Owner name Katz

to see such a behaviour first click on row
192717701 Sidney F Katz Null 1966 1379 Stuyvessant Rd and then on
190745300 Samuel Katz Null 1982 3377 Indian Summer Dr

Not sure why this happens with only these two pairs but i have this prob with every row in my app.

Whats making this happen?

evtguy

Just to add to Pramod's code, you just need to add a dojo.connect() listener in your map's init() function similar to this:

 // Listener event to retrieve the recordID of the record in the datagrid that the user clicked on
 dojo.connect(dijit.byId("grid"), 'onRowClick', function(e) {
  var rowdata = grid.getItem(e.rowIndex);
  var theId = rowdata.OBJECTID;

  theFeatureLayer.clearSelection();
  var query = new esri.tasks.Query();
  query.objectIds = [theId];
  theFeatureLayer.selectFeatures(query,esri.layers.FeatureLayer.SELECTION_NEW,onRowClickHandler);
 });

PramodHarithsa1

I have done similar stuff in my app.

on click of Grid you can call the function which fires on click with few modifications.

function onRowClickHandler(evt) {
              var ClickedId = grid.getItem(evt.rowIndex).ASSETID;
              var selectedId=0;
              //var symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 3);
              dojo.forEach(advancedMapObj._layers.SearchResultLayer.graphics, function (graphic) {
                  if ((graphic.attributes) && graphic.attributes.ASSETID === ClickedId) {
                      selectedId = graphic;
                      return;
                  }
              });
              if(selectedId)
               {
              var selectedExtent = selectedId.geometry.getExtent();
              //selectedId.setSymbol(symbol);
              //map.graphics.add(selectedId);
              map.setExtent(selectedExtent);
//I wrote this part of code so as to get a point on the polyline i was interested in
 var length = graphic.geometry.paths[0].length;
                   if (length % 2 != 0)
                       length = length - 1;
                   var pointxy = graphic.geometry.paths[0][(length / 2)];
                  Infopoint = new esri.geometry.Point(pointxy[0], pointxy[1], new esri.SpatialReference({ wkid: 102100 }));
//and after setting the info template
map.infoWindow.show(Infopoint,basicMapObj.getInfoWindowAnchor(Infopoint));

               }
              else
               {
               alert("Assets not mapped properly");
               }
               

          }

evtguy

Being the weekend, I don't have my code in front of me but in one of the apps I've been developing, I've added a dojo.connect listener event tied to the row click event of a dataGrid I have in my app (it zooms to the extent of the feature listed in the dataGrid). I suppose you get get the FID of the feature, query it using queryTask, and then manually trigger the infoWindow, passing the feature returned by the queryTask to the infoWindow.

I'm just thinking out loud, though. 😄

KeithGanzenmuller

Hey Martyn, you have any luck solving this issue?

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.