topic Re: How do I resolve the conflict of info Windows on multiple widgets? in ArcGIS JavaScript Maps SDK Questions

How do I resolve the conflict of info Windows on multiple widgets?

ChrisSergent — Thu, 18 Dec 2014 15:52:25 GMT

I have a geocode widget and the default editor widget. They both use infoWindows. When I do a search for an address, the goecode widget's infoWindow is retained. For example if I search for an address of 100 S Main and then I click on the editor widget, instead of the editor window displaying, the address that I just search for displays. The conflict is infoWindow. What do I need to do to my code to resolve this conflict?

Here are the two blocks of code for these widgets:

Editor-

// Starts initEditing after the feature layer(s) have been added

map.on("layers-add-result", initEditing);

// add imagery

var tiled = new ArgGISTiledMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Aerial_2014_Tiled/MapServer");

map.addLayer(tiled);

// add operational layer

var operationalLayer = new ArcGISDynamicMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Public/InternetVector/MapServer", {

"opacity": 0.5

});

map.addLayer(operationalLayer);

// add point feature layer for editing

var pointFeatureLayer = new FeatureLayer("http://maps.decaturil.gov/arcgis/rest/services/Test/FeatureServer/0", {

mode: FeatureLayer.MODE_ONDEMAND,

outFields: ["*"]

});

map.addLayers([pointFeatureLayer]);

// settings for the editor widget

function initEditing(event) {

// sizes the edit window

map.infoWindow.resize(400, 300);

var featureLayerInfos = arrayUtils.map(event.layers, function (layer) {

return {

"featureLayer": layer.layer

};

});

var settings = {

map: map,

layerInfos: featureLayerInfos,

toolbarVisible: true,

enableUndoRedo: true,

maxUndoOperations: 20

};

var params = {

settings: settings

};

var editorWidget = new Editor(params, 'editorDiv');

editorWidget.startup();

var options = { snapKey: keys.copyKey };

map.enableSnapping(options);

}

Geocode -

// begin geocoder

var geocoder = new Geocoder({

arcgisGeocoder: false,

geocoders: [{

url: "http://maps.decaturil.gov/arcgis/rest/services/Public/WebAddressLocator/GeocodeServer",

name: "Web Address Locator",

placeholder: "Find address",

outFields: "*"

}],

map: map,

autoComplete: true,

zoomScale: 600

}, dom.byId("search"));

geocoder.startup();

geocoder.on("select", showGeocodeLocation);

function showGeocodeLocation(evt) {

map.graphics.clear();

var point = evt.result.feature.geometry;

var symbol = new SimpleMarkerSymbol()

.setStyle("square")

.setColor([255, 0, 0, 0.5]);

var graphic = new Graphic(point, symbol);

map.graphics.add(graphic);

map.infoWindow.setTitle("Search Result");

map.infoWindow.setContent(evt.result.name);

map.infoWindow.show(evt.result.feature.geometry);

map.infoWindow.on('hide', function () {

map.graphics.clear();

map.infoWindow.clear();

});

}

// end geocoder

Re: How do I resolve the conflict of info Windows on multiple widgets?

williamcarr — Fri, 19 Dec 2014 15:21:39 GMT

Chris, Could you email me a copy of the rest of your code so I can get a better look at it?

Re: How do I resolve the conflict of info Windows on multiple widgets?

ChrisSergent — Fri, 19 Dec 2014 15:48:30 GMT

Here is the complete code. It looks like the map.infoWindow.setContent is the issue:

<!DOCTYPE html>

<html>

<head>

<title>Decatur GIS Editor Template</title>

<style>

html,

body,

#mapDiv {

padding: 0;

margin: 0;

height: 100%;

width:100%;

overflow:hidden;

}

#mailPane

{

width:240px;

position:absolute;

right:0%;

bottom:0%;

background-color:White;

border-color:Black;

z-index:50;

}

.soria .dijitTitlePaneTitle {

background: #fff;

font-weight:600;

border: none;

border-bottom:solid 1px #29201A;

border-top:solid 1px #29201A;

}

.soria .dijitTitlePaneTitleHover

{

background:#eee;

}

.soria .dijitTitlePaneTitleActive

{

background:#808775;

}

.soria .dijitTitlePaneContentOuter

{

border-right: none;

border-bottom: none;

border-left: none;

}

#titlePane

{

width:240px;

position:absolute;

left:30%;

bottom:0%;

background-color:White;

border-color:Black;

z-index:50;

}

.soria .dijitTitlePaneTitle {

background: #fff;

font-weight:600;

border: none;

border-bottom:solid 1px #29201A;

border-top:solid 1px #29201A;

}

.soria .dijitTitlePaneTitleHover

{

background:#eee;

}

.soria .dijitTitlePaneTitleActive

{

background:#808775;

}

.soria .dijitTitlePaneContentOuter

{

border-right: none;

border-bottom: none;

border-left: none;

}

#HomeButton {

position: absolute;

top: 95px;

left: 20px;

z-index: 50;

}

#LocateButton {

position: absolute;

top: 140px;

left: 20px;

z-index: 50;

}

#search {

display:block;

position:absolute;

z-index:3;

top:20px;

left:75px;

}

.esriScalebarLine, .esriScalebarMetricLine

{

border-color:White;

}

.esriScalebarLabel, .esriScalebarLineLabel,.esriScalebarSecondNumber, .esriScaleLabelDiv

{

text-shadow:-1px -1px 0 #fff,

1px -1px 0 #fff,

-1px 1px 0 #fff,

1px 1px 0 #fff;

}

/* Printer CSS Begin */

h3 {

margin: 0 0 5px 0;

border-bottom: 1px solid #444;

padding: 0 0 5px 0;

text-align: center;

}

.shadow {

-moz-box-shadow: 0 0 5px #888;

-webkit-box-shadow: 0 0 5px #888;

box-shadow: 0 0 5px #888;

}

#feedback {

background: #fff;

border: 2px solid #666;

border-radius: 5px;

bottom: 20px;

color: #666;

font-family: arial;

height: 300px;

left: 20px;

margin: 5px;

padding: 10px;

position: absolute;

width: 300px;

z-index: 40;

visibility: hidden;

}

#feedback a {

/*border-bottom: 1px solid #888;*/

color: #666;

text-decoration: none;

}

#feedback a:hover,

#feedback a:active,

#feedback a:visited {

border: none;

color: #666;

text-decoration: none;

}

#note {

padding: 0 0 10px 0;

}

#info,

#information {

padding: 10px 0 0 0;

}

#printer {

height: 20px;

width: 20px;

position: absolute;

top: 240px;

left: 20px;

z-index: 50;

padding: 5px 6px 5px 6px;

background-color: #f9f8f8;

border-radius: 5px;

visibility: hidden;

}

/* Printer CSS End */

/* Editor CSS Begin */

#editor

{

height:20px;

width:20px;

position:absolute;

top:285px;

left:20px;

z-index:50;

padding: 5px 6px 6px 6px;

background-color:#f9f8f8;

border-radius:5px;

visibility:hidden;

}

/* Editor CSS End */

/* Editor style begin */

#templatePickerPane {

width: 250px;

height:260px;

overflow: hidden;

z-index:50;

top:50%;

right:0%;

position:absolute;

}

#panelHeader

{

background-color: #92A661;

border-bottom: solid 1px #92A860;

color: #FFF;

font-size: 18px;

height: 50px;

line-height: 22px;

margin: 0;

overflow: hidden;

padding: 10px 10px 10px 10px;

}

#editorDiv

{

background-color:White;

padding:10px;

}

.esriEditor .templatePicker

{

padding-bottom: 5px;

padding-top: 5px;

height: 120px;

border-radius: 0px 0px 4px 4px;

border: solid 1px #92A661;

}

.dj_ie .infowindow .window .top .right .user .content, .dj_ie .simpleInfoWindow .content

{

position: relative;

}

/* Editor Style End */

#closeEditor

{

position:absolute;

right:5%;

}

#editor

{

height:20px;

width:20px;

position:absolute;

top:285px;

left:20px;

z-index:50;

padding: 5px 6px 6px 6px;

background-color:#f9f8f8;

border-radius:5px;

visibility:hidden;

}

#showTools {

height: 20px;

width: 20px;

position: absolute;

top: 200px;

left: 20px;

z-index: 50;

padding: 5px 6px 5px 6px;

background-color: #f9f8f8;

border-radius: 5px;

visibility: visible;

}

#hideTools {

height: 20px;

width: 20px;

position: absolute;

top: 200px;

left: 20px;

z-index: 50;

padding: 5px 6px 5px 6px;

background-color: #f9f8f8;

border-radius: 5px;

visibility: hidden;

}

</style>

var map;

var graphic;

var currLocation;

var watchId;

var pt;

var app = {};

require(["esri/map", "esri/config",

"esri/Color",

"esri/dijit/editing/Editor",

"esri/dijit/Geocoder",

"esri/dijit/HomeButton",

"esri/dijit/LocateButton",

"esri/dijit/Measurement",

"esri/dijit/OverviewMap",

"esri/dijit/Scalebar",

"esri/geometry/Extent",

"esri/geometry/Point",

"esri/geometry/screenUtils",

"esri/graphic",

"esri/layers/ArcGISTiledMapServiceLayer",

"esri/layers/ArcGISDynamicMapServiceLayer",

"esri/layers/FeatureLayer",

"esri/layers/LayerDrawingOptions",

"esri/renderers/SimpleRenderer",

"esri/SnappingManager",

"esri/sniff",

"esri/SpatialReference",

"esri/symbols/SimpleFillSymbol",

"esri/symbols/SimpleLineSymbol",

"esri/symbols/SimpleMarkerSymbol",

"esri/tasks/GeometryService",

"esri/tasks/PrintParameters",

"esri/tasks/PrintTask",

"esri/tasks/PrintTemplate",

"esri/tasks/ProjectParameters",

"esri/toolbars/draw",

"dojo/dom",

"dojo/keys",

"dojo/on",

"dojo/parser",

"dojo/query",

"dojo/_base/array",

"dojo/_base/Color",

"dojo/i18n!esri/nls/jsapi",

"dojo/dnd/Moveable",

"dijit/layout/BorderContainer",

"dijit/layout/ContentPane",

"dijit/TitlePane",

"dijit/form/CheckBox",

"dojo/domReady!"

], function (Map, esriConfig, Color, Editor, Geocoder,

HomeButton, LocateButton, Measurement, OverviewMap, Scalebar, Extent, Point, screenUtils, Graphic,

ArgGISTiledMapServiceLayer, ArcGISDynamicMapServiceLayer, FeatureLayer, LayerDrawingOptions, SimpleRenderer, SnappingManager, has,

SpatialReference, SimpleFillSymbol, SimpleLineSymbol, SimpleMarkerSymbol,

GeometryService, PrintParameters, PrintTask, PrintTemplate, ProjectParameters, Draw, dom, keys, on, parser, query, arrayUtils, Color, i18n, Moveable

) {

parser.parse();

//snapping is enabled for this sample - change the tooltip to reflect this

i18n.toolbars.draw.start += "<br/>Press <b>CTRL</b> to enable snapping";

i18n.toolbars.draw.addPoint += "<br/>Press <b>CTRL</b> to enable snapping";

/* The proxy comes before all references to web services */

/* Files required for security are proxy.config, web.config and proxy.ashx

- set security in Manager to Private, available to selected users and select Allow access to all users who are logged in

(Roles are not required)

The proxy section is defined on the ESRI sample. I have included it as

part of the documentation that reads that the measuring will not work.

I thought that might be important.

// Proxy Definition Begin

//identify proxy page to use if the toJson payload to the geometry service is greater than 2000 characters.

//If this null or not available the project and lengths operation will not work.

// Otherwise it will do a http post to the proxy.

esriConfig.defaults.io.proxyUrl = "proxy.ashx";

esriConfig.defaults.io.alwaysUseProxy = true;

// Proxy Definition End

// declare geometry service

esriConfig.defaults.geometryService = new GeometryService("http://maps.decaturil.gov/arcgis/rest/services/Utilities/Geometry/GeometryServer");

// set custom extent

var initialExtent = new Extent({

"xmin": 777229.03,

"ymin": 1133467.92,

"xmax": 848340.14,

"ymax": 1185634.58,

"spatialReference": {

"wkid": 3435

}

});

// create map and set slider style to small

map = new Map("mapDiv", {

showAttribution: false,

sliderStyle: "small",

extent: initialExtent,

logo: false

});

// Starts initEditing after the feature layer(s) have been added

map.on("layers-add-result", initEditing);

// add imagery

var tiled = new ArgGISTiledMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Aerial_2014_Tiled/MapServer");

map.addLayer(tiled);

// add operational layer

var operationalLayer = new ArcGISDynamicMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Public/InternetVector/MapServer", {

"opacity": 0.5

});

map.addLayer(operationalLayer);

// add point feature layer for editing

var pointFeatureLayer = new FeatureLayer("http://maps.decaturil.gov/arcgis/rest/services/Test/FeatureServer/0", {

mode: FeatureLayer.MODE_ONDEMAND,

outFields: ["*"]

});

map.addLayers([pointFeatureLayer]);

// settings for the editor widget

function initEditing(event) {

// sizes the edit window

map.infoWindow.resize(400, 300);

var featureLayerInfos = arrayUtils.map(event.layers, function (layer) {

return {

"featureLayer": layer.layer

};

});

var settings = {

map: map,

layerInfos: featureLayerInfos,

toolbarVisible: true,

enableUndoRedo: true,

maxUndoOperations: 20

};

var params = {

settings: settings

};

var editorWidget = new Editor(params, 'editorDiv');

editorWidget.startup();

var options = { snapKey: keys.copyKey };

map.enableSnapping(options);

}

// Allow editor to move with mouse or finger

jQuery(function () {

jQuery("#templatePickerPane").draggable({ containment: "window" });

});

// Allow print widget to move with mouse or finger

jQuery(function () {

jQuery("#feedback").draggable({ containment: "window" });

});

// Hide editor

on(dom.byId("closeEditor"), "click", function () {

document.getElementById("templatePickerPane").style.visibility = 'hidden';

});

// Show Editor

on(dom.byId("showEditorWidget"), "click", function () {

document.getElementById("templatePickerPane").style.visibility = 'visible';

});

// begin print Task

app.printUrl = "http://maps.decaturil.gov/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task";

function createPrintTask(printTitle) {

var template = new PrintTemplate();

template.layout = document.getElementById("printLayoutId").value;

template.label = "Landscape (PDF)";

template.format = document.getElementById("printFormatId").value;

template.layoutOptions = {

legendLayers: [], // empty array means no legend

scalebarUnit: "Miles",

titleText: printTitle

};

var params = new PrintParameters();

params.map = map;

params.template = template;

var printTask = new PrintTask(app.printUrl);

var printObj = {

printTask: printTask,

params: params

}

return printObj;

}

// end of print task

// Activates printer

on(dom.byId("btnPrintReady"), "click", function () {

document.getElementById("btnPrintReady").innerHTML = "Printing..."

document.getElementById("btnPrintReady").disabled = true;

var printObj = createPrintTask(document.getElementById("printTitleId").value);

var printTask = printObj.printTask;

printTask.execute(printObj.params, function (evt) {

document.getElementById("btnPrintReady").style.display = 'none';

document.getElementById("printResult").href = evt.url;

document.getElementById("printResult").style.display = 'block';

on(dom.byId("printResult"), "click", function () {

document.getElementById("btnPrintReady").innerHTML = "Print";

document.getElementById("btnPrintReady").style.display = 'block';

document.getElementById("btnPrintReady").disabled = false;

document.getElementById("printResult").style.display = 'none';

});

}, function (evt) {

document.getElementById("btnPrintReady").disabled = false;

document.getElementById("btnPrintReady").innerHTML = "Print";

});

// Hides print widget

on(dom.byId("closePrint"), "click", function () {

document.getElementById("feedback").style.visibility = 'hidden';

});

// Shows tools

on(dom.byId("showTools"), "click", function () {

document.getElementById("showToolsButton").style.visibility = 'hidden';

document.getElementById("hideToolsButton").style.visibility = 'visible';

document.getElementById("printer").style.visibility = 'visible';

document.getElementById("editor").style.visibility = 'visible';

});

// Hide tools

on(dom.byId("hideTools"), "click", function () {

document.getElementById("showToolsButton").style.visibility = 'visible';

document.getElementById("hideToolsButton").style.visibility = 'hidden';

document.getElementById("printer").style.visibility = 'hidden';

document.getElementById("feedback").style.visibility = 'hidden';

document.getElementById("editor").style.visibility = 'hidden';

});

// Show print widget

on(dom.byId("showPrintWidget"), "click", function () {

document.getElementById("feedback").style.visibility = 'visible';

});

// begin geocoder

var geocoder = new Geocoder({

arcgisGeocoder: false,

geocoders: [{

url: "http://maps.decaturil.gov/arcgis/rest/services/Public/WebAddressLocator/GeocodeServer",

name: "Web Address Locator",

placeholder: "Find address",

outFields: "*"

}],

map: map,

autoComplete: true,

zoomScale: 600

}, dom.byId("search"));

geocoder.startup();

geocoder.on("select", showGeocodeLocation);

function showGeocodeLocation(evt) {

map.graphics.clear();

var point = evt.result.feature.geometry;

var symbol = new SimpleMarkerSymbol()

.setStyle("square")

.setColor([255, 0, 0, 0.5]);

var graphic = new Graphic(point, symbol);

map.graphics.add(graphic);

//map.infoWindow.setTitle("Search Result" + "<br /><hr>" + evt.result.name);

map.infoWindow.setContent(evt.result.name);

map.infoWindow.show(evt.result.feature.geometry);

map.infoWindow.on('hide', function () {

map.graphics.clear();

});

}

// end geocoder

// add home button to get full extent begin

var home = new HomeButton({

map: map,

useTracking: false

}, "HomeButton");

home.startup();

// add home button to get full extent end

// add overview map begin

var overviewMapDijit = new OverviewMap({

map: map,

visible: false

});

overviewMapDijit.startup();

// add overview end

// scalebar begin

var scalebar = new Scalebar({

map: map,

scalebarUnit: "dual"

});

// scalebar end

// start measurement tool - the current layer we are measuring is the operational layer

var layerDrawingOptions = [];

var layerDrawingOption = new LayerDrawingOptions();

var sfs = new SimpleFillSymbol(

"solid",

new SimpleLineSymbol("solid", new Color([195, 176, 23]), 2),

null

);

layerDrawingOption.renderer = new SimpleRenderer(sfs);

// change 1 to the layer index that you want to modify:

layerDrawingOptions[1] = layerDrawingOption;

//dojo.keys.copyKey maps to CTRL on windows and Cmd on Mac., but has wrong code for Chrome on Mac

var snapManager = map.enableSnapping({

snapKey: has("mac") ? keys.META : keys.CTRL

});

var layerInfos = [{

layer: operationalLayer

}];

snapManager.setLayerInfos(layerInfos);

var measurement = new Measurement({

map: map

}, dom.byId("measurementDiv"));

measurement.startup();

// end measurement tool

// Begin geolocate button

// add geolocate button to find the location of the current user

map.on("load", function () {

geoLocate = new LocateButton({

map: map,

highlightLocation: true,

useTracking: true,

enableHighAccuracy: true

}, "LocateButton");

geoLocate.clearOnTrackingStop = true;

geoLocate.startup();

geoLocate.locate();

});

// End geolocate button

});

</script>

</head>

</div>

</div>

</div>

</div>

<h3>City of Decatur Print Service</h3>

<div id="note">Note: Select the format that you would like to print your map from the dropdowns below.</div>

<label id="lblPrintTitle">Enter a print title</label>

<br />

<br />

<option value="A3 Landscape">A3 Landscape</option>

<option value="A3 Portrait">A3 Portrait</option>

<option value="A4 Landscape">A4 Landscape</option>

<option value="A4 Portrait">A4 Portrait</option>

<option value="Letter ANSI A Landscape" selected>Letter ANSI A Landscape</option>

<option value="Letter ANSI A Portrait">Letter ANSI A Portrait</option>

<option value="Tabloid ANSI B Landscape">Tabloid ANSI B Landscape</option>

<option value="Tabloid ANSI B Portrait">Tabloid ANSI B Portrait</option>

</select>

</select>

<br />

<button type="button" id="btnPrintReady">Print</button>

<a href="#" id="printResult" target="_blank" style="display:none;">Get Printout</a>

<div id="info">This print service is to be used for City business only.

</div>

</form>

<span style="font-size:smaller;padding:5px 5px;">Press <b>CTRL</b> to enable snapping.</span>

</div>

<p>Send mail to: We'll tell you later.</p>

</div>

<! -- Map End -->

<p>Default Editor <input type="image" id="closeEditor" src="images/close.ico" alt="Close Editor" title="Close Editor" /></p>

</div>

</div>

</body>

</html>

Re: How do I resolve the conflict of info Windows on multiple widgets?

williamcarr — Fri, 19 Dec 2014 18:58:11 GMT

Ironically enough, we are both battling the same concept at the same time. I'm attempting to toggle between info window and the attribute inspector. It looks like you are trying to get address information in the info window, or search results?

This thread ended up working(for the most part, I'm having trouble getting an array in my initSelectToolbar to work). Re: Overriding a feature's infoTemplate using map.infoWindow.setContent() The JSFiddle at the end has a working example.

Good Luck

Re: How do I resolve the conflict of info Windows on multiple widgets?

KellyHutchins — Fri, 19 Dec 2014 21:37:53 GMT

Chris and William

The trick to getting the editor's attribute inspector to play nicely with all the other info windows is to destroy and re-create the editor. I know that sounds like a drastic solution but here's an example showing this in action. In the code below when the info window associated with the geocode result is closed we destroy and re-create the editor - note when running the sample you won't notice that the editor is destroyed but your info windows should work correctly.

Decatur GIS Editor Template

Chris - in your code you have a proxy setup, which is good, but you've also specified that alwaysUseProxy is true. This means that all requests are routed through the proxy which is (most likely) not what you want to happen. Is the proxy setup in your app to handle editing? If so you might want to modify your app to use a proxy rule instead that points to just the editable layer.

Re: How do I resolve the conflict of info Windows on multiple widgets?

ChrisSergent — Fri, 19 Dec 2014 23:24:43 GMT

I added the proxy because I thought that I saw the measure widget required a proxy. I can set that to false. Thanks.

Re: How do I resolve the conflict of info Windows on multiple widgets?

williamcarr — Mon, 22 Dec 2014 19:40:31 GMT

Kelly,

Using this example Edit fiddle - JSFiddle , I've set up a toggle to go between charts in infoWIndows to attribute inspector. For some reason it is claiming my (evt) is undefined. Is it an issue with having multiple layers in the attribute inspector?

Appreciate the help.

map.on("click",function()

{

var option= registry.byId("selectfield");

var optionValue = option.value;

if (optionValue == "ON"){console.log("adfasdfasdf");

beacon1.setInfoTemplate();

initSelectToolbar();

}

else { beacon1.setInfoTemplate(popupTemplate1);}

}

)

function initSelectToolbar(evt) {

var asdf = evt.layers[0].layer;

var selectQuery = new Query();

map.on("click", function(evt) {

var selectionQuery = new esri.tasks.Query();

var tol = map.extent.getWidth()/map.width * 15;

var x = evt.mapPoint.x;

var y = evt.mapPoint.y;

var queryExtent = new esri.geometry.Extent(x-tol,y-tol,x+tol,y+tol,evt.mapPoint.spatialReference);

selectionQuery.geometry = queryExtent;

asdf.selectFeatures(selectionQuery, FeatureLayer.SELECTION_NEW, function(features) {

//store the current feature

updateFeature = features[0]; console.log("adf");

map.infoWindow.setTitle(features[0].getLayer().name); console.log("adf");

map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint)); console.log("adf");

Re: How do I resolve the conflict of info Windows on multiple widgets?

KellyHutchins — Mon, 22 Dec 2014 20:43:39 GMT

William,

I ran a quick test with your code and I don't see any errors in the console where evt is undefined. Which line is failing?

Re: How do I resolve the conflict of info Windows on multiple widgets?

williamcarr — Mon, 22 Dec 2014 20:51:37 GMT

var asdf = evt.layers[0].layer;

Re: How do I resolve the conflict of info Windows on multiple widgets?

ChrisSergent — Mon, 22 Dec 2014 20:53:25 GMT

Kelly,

I tried to integrate the code into my main application and the title bar does not display when I geocode an address and the content does not display for the editor widget. Did I miss something when I attempted to combine the code?

I uploaded my project on dropbox so you would get the related files- Dropbox - decaturGisEditor.zip

Chris

Re: How do I resolve the conflict of info Windows on multiple widgets?

KellyHutchins — Mon, 22 Dec 2014 20:58:00 GMT

Chris,

There may be errors in your version due to the code modifications. Try running the app and use the developer tools available in Chrome or Firefox to see if there are any errors written to the console. The developer tools will also allow you to step through the code to find the problem.

Re: How do I resolve the conflict of info Windows on multiple widgets?

KellyHutchins — Mon, 22 Dec 2014 21:01:15 GMT

The JSFiddle you linked to does not have the line var asdf = evt.layers[0].layer in the code. Perhaps you sent the wrong fiddle?

Re: How do I resolve the conflict of info Windows on multiple widgets?

ChrisSergent — Mon, 22 Dec 2014 21:02:48 GMT

I ran it in Chrome and the console displays no errors or warnings.

Re: How do I resolve the conflict of info Windows on multiple widgets?

KellyHutchins — Mon, 22 Dec 2014 21:16:34 GMT

Ok so you are missing a few things in your version of the code. In the revised code the editor is created and placed using the create and place methods from dojo/dom-construct. So you'll need to load this module in the requires section.

The code also checks to see if the Editor widget is already created by checking a global variable called editorWidget. In your code you use that value but never declare it with var. Try adding it as a variable around line 326 with your other globals. For example you'd add var editorWidget = null;

To find this type of error I'll typically set a breakpoint in my code just before the area I suspect is the problem then I step through the code line by line to check variable values, look for undefined things etc.

Re: How do I resolve the conflict of info Windows on multiple widgets?

ChrisSergent — Mon, 22 Dec 2014 21:38:04 GMT

Kelly,

Everything is working and ready to be rolled into my secure app.

Thanks again.

Re: How do I resolve the conflict of info Windows on multiple widgets?

ChrisSergent — Mon, 22 Dec 2014 22:46:33 GMT

William,

Just a side note. We have a power user group(we have a couple of programmers) we started in my area; saw you were from Illinois too. If you are interested, follow me and I will send you my contact info.

Chris

Re: How do I resolve the conflict of info Windows on multiple widgets?

williamcarr — Tue, 23 Dec 2014 13:05:29 GMT

oh yes, sorry. In the code I replaced the:

function initSelectToolbar(layer) {

var petroFieldsFL = layer;

petroFieldsFL.setInfoTemplate();

var selectQuery = new Query();

map.on("click", function (evt) {

selectQuery.geometry = evt.mapPoint;

petroFieldsFL.selectFeatures(selectQuery, FeatureLayer.SELECTION_NEW, function (features) {

if (features.length > 0) {

//store the current feature

updateFeature = features[0];

map.infoWindow.setTitle(features[0].getLayer().name);

map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));

} else {

map.infoWindow.hide();

}

});

map.infoWindow.on("hide", function () {

petroFieldsFL.clearSelection();

});

With:

function initSelectToolbar(evt) {

var asdf = evt.layers[0].layer;

asdf.setInfoTemplate();

var selectQuery = new Query();

map.on("click", function(evt) {

var selectionQuery = new esri.tasks.Query();

var tol = map.extent.getWidth()/map.width * 15;

var x = evt.mapPoint.x;

var y = evt.mapPoint.y;

var queryExtent = new esri.geometry.Extent(x-tol,y-tol,x+tol,y+tol,evt.mapPoint.spatialReference);

selectionQuery.geometry = queryExtent;

asdf.selectFeatures(selectionQuery, FeatureLayer.SELECTION_NEW, function(features) {

//store the current feature

updateFeature = features[0]; console.log("adf");

map.infoWindow.setTitle(features[0].getLayer().name); console.log("adf");

map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint)); console.log("adf");

});

In order to accommodate multiple feature point and line feature layers. My personal project, along with the fiddle(with the changes) throws the TypeError: evt.layers is undefined..

Re: How do I resolve the conflict of info Windows on multiple widgets?

KellyHutchins — Tue, 23 Dec 2014 17:29:35 GMT

How are you calling the initSelectToolbar function? In the fiddle you sent it looks like you are doing so when the edit pane is clicked. In that example you are calling initSelectToolbar(petroFieldsLayer) which means that in initSelectToolbar you'll have access to the layer but its not var asdf = evt.layers[0].layer;

Have you made additional modifications to the code?

Re: How do I resolve the conflict of info Windows on multiple widgets?

williamcarr — Tue, 23 Dec 2014 18:56:32 GMT

Getting the initSelectToobar function to run is the issue. I can access single layers by calling them individually, and then go from attribute inspector to popup template without issue, but i have 5 other layers in my app that don't require the popup template. The fiddle works when intiSelectToolbar(petroFieldsLayer) is called.. But any attempts at loading an array of layers(and there has been many attempts) for the attribute inspector have failed. I'm not sure what to try next.

Re: How do I resolve the conflict of info Windows on multiple widgets?

KellyHutchins — Tue, 23 Dec 2014 19:00:29 GMT

William

Can you send a working code sample showing what you are trying? Might be easier to do so in a new thread because this one is getting kind of confusing since there are two similar (but not the same) questions and users who find this thread later may be confused.

Kelly