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

ChrisSergent · ‎12-18-2014

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

KellyHutchins · ‎12-19-2014

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.

View solution in original post

williamcarr · ‎12-19-2014

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

ChrisSergent · ‎12-19-2014

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%2...";

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>

williamcarr · ‎12-19-2014

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

KellyHutchins · ‎12-19-2014

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.

ChrisSergent · ‎12-19-2014

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

williamcarr · ‎12-22-2014

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

KellyHutchins · ‎12-22-2014

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?

williamcarr · ‎12-22-2014

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

KellyHutchins · ‎12-22-2014

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?