POST
|
Hi - I have a fairly simple function that uses the attributeInspector to populate and infoWindow. It works GREAT in Mozilla and Chome. But nothing in IE. The infoWindow is just empty - there is nothing there except the infoWindow's title. Any suggestions? function roadObstructionsPopup(evt) {
var graphic = evt.graphic;
var geom = graphic.geometry;
hideAll();
var lyInfos = [{
'featureLayer' : roadObstructionsLayer,
'showAttachments' : true,
'isEditable' : true,
'fieldInfos' : [{
'fieldName' : 'DESCRIPTION',
'isEditable' : true,
'tooltip' : 'Short Description',
'label' : 'Description:'
}, {
'fieldName' : 'DATE_REPORTED',
'isEditable' : true,
'tooltip' : 'Report Date',
'label' : 'Date'
}, {
'fieldName' : 'STATUS',
'isEditable' : true,
'label' : 'Status:'
}
]
}
];
try {
attInspector = new esri.dijit.AttributeInspector({
layerInfos : lyInfos
}, "infoWindowContents");
var saveButton = new dijit.form.Button({
label : "Save",
"class" : "saveButton"
});
dojo.place(saveButton.domNode, attInspector.deleteBtn.domNode, "after");
dojo.connect(saveButton, "onClick", function () {
updateFeature.getLayer().applyEdits(null, [updateFeature], null, function(results){$('#alert').jGrowl("Road obstruction saved");
map.infoWindow.hide();}, function (error) {
$('#alert').jGrowl("Could not save obstruction due to " + error.message, {
header : 'Error'
});
});
map.infoWindow.hide();
});
dojo.connect(attInspector, "onAttributeChange", function (feature, fieldName, newFieldValue) {
//store the updates to apply when the save button is clicked
updateFeature.attributes[fieldName] = newFieldValue;
});
dojo.connect(attInspector, "onNext", function (feature) {
updateFeature = feature;
});
dojo.connect(attInspector, "onDelete", function (feature) {
feature.getLayer().applyEdits(null, null, [feature], function(results){
roadObstructionsLayer.refresh();
$('#alert').jGrowl("Sucessfully deleted road obstruction");
}, function (error) {
$('#alert').jGrowl("Could not delete road obstructions due to " + error.message, {
header : 'Error'
});
});
map.infoWindow.hide();
});
var tolerance = 5;
var pxWidth = map.extent.getWidth() / map.width;
var padding = tolerance * pxWidth + 60;
var selectQuerygeometry = new esri.geometry.Extent({
'xmin' : geom.x - padding,
'ymin' : geom.y - padding,
'xmax' : geom.x + padding,
'ymax' : geom.y + padding,
'spatialReference' : map.spatialReference
});
selectQuery.geometry = selectQuerygeometry;
roadObstructionsLayer.selectFeatures(selectQuery, esri.layers.FeatureLayer.SELECTION_NEW, function (features) {
if (features.length > 0) {
console.log(attInspector.domNode);
updateFeature = features[0];
map.infoWindow.setTitle("Edit Window");
map.infoWindow.setContent(attInspector.domNode);
//dojo.byId('infoWindowContents').innerHTML = attInspector.domNode;
map.infoWindow.resize(300, 400);
console.log(features[0]);
esri.show(dojo.byId("infoWindowContents"));
//var screenPoint = geom.screenPoint;
map.infoWindow.show(evt.graphic.geometry);
} else {
map.infoWindow.hide();
}
});
} catch (error) {
dijit.byId("infoWindowContents").destroy();
roadObstructionsPopup(evt);
}
}
... View more
05-13-2012
05:39 AM
|
0
|
4
|
850
|
POST
|
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
... View more
05-08-2012
07:55 AM
|
1
|
0
|
943
|
POST
|
I've constructed a query task that returns the number of points in a polygon. This query task works perfectly if the query is against an internal map service (map service on the same arcgis server as the proxy). However, if I set the query task to an external map service: queryTaskWithin = new esri.tasks.QueryTask("http://rmgsc.cr.usgs.gov/ArcGIS/rest/services/nhss_haz/MapServer/0"); but change nothing else about the query or query task, it fails with the following error: Error: Unable to load /proxy/proxy.ashx?http://rmgsc.cr.usgs.gov/ArcGIS/rest/services/nhss_haz/MapServer/0/query status:403 My proxy config shouldn't be the problem because - as I am on a test server, I've made it wide open, by setting ProxyConfig mustMatch="false". I didn't even need to include my internal map service in the proxy.config, and the query worked fine for that. Any ideas what could be going on? Thanks, Jay
... View more
05-06-2012
11:17 AM
|
0
|
2
|
2280
|
POST
|
So I figured out how to do this - in case anyone wants to know. It's pretty straightforward - 1. Create a placeholder for the button in the content of the infoWindow. content += '<div align="center"> <button id = "addTweetButton" type="button"></button></div>' 2. Add a button to the placeholder by referencing the id. var button = new dijit.form.Button({ label: "Add to Database", onClick: function(){ addTwitterToDatabase(graphic); } }, "addTweetButton"); Here is the full code - worked like a charm! function twitterPopup(evt){ hideAll(); graphic = evt.graphic; var attr = graphic.attributes; var newDate = (attr.created_at).replace('+0000', 'UTC'); var content = ''; if (attr.profile_image_url) { content = '<a class="twImage" href="http://twitter.com/' + attr.from_user + '" target="_blank"><img class="shadow" src="' + attr.profile_image_url + '" width="48" height="48"></a>'; } content += '<p>' + replaceURLWithLinks(attr.text) + '</p>'; content += '<div class="clear"></div><ul class="iwContentList"><li><b>Location:</b> (' + attr.geo.coordinates + ')</li><li><b>Created:</b> ' + newDate + '</li></ul></div><br/>'; content += '<div align="center"> <button id = "addTweetButton" type="button"></button></div>' var title = attr.from_user + " tweets…"; map.infoWindow.resize(300,230); map.infoWindow.setTitle(title); dojo.byId('infoWindowContents').innerHTML = content; /*Open all links in a new window*/ $('#infoWindowContents a').each( function() { $(this).attr('target', '_BLANK'); }); esri.show(dojo.byId("infoWindowContents")); var screenPoint = evt.screenPoint; map.infoWindow.show(evt.graphic.geometry, map.getInfoWindowAnchor(screenPoint)); var button = new dijit.form.Button({ label: "Add to Database", onClick: function(){ addTwitterToDatabase(graphic); } }, "addTweetButton"); }
... View more
05-06-2012
07:28 AM
|
0
|
0
|
423
|
POST
|
I'm trying to add a button to an infoWindow - when the button is clicked, it should pass the graphic to the supporting function. Everything works but the graphic isn't passed... function twitterPopup(evt){ var graphic = evt.graphic; var attr = graphic.attributes; var newDate = (attr.created_at).replace('+0000', 'UTC'); var content = ''; if (attr.profile_image_url) { content = '<a class="twImage" href="http://twitter.com/' + attr.from_user + '" target="_blank"><img class="shadow" src="' + attr.profile_image_url + '" width="48" height="48"></a>'; } content += '<p>' + replaceURLWithLinks(attr.text) + '</p>'; content += '<div class="clear"></div><ul class="iwContentList"><li><b>Location:</b> (' + attr.geo.coordinates + ')</li><li><b>Created:</b> ' + newDate + '</li></ul></div><br/>'; content += '<div align="center"> <input value="Add to Database" id = "add" type="button" onClick="addTwitterToDatabase(this.graphic)"></input></div>' var title = attr.from_user + " tweets…"; map.infoWindow.resize(300,230); map.infoWindow.setTitle(title); dojo.byId('infoWindowContents').innerHTML = content; $('#infoWindowContents a').each( function() { $(this).attr('target', '_BLANK'); }); esri.show(dojo.byId("infoWindowContents")); var screenPoint = evt.screenPoint; map.infoWindow.show(evt.graphic.geometry, map.getInfoWindowAnchor(screenPoint)); } Does anyone have any suggestions? I've tried passing graphic, and this.graphic, but the passed parameter remained undefined in the addTwitterToDatabase function. As it the function isn't passing anything at all.... Thanks, Jay
... View more
05-05-2012
08:56 AM
|
0
|
1
|
2803
|
POST
|
Hi, I'm experiencing some problems with my map, and think it may have to go with spatial references and coordinate systems, and would love some clarification on how these work with maps, feature layers, and mouse events, etc. I essentially copied the sample code from http://help.arcgis.com/en/webapi/javascript/arcgis/demos/ed/ed_attribute_inspector.html, only replacing the map service URLs, the initial extent and spatial reference, and the field infos for the popup. The listener is supposed to detect a mouse click on a road obstructions graphic, and display a infoWindow with the appropriate fields. I'm not interested in necessarily getting the infoWindow to display, but the service can't event detect that I clicked on a road obstruction graphic (see line 113 that logs some text to the console if a feature was found)? The spatial reference of my map, map service, and layers are all 102113 (Web Mercator). My data is in an ArcSDE feature dataset, also with a Web Mercator coordinate system. So when I click on the map, why doesn't it detect that I have clicked on a the graphic that is so clearly displayed on that map? You can reproduce with my code here... <!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" /> <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices--> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/> <title>Editable FeatureLayer in Selection Only Mode with Attribute Inspector</title> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css"> <style> html, body { height: 98%; width: 98%; padding: 0; overflow:hidden; } #mapDiv{ padding:0; border: solid 2px #705B35; } .roundedCorners { -moz-border-radius: 4px; border-radius: 4px; } #detailPane{ height:20px; color:#570026; font-size:12pt; font-weight:600; overflow:hidden; } .dj_ie .infowindow .window .top .right .user .content { position: relative; } .dj_ie .simpleInfoWindow .content {position: relative;} .esriAttributeInspector {height:100px;} .esriAttributeInspector .atiLayerName {display:none;} .saveButton { padding-left:45px; margin:0px;width:16px; height:16px; } </style> <script type="text/javascript">var dojoConfig = {parseOnLoad: true};</script> <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"></script> <script type="text/javascript" language="Javascript"> dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); dojo.require("esri.map"); dojo.require("esri.dijit.AttributeInspector-all"); var map; var updateFeature; function init() { //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 = "/arcgisserver/apis/javascript/proxy/proxy.ashx"; var initialExtent = new esri.geometry.Extent({"xmin":-8584936.075899996,"ymin":4691869.096699994,"xmax":-8561487.160099998,"ymax":4721092.926799998,"spatialReference":{"wkid":102113}}); map = new esri.Map("mapDiv", {extent:initialExtent, spatialReference:{"wkid":102113}}); dojo.connect(map, "onLoad", function() { //resize the map when the browser resizes dojo.connect(dijit.byId('mapDiv'), 'resize', map,map.resize); }); dojo.connect(map, "onLayersAddResult", initSelectToolbar); var tiledLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"); map.addLayer(tiledLayer); var editable = new esri.layers.ArcGISDynamicMapServiceLayer("http://129.2.24.163/ArcGIS/rest/services/Capstone_Projects/JayGregEdit/MapServer"); editable.setDisableClientCaching(true); map.addLayer(editable); var roadObs = new esri.layers.FeatureLayer("http://129.2.24.163/ArcGIS/rest/services/Capstone_Projects/JayGregEdit/FeatureServer/1", { mode: esri.layers.FeatureLayer.MODE_SELECTION, outFields: ["*"] }); var selectionSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_NULL, new esri.symbol.SimpleLineSymbol("dashdot", new dojo.Color("yellow"), 2),null); roadObs.setSelectionSymbol(selectionSymbol); dojo.connect(roadObs, "onEditsComplete", function() { petroFieldsMSL.refresh(); }); map.addLayers([roadObs]); } function initSelectToolbar(results) { var roadObs = results[0].layer; var selectQuery = new esri.tasks.Query(); dojo.connect(map, "onClick", function(evt) { selectQuery.geometry = evt.mapPoint; roadObs.selectFeatures(selectQuery, esri.layers.FeatureLayer.SELECTION_NEW, function(features) { if (features.length > 0) { console.log("found"); //store the current feature updateFeature = features[0]; map.infoWindow.setTitle(features[0].getLayer().name); map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint)); } else { console.log("nothing found"); map.infoWindow.hide(); } }); }); dojo.connect(map.infoWindow, "onHide", function() { roadObs.clearSelection(); }); var layerInfos = [{'featureLayer':roadObs, 'showAttachments':false, 'isEditable': true, 'fieldInfos': [ {'fieldName': 'DESCRIPTION', 'isEditable':true, 'tooltip': 'Short Description', 'label':'Description:'}, {'fieldName': 'DATE_REPORTED', 'isEditable':true, 'tooltip': 'Report Date', 'label':'Date'}, {'fieldName': 'STATUS', 'isEditable':true,'label':'Status:'} ]}]; var attInspector = new esri.dijit.AttributeInspector({ layerInfos:layerInfos }, dojo.create("div") ); //add a save button next to the delete button var saveButton = new dijit.form.Button({label:"Save","class":"saveButton"}); dojo.place(saveButton.domNode, attInspector.deleteBtn.domNode, "after"); dojo.connect(saveButton,"onClick",function(){ updateFeature.getLayer().applyEdits(null, [updateFeature], null); }); dojo.connect(attInspector, "onAttributeChange", function(feature,fieldName,newFieldValue) { //store the updates to apply when the save button is clicked updateFeature.attributes[fieldName] = newFieldValue; }); dojo.connect(attInspector,"onNext",function(feature){ updateFeature = feature; console.log("Next " + updateFeature.attributes.objectid); }); dojo.connect(attInspector, "onDelete",function(feature){ feature.getLayer().applyEdits(null,null,[feature]); map.infoWindow.hide(); }); map.infoWindow.setContent(attInspector.domNode); map.infoWindow.resize(325,210); } dojo.addOnLoad(init); </script> </head> <body class="claro"> <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width:100%;height:100%;"> <div id="detailPane" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'"> Click a field to display the attribute inspector with customized fields. </div> <div data-dojo-type="dijit.layout.ContentPane" class="roundedCorners" data-dojo-props="region:'center'" id="mapDiv"></div> </div> </body> </html> Thanks for any help you can offer. Jay
... View more
05-04-2012
05:32 AM
|
0
|
2
|
820
|
POST
|
Thanks Derek! Looking forward to seeing if have both infoTemplates on the same map is a simple fix. Jay
... View more
04-30-2012
08:51 AM
|
0
|
0
|
943
|
POST
|
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>
... View more
04-26-2012
01:20 PM
|
0
|
11
|
5091
|
POST
|
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)
... View more
04-24-2012
06:29 PM
|
0
|
0
|
777
|
POST
|
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
... View more
04-24-2012
12:55 PM
|
0
|
0
|
777
|
POST
|
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
... View more
04-24-2012
12:21 PM
|
1
|
7
|
5169
|
POST
|
Thanks all - that worked. I just wasn't sure what parameters were required for the query to work.
... View more
04-24-2012
08:26 AM
|
0
|
0
|
456
|
POST
|
I'm pretty new to the REST API (having played around with the JavaScript API a good bit though) - I'm curious what are the constraints on varies queries... For instance, if I want the json returned for an entire map service layer http://win-2rninrlf7l8/ArcGIS/rest/services/FSDO_NoSDE/MapServer/0/query?f=json doesn't seem to work. I have to include a WHERE parameter to narrow the search. When I try to return _everything_ I get an error that says... "where' parameter not specified","'objectIds' parameter not specified","'time' parameter not specified","'geometry' parameter not specified","'text' parameter not specified" Are the above parameters necessary to narrow the number of results that could potentially be returned? Is there any way to just return _all_ of the features + geometry in a map service layer? Thanks for your help!
... View more
04-24-2012
07:02 AM
|
0
|
3
|
780
|
POST
|
So I've checked the spatial reference of the queryTask (the one I set equal to map.spatialReference) - it's 102100. And then, as soon as the query runs, I check the spatial reference of the feature set it returns, using the following code: function queryResults(featureSet){
console.log(esri.geometry.webMercatorToGeographic(featureSet.features[0].geometry));
console.log(featureSet.features[0].geometry); The first console log has a spatial reference of 4236, and the second has one of 3857. Yet still the geometry when I use either one (webMercatorToGeographic or original featureSet returned) is wrong, and pans to a location as if it has no projection at all. Thanks for your assistance.... Jay Jay what's the spatialReference of map? you have set in query map.spatialReference but the map.spatialReference can be <> from spatialReference of your service if you have load in map how first layer (service) another service with spatial reference <> your service.
... View more
04-17-2012
06:07 PM
|
0
|
0
|
727
|
Title | Kudos | Posted |
---|---|---|
1 | 05-08-2012 07:55 AM | |
1 | 04-16-2012 07:02 PM | |
1 | 04-24-2012 12:21 PM |
Online Status |
Offline
|
Date Last Visited |
11-11-2020
02:23 AM
|