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;
<!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>
template = new esri.InfoTemplate(); template.setTitle('<div>thang</div>'); template.setContent('<div id="infoWindowContents"></div>');
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.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)); }
<!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>
Jeremiah,
I have exactly the same problem. Were you able to find a solution to the problem?
Thank you
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
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.