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; } } }

Default editor and conflicting infoWindows with featureLayers

JayGregory

Hello -
I created a basic web editing map with code taken largely from the default editing widgit sample.
I then tried to incorporate a couple other feature layers and other functionality that I had built in a different map, manipulating the infoWindows with the following lines spread throughout the application...

 map.infoWindow.setTitle('<div> </div>');
          map.infoWindow.resize(300, 500);
          map.infoWindow.setContent('<div id="infoWindowContents"></div>');
          ......
          content = '<p>example of html formatted content</p>';
        dojo.byId('infoWindowContents').innerHTML = content;

All this worked perfectly before I tried to make a mashup with the default editor. Now the default editor infoWindow (which should have the editable attribute field and a delete key) is replaced with the maps infoWindow and whatever content was inside based on the feature layer graphic most recently clicked.
My question is what is the best way to make these two play nicely together, without having to get into the InfoWindow Base Class. All the examples I've seen talk about using a Popup and replacing the map's infoWindow with a custom pop-up. But can a map utilize TWO infoWindows - one as the default editor's, and the other as the custom content populated one I can manipulate as I need?

Thanks!

Jay

Find more posts tagged with

Accepted answers

All comments

ThaoLe

Let me see if I understand the problem correctly. You are using the ed_default_editingwidget sample and would like to make use of 2 infoWindows. Is that correct?

If so, why do you want to use 2 infoWindows? Are you going to display 2 infoWindows at once when a user clicks on a feature?

JayGregory

I don't need to display two windows at once. Maybe I'm thinking two infoTemplates, not two infoWindows. The infoWindow (and infoTemplate) seems to be built into the default editor widgit though. The esri default editor example that I referenced makes no mention of infoTemplates or infoWindow's in the code, so I assume it's built into the rollup somehow.

Lets say I have two layers added to my map - a feature layer from a feature service, which users the default editor to add and delete features, and a graphics layer with added map points based on some other functionality.
When I add a graphicsLayer graphic to my map, I include what content to include in the infoWindow. Then I set up an onClick listener to display the infoWindow when a user clicks on my graphic. The problem is, that custom content that I populate the infoWindow with when a user clicks on some graphic seems to overwrite the infoWindow contents used by the default editor for my feature layer. So when I click on a featureLayer graphic that uses the default editor, the content is incorrect. It doesn't display the normal window with the delete button and editable attribute fields, but instead an infoWindow with the contents from the graphicsLayer graphic.
Does that make any sense at all?
Maybe I have to switch the infoTemplate from the default editor's infoTemplate to the default map infoWindow's infoTemplate?
Thanks, Jay

ThaoLe

I must be doing something wrong in the code. I can't seem to reproduce the same issue you are seeing. I modified the sample code and added the following

            map.infoWindow.resize(400, 300);
            map.infoWindow.setTitle('asdf<div>thang</div>');
            map.infoWindow.setContent('<div id="infoWindowContents"></div>');
            content = '<p>example of html formatted content</p>';
            dojo.byId('infoWindowContents').innerHTML = content;

I can't seem to get my code to replace the infoWindow though.

What version of the JavaScript API are you using?

Here's my full code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9" />
    <title>Default Editor </title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css">
    <script type="text/javascript">
        dojoConfig = {
            parseOnLoad: true
        };

    </script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8">

    </script>
    <style type="text/css">
        html, body
        {
            height: 100%;
            width: 100%;
            margin: 0;
        }
        
        body
        {
            background-color: #fff;
            overflow: hidden;
            font-family: Helvetica;
        }
        
        #templatePickerPane
        {
            width: 225px;
            overflow: hidden;
        }
        
        #panelHeader
        {
            background-color: #92A661;
            border-bottom: solid 1px #92A860;
            color: #FFF;
            font-size: 18px;
            height: 24px;
            line-height: 22px;
            margin: 0;
            overflow: hidden;
            padding: 10px 10px 10px 10px;
        }
        #map
        {
            margin-right: 5px;
            padding: 0;
        }
        
        .esriEditor .templatePicker
        {
            padding-bottom: 5px;
            padding-top: 5px;
            height: 500px;
            border-radius: 0px 0px 4px 4px;
            border: solid 1px #92A661;
        }
        
        .dj_ie .infowindow .window .top .right .user .content, .dj_ie .simpleInfoWindow .content
        {
            position: relative;
        }
    </style>
    <script type="text/javascript">
        dojo.require("esri.dijit.editing.Editor-all");
        dojo.require("dijit.layout.BorderContainer");
        dojo.require("dijit.layout.ContentPane");
        dojo.require("esri.SnappingManager");


        var map;

        function init() {
            //snapping is enabled for this sample - change the tooltip to reflect this
            esri.bundle.toolbars.draw.start = esri.bundle.toolbars.draw.start + "<br/>Press <b>CTRL</b> to enable snapping";
            esri.bundle.toolbars.draw.addPoint = esri.bundle.toolbars.draw.addPoint + "<br/>Press <b>CTRL</b> to enable snapping";

            //This sample requires a proxy page to handle communications with the ArcGIS Server services. You will need to  
            //replace the url below with the location of a proxy on your machine. See the 'Using the proxy page' help topic 
            //for details on setting up a proxy page.
            esri.config.defaults.io.proxyUrl = "http://le/proxy/net/silverlight/proxy.ashx";

            //This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications
            esri.config.defaults.geometryService = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

            var extent = new esri.geometry.Extent({
                "xmin": -8576501,
                "ymin": 4705377,
                "xmax": -8574612,
                "ymax": 4706867,
                "spatialReference": {
                    "wkid": 102100
                }
            });


            map = new esri.Map("map", {
                extent: extent
            });
        

            dojo.connect(map, "onLoad", function () {
                //resize the map when the browser resizes
                dojo.connect(dijit.byId('map'), 'resize', map, map.resize);
            });
            dojo.connect(map, "onLayersAddResult", initEditing);
            var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
            map.addLayer(basemap);


            var operationsPointLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/HomelandSecurity/operations/FeatureServer/0", {
                mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
                outFields: ["*"]
            });
            var operationsLineLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/HomelandSecurity/operations/FeatureServer/1", {
                mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
                outFields: ["*"]
            });
            var operationsPolygonLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/HomelandSecurity/operations/FeatureServer/2", {
                mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
                outFields: ["*"]
            });

            map.addLayers([operationsPointLayer, operationsPolygonLayer, operationsLineLayer]);


            map.infoWindow.resize(400, 300);
            map.infoWindow.setTitle('asdf<div>thang</div>');
            map.infoWindow.setContent('<div id="infoWindowContents"></div>');

            content = '<p>example of html formatted content</p>';
            dojo.byId('infoWindowContents').innerHTML = content;
        }

        function initEditing(results) {
            var featureLayerInfos = dojo.map(results, function (result) {
                return {
                    'featureLayer': result.layer
                };
            });

            var settings = {
                map: map,
                layerInfos: featureLayerInfos
            };

            var params = {
                settings: settings
            };

            var editorWidget = new esri.dijit.editing.Editor(params, 'editorDiv');

            var options = { snapKey: dojo.keys.copyKey };
            map.enableSnapping(options);

            editorWidget.startup();

        }

        dojo.addOnLoad(init);

    </script>
</head>
<body class="claro">
    <div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false"
        style="width: 100%; height: 100%;">
        <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
        </div>
        <div data-dojo-type="dijit.layout.ContentPane" id="templatePickerPane" data-dojo-props="region:'left'">
            <div id="panelHeader">
                Default Editor
            </div>
            <div style="padding: 10px;" id="editorDiv">
            </div>
        </div>
    </div>
</body>
</html>

JayGregory

So try adding some other layer, configure an infoWindow, and see how nicely infoWindows display when you first click on an editable layer, and then on a non-editable layer. He's the code I added to yours to replicate, and then the full code at the bottom:
1. Set a new infoTemplate

template = new esri.InfoTemplate();
   template.setTitle('<div>thang</div>');
   template.setContent('<div id="infoWindowContents"></div>');

2 Add a featureLayer, in my case the USGS stream flow stations:

var streamFlowURL = "http://rmgsc.cr.usgs.gov/ArcGIS/rest/services/nhss_usdata/MapServer/0";
   var streamFlowLayer = new esri.layers.FeatureLayer(streamFlowURL,{
   mode:esri.layers.FeatureLayer.MODE_ONDEMAND,
   outFields:["*"],
   infoTemplate: template
  });

3 Add the layer, set a renderer and an onclick listener:

map.addLayer(streamFlowLayer);
   var streamSymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 20, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,0,0]), 1), new dojo.Color([0,255,0,1]));
      var streamRenderer = new esri.renderer.SimpleRenderer(streamSymbol);
      streamFlowLayer.renderer = streamRenderer;
   dojo.connect(streamFlowLayer, "onClick", streamPopup);

4. Create the function to populate the infoWindow

function streamPopup(evt){
 //template.setContent('<div id="infoWindowContents"></div>');
 graphic = evt.graphic;
 attr = graphic.attributes;
 var content = "";
 content += '<b>UR</b>:' + attr.STANAME;
 //dojo.byId('infoWindowContents').innerHTML = content;
 //esri.show(dojo.byId("infoWindowContents"));
    var title = 'Stream Guage ' + attr.STAID;
    map.infoWindow.resize(300,200);
    template.setTitle(title);
    template.setContent(content);
 //dojo.byId('infoWindowContents').innerHTML = content;
 //esri.show(dojo.byId("infoWindowContents"));
 var screenPoint = evt.screenPoint;
    map.infoWindow.show(evt.graphic.geometry, map.getInfoWindowAnchor(screenPoint));
}

You can see by the comments that I played around a little bit with trying to set content by the div id, or just by modifying the template directly. Neither worked.
Here is my full code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9" />
    <title>Default Editor </title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css">
    <script type="text/javascript">
        dojoConfig = {
            parseOnLoad: true
        };

    </script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"></script>
    <style type="text/css">
        html, body
        {
            height: 100%;
            width: 100%;
            margin: 0;
        }
        
        body
        {
            background-color: #fff;
            overflow: hidden;
            font-family: Helvetica;
        }
        
        #templatePickerPane
        {
            width: 225px;
            overflow: hidden;
        }
        
        #panelHeader
        {
            background-color: #92A661;
            border-bottom: solid 1px #92A860;
            color: #FFF;
            font-size: 18px;
            height: 24px;
            line-height: 22px;
            margin: 0;
            overflow: hidden;
            padding: 10px 10px 10px 10px;
        }
        #map
        {
            margin-right: 5px;
            padding: 0;
        }
        
        .esriEditor .templatePicker
        {
            padding-bottom: 5px;
            padding-top: 5px;
            height: 500px;
            border-radius: 0px 0px 4px 4px;
            border: solid 1px #92A661;
        }
        
        .dj_ie .infowindow .window .top .right .user .content, .dj_ie .simpleInfoWindow .content
        {
            position: relative;
        }
    </style>
    <script type="text/javascript">
        dojo.require("esri.dijit.editing.Editor-all");
        dojo.require("dijit.layout.BorderContainer");
        dojo.require("dijit.layout.ContentPane");
        dojo.require("esri.SnappingManager");
  dojo.require("esri.layers.FeatureLayer");


        var map, template, editorWidget;

        function init() {
   
            esri.bundle.toolbars.draw.start = esri.bundle.toolbars.draw.start + "<br/>Press <b>CTRL</b> to enable snapping";
            esri.bundle.toolbars.draw.addPoint = esri.bundle.toolbars.draw.addPoint + "<br/>Press <b>CTRL</b> to enable snapping";
            esri.config.defaults.io.proxyUrl = "http://le/proxy/net/silverlight/proxy.ashx";
            esri.config.defaults.geometryService = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

            var extent = new esri.geometry.Extent({
                "xmin": -8576501,
                "ymin": 4705377,
                "xmax": -8574612,
                "ymax": 4706867,
                "spatialReference": {
                    "wkid": 102100
                }
            });


            map = new esri.Map("map", {
                extent: extent
            });
            template = new esri.InfoTemplate();
   template.setTitle('<div>thang</div>');
   template.setContent('<div id="infoWindowContents"></div>');

            dojo.connect(map, "onLoad", function () {
                //resize the map when the browser resizes
                dojo.connect(dijit.byId('map'), 'resize', map, map.resize);
            });
            dojo.connect(map, "onLayersAddResult", initEditing);
            var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
            map.addLayer(basemap);


            var operationsPointLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/HomelandSecurity/operations/FeatureServer/0", {
                mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
                outFields: ["*"]
            });
            var operationsLineLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/HomelandSecurity/operations/FeatureServer/1", {
                mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
                outFields: ["*"]
            });
            var operationsPolygonLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/HomelandSecurity/operations/FeatureServer/2", {
                mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
                outFields: ["*"]
            });
   
   var streamFlowURL = "http://rmgsc.cr.usgs.gov/ArcGIS/rest/services/nhss_usdata/MapServer/0";
   var streamFlowLayer = new esri.layers.FeatureLayer(streamFlowURL,{
   mode:esri.layers.FeatureLayer.MODE_ONDEMAND,
   outFields:["*"],
   infoTemplate: template
  });

            map.addLayers([operationsPointLayer, operationsPolygonLayer, operationsLineLayer]);
   map.addLayer(streamFlowLayer);
   var streamSymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 20, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,0,0]), 1), new dojo.Color([0,255,0,1]));
      var streamRenderer = new esri.renderer.SimpleRenderer(streamSymbol);
      streamFlowLayer.renderer = streamRenderer;
   dojo.connect(streamFlowLayer, "onClick", streamPopup);


        }
function streamPopup(evt){
 //template.setContent('<div id="infoWindowContents"></div>');
 graphic = evt.graphic;
 attr = graphic.attributes;
 var content = "";
 content += '<b>UR</b>:' + attr.STANAME;
 //dojo.byId('infoWindowContents').innerHTML = content;
 //esri.show(dojo.byId("infoWindowContents"));
    var title = 'Stream Guage ' + attr.STAID;
    map.infoWindow.resize(300,200);
    template.setTitle(title);
    template.setContent(content);
 //dojo.byId('infoWindowContents').innerHTML = content;
 //esri.show(dojo.byId("infoWindowContents"));
 var screenPoint = evt.screenPoint;
    map.infoWindow.show(evt.graphic.geometry, map.getInfoWindowAnchor(screenPoint));
}

        function initEditing(results) {
            var featureLayerInfos = dojo.map(results, function (result) {
                return {
                    'featureLayer': result.layer
                };
            });

            var settings = {
                map: map,
                layerInfos: featureLayerInfos
            };

            var params = {
                settings: settings
            };

            var editorWidget = new esri.dijit.editing.Editor(params, 'editorDiv');

            var options = { snapKey: dojo.keys.copyKey };
            map.enableSnapping(options);

            editorWidget.startup();

        }

        dojo.addOnLoad(init);

    </script>
</head>
<body class="claro">
    <div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false"
        style="width: 100%; height: 100%;">
        <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
        </div>
        <div data-dojo-type="dijit.layout.ContentPane" id="templatePickerPane" data-dojo-props="region:'left'">
            <div id="panelHeader">
                Default Editor
            </div>
            <div style="padding: 10px;" id="editorDiv">
            </div>
        </div>
    </div>
</body>
</html>

Thanks for any assistance you might be able to provide.... (I'm using 2.8 of the API)

JeremiahJohnson

Jay,

Were you able to find a solution to the problem? I'm having the same problem with an editable Feature Service layer and separate Feature Layer I want to have an infowindow on. The default editor infowindow looks great until I click on the other layer and back to the editable layer. The feature layer's infowindow overwrites the editor infowindow infotemplate!

abdelabdel

Jeremiah,

I have exactly the same problem. Were you able to find a solution to the problem?

Thank you

JeremiahJohnson

Abdel,

No, I wasn't able to find a solution to the problem. I contacted ESRI and they let me know that a bug report already exists for the issue:

http://support.esri.com/en/bugs/nimbus/TklNMDg1NTgw

Here is the bug record

My current workaround is to display the attributes on the sidebar when a feature layer is clicked, and when a feature service is clicked, display the attribute inspector infowindow. You can see ESRI's sample code for displaying attributes in the sidebar here.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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