Custom infoTemplate conflicts with default editor widget infoTemplate

4744
11
04-26-2012 01:20 PM
JayGregory
New Contributor III
Can anyone get this code to work?  I feel like it should be incredibly straightforward, but I can't seem to get an infoTemplate for feature layer play well with the default editor's infoTemplate on editable layers. 
To reproduce:
Zoom out, and click on large green square icon, which should bring up an infoWindow for that USGS steam flow station.  Now click on one of the dots, which should normally bring up an editor infoWindow, but instead brings up the content from the stream flow station. 
If you refresh the page and click on an editable dot first, the infoWindow has the correct content, but as soon as you click on a stream flow station, the infoWindow for the editable feature layers will forever be overwritten with the steam flow station's infoWindow.  I would love some help on this!
Thanks!
<!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");
  dojo.require("esri.dijit.Popup");


        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
            });
            
   //Try to create a new template to pass to a non-editable feature layer
   //template = new esri.dijit.Popup(null, dojo.create("div"));
   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>
0 Kudos
11 Replies
derekswingley1
Frequent Contributor
I'm looking into this...I'll post here when I have more info.
0 Kudos
JayGregory
New Contributor III
Thanks Derek! Looking forward to seeing if have both infoTemplates on the same map is a simple fix. 
Jay
0 Kudos
JayGregory
New Contributor III
The only way I was able to fix this was using the attributeInspector instead of the default editor.  It took some extra coding to essentially achieve the same behaviour as the default editor, but your examples as always helped me along.  It seems like it would be nice to access the default editor's attributeInspector to modifying some default behaviour.  The simple case of having one custom infoWindow for a non-editable layer and one default editor infoWindow for an editable layer on the same map shouldn't warrant so much extra code.  Maybe in a later api release? 
Thanks!

Jay
ArthurFisher
New Contributor
Hi Jay,

I am running into the same problem where my custom infoWindow overwrites the editor window after clicking a feature in another layer. Would you mind sharing your code for how you got the attribute inspector to achieve the same behavior as the editor? Thanks!

Arthur
0 Kudos
JayGregory
New Contributor III
Arthur - I apologize - I am just now seeing this.  Have you had any luck yet getting this to work?
Jay
0 Kudos
danbecker
Occasional Contributor III
exact same problem, anyone else have this issue?
0 Kudos
by Anonymous User
Not applicable
Bump, has anyone found a resolution to this issue?
0 Kudos
XuejinRuan
New Contributor III
Same issue here. Can't switch between custom info Template and the default editor widget infoTemplate. Any ideas how to get around this?

Thanks, Xuejin
0 Kudos
abdelabdel
New Contributor II

Hi everyone,

I have a similar problem.In fact, I added the editor widget for edit a feature layer to my web application that uses a infotemplate for displaying information of the same feature layer. Before adding the editor widget the popup template works properly. When the editor was added the template doesn’t work and the editor template displays "not information available" after add a feature. When I deactivate the template for the feature the editor works properly.

Do you have any idea for resolving this ?

Thank you.

0 Kudos