I am getting a weird result when I search for a location.
I have the Editor widget and Search basic combined.
When I search for a location, I can zoom to it. Then when I click on any other point to edit it, I get this result:
Has anyone dealt with this?
i think I am looking for a way to clear search when I click anywhere not the search point.
Even when I clear the search bar I still cannot click on a point to edit:
Solved! Go to Solution.
Can you show me your code that calls initEditing initially?
Robert,
map.on("layers-add-result", initEditing);
function initEditing(event) { var featureLayerInfos = arrayUtils.map(event.layers, function (layer) { return { "featureLayer": layer.layer, "isEditable": true, 'showAttachments': true, "showDeleteButton": false, "fieldInfos": [{ 'fieldName': 'Caller_Name', 'isEditable': false, 'tooltip': 'Caller Name', 'label': 'Caller Name:' }, { 'fieldName': 'Priority', 'isEditable': true, 'tooltip': 'Priority', 'label': 'Priority:' }, { 'fieldName': 'Location', 'isEditable': false, 'label': 'Location:' }, { 'fieldName': 'Phone', 'isEditable': false, 'label': 'Phone:' }, { 'fieldName': 'Notes', 'isEditable': true, 'label': 'Notes:' }, { 'fieldName': 'CallType', 'isEditable': true, 'label': 'CallType:' }] }; }); var settings = { map: map, layerInfos: featureLayerInfos }; var params = { settings: settings }; var editorWidget = new Editor(params, 'editorDiv'); editorWidget.startup(); //snapping defaults to Cmd key in Mac & Ctrl in PC. //specify "snapKey" option only if you want a different key combination for snapping map.enableSnapping(); }
Rickey,
Here is my recommended code changes:
map.on("layers-add-result", initEditing); function initEditing(event) { window.featureLayerInfos = arrayUtils.map(event.layers, function (layer) { return { "featureLayer": layer.layer, "isEditable": true, 'showAttachments': true, "showDeleteButton": false, "fieldInfos": [{ 'fieldName': 'Caller_Name', 'isEditable': false, 'tooltip': 'Caller Name', 'label': 'Caller Name:' }, { 'fieldName': 'Priority', 'isEditable': true, 'tooltip': 'Priority', 'label': 'Priority:' }, { 'fieldName': 'Location', 'isEditable': false, 'label': 'Location:' }, { 'fieldName': 'Phone', 'isEditable': false, 'label': 'Phone:' }, { 'fieldName': 'Notes', 'isEditable': true, 'label': 'Notes:' }, { 'fieldName': 'CallType', 'isEditable': true, 'label': 'CallType:' }] }; }); var settings = { map: map, layerInfos: featureLayerInfos }; var params = { settings: settings }; window.editor = new Editor(params, 'editorDiv'); window.editor.startup(); //snapping defaults to Cmd key in Mac & Ctrl in PC. //specify "snapKey" option only if you want a different key combination for snapping map.enableSnapping(); } search.on("select-result", lang.hitch(this, function () { //if edit tool is enabled we'll have to delete/create //so info window behaves correctly. on.once(this.map.infoWindow, "hide", lang.hitch(this, function () { search.clearGraphics(); console.log("Cleared Search Graphics"); _destroyEditor(); console.log("Test"); reActivateEditor(); })); })); function _destroyEditor() { if (this.editor) { this.editor.destroy(); console.log("Destroyed editor"); this.editor = null; } } function reActivateEditor() { var settings = { map: map, layerInfos: window.featureLayerInfos }; var params = { settings: settings }; window.editor = new Editor(params, 'editorDiv'); window.editor.startup(); //snapping defaults to Cmd key in Mac & Ctrl in PC. //specify "snapKey" option only if you want a different key combination for snapping map.enableSnapping(); }
Robert,
Thank you for your help so far! I have been able to get to what you posted (mostly) by myself. There are two errors that I cannot get by.
The first error occurs when I use the code you provide:
Uncaught TypeError: a.featureLayer.getEditCapabilities is not a function
.
The second, using the code I came up with to try to get around the layers issue:
Editor: please provide 'layerInfos' parameter in the constructor
esri.AttributeInspector: please provide correct parameter in the constructor
Uncaught TypeError: Cannot read property 'loaded' of undefined
I think this happens because I am trying to move the layerInfos outside of the function. If I keep layerInfos inside the function, I get the error:
Uncaught TypeError: Cannot read property 'layers' of undefined
Which I stated above
Rickey,
I am going to need to see all your code to provide any further assistance.
Rickey,
You were just not keep your var names straight. You had window.editor in one function and window.editorWidget in another (and some other small tweaks).
Robert,
When I try it in jsfiddle, it works.
When I copy the script to my html and save to server, I get the same error as before. The popup will not display any data.
Uncaught TypeError: a.featureLayer.getEditCapabilities is not a function
Rickey,
This is what I have working fine on my dev machine:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Emergency Loc</title> <link rel="stylesheet" href="http://js.arcgis.com/3.15/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.15/esri/css/esri.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.15/dojox/layout/resources/ExpandoPane.css"> <style> html, body { height: 100%; width: 100%; margin: 0; } body { background-color: #fff; overflow: hidden; font-family: Helvetica, san-serif; } #templatePickerPane { width: 225px; overflow: hidden; } #Editor { heigh: 30%; } #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; } .dgrid { border: none; height: 100%; } .dgrid-column-0 { width: 35px; } .dgrid-row-odd { background: #FFFDF3; } td div img:hover { cursor: pointer; } #HomeButton { position: absolute; top: 95px; left: 20px; z-index: 50; } #LocateButton { position: absolute; top: 130px; left: 20px; z-index: 50; } #search { display: block; position: absolute; z-index: 2; top: 20px; left: 74px; } th.dgrid-cell.dgrid-cell-padding.dgrid-column-2.field-Priority.dgrid-sortable { width: 20%; } td.dgrid-cell.dgrid-cell-padding.dgrid-column-2.field-Priority { width: 20%; } #layerListPane { width: 25%; } .esriLayer { background-color: #fff; } .esriLayerList .esriList { border-top: none; } .esriLayerList .esriTitle { background-color: #fff; border-bottom: none; } .esriLayerList .esriList ul { background-color: #fff; } /*css rules for the expand div*/ .esriLayerExpand { width: 16px; height: 16px; float: left; margin: 12px 0; } .esriLayerExpand.expand { background-image: url(images/v_right.png); background-repeat: no-repeat; background-position: center; cursor: pointer; } .esriLayerExpand.collapse { background-image: url(images/v.png); background-repeat: no-repeat; background-position: center; cursor: pointer; } /*narrow the margin of the checkbox for aesthetics*/ .esriLayerList .esriCheckbox { margin: 12px 5px 12px 5px; } </style> <script src="http://js.arcgis.com/3.15"></script> <script> var map, grid; require([ "esri/config", "esri/map", "esri/SnappingManager", "esri/dijit/editing/Editor", "esri/layers/FeatureLayer", "esri/tasks/GeometryService", "esri/toolbars/draw", "dojo/keys", "dojo/parser", "esri/layers/ArcGISDynamicMapServiceLayer", "dojo/_base/declare", "dgrid/OnDemandGrid", "dgrid/Selection", "esri/symbols/SimpleFillSymbol", "esri/Color", "dijit/form/Button", "esri/symbols/SimpleMarkerSymbol", "dojo/_base/array", "dojo/dom-class", "dojo/i18n!esri/nls/jsapi", "esri/tasks/query", "dojo/store/Memory", "esri/geometry/Extent", "esri/layers/CodedValueDomain", "esri/layers/Domain", "esri/dijit/HomeButton", "esri/dijit/LocateButton", "esri/dijit/Search", "esri/dijit/Scalebar", "esri/dijit/LayerList", "dojo/dom-construct", "dojo/dom-style", "dojo/dom", "dojo/_base/lang", "dojo/on", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojox/layout/ExpandoPane", "dijit/layout/AccordionContainer", "dojo/domReady!" ], function ( esriConfig, Map, SnappingManager, Editor, FeatureLayer, GeometryService, Draw, keys, parser, ArcGISDynamicMapServiceLayer, declare, Grid, Selection, SimpleFillSymbol, Color, Button, SimpleMarkerSymbol, arrayUtils, domClass, i18n, Query, Memory, Extent, CodedValueDomain, Domain, HomeButton, LocateButton, Search, Scalebar, LayerList, domConstruct, domStyle, dom, lang, on ) { 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"; //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. esriConfig.defaults.io.proxyUrl = "/proxy/"; //This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications esriConfig.defaults.geometryService = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer"); //var StatesGrid = declare([Grid, Selection]); //This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications esriConfig.defaults.geometryService = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer"); /*____________________________________________Dgrid________________________________________________________________*/ var StatesGrid = declare([Grid, Selection]); var columns = [ { label: "", //wasn't able to inject an HTML <div> with image here field: "OBJECTID", formatter: makeZoomButton }, { label: "Location", field: "Location" }, { label: "Priority", field: "Priority" }, { label: "Last Contact", field: "last_edited_date", formatter: formatlast_edited_date } ]; grid = new StatesGrid({ bufferRows: Infinity, columns: columns }, "grid"); /*____________________________________________Map________________________________________________________________*/ map = new Map("map", { basemap: "topo", center: [-122.710375, 42.197994], zoom: 16 }); /*____________________________________________Home________________________________________________________________*/ var home = new HomeButton({ map: map }, "HomeButton"); home.startup(); /*____________________________________________Locate________________________________________________________________*/ geoLocate = new LocateButton({ map: map, setScale: false, useTracking: true, timeout: 15000, enableHighAccuracy: true }, "LocateButton"); geoLocate.startup(); /*____________________________________________Search________________________________________________________________*/ var search = new Search({ map: map }, "search"); search.startup(); map.on("layers-add-result", initEditing); /*____________________________________________Edit________________________________________________________________*/ function initEditing(event) { featureLayerInfos = arrayUtils.map(event.layers, function (layer) { return { "featureLayer": layer.layer, "isEditable": true, 'showAttachments': true, "showDeleteButton": false, "fieldInfos": [{ 'fieldName': 'Caller_Name', 'isEditable': false, 'tooltip': 'Caller Name', 'label': 'Caller Name:' }, { 'fieldName': 'Priority', 'isEditable': true, 'tooltip': 'Priority', 'label': 'Priority:' }, { 'fieldName': 'Location', 'isEditable': false, 'label': 'Location:' }, { 'fieldName': 'Phone', 'isEditable': false, 'label': 'Phone:' }, { 'fieldName': 'Notes', 'isEditable': true, 'label': 'Notes:' }, { 'fieldName': 'CallType', 'isEditable': true, 'label': 'CallType:' }] }; }); var settings = { map: map, layerInfos: featureLayerInfos }; var params = { settings: settings }; editor = new Editor(params, 'editorDiv'); editor.startup(); //snapping defaults to Cmd key in Mac & Ctrl in PC. //specify "snapKey" option only if you want a different key combination for snapping map.enableSnapping(); } search.on("select-result", lang.hitch(this, function () { console.log(search.value); //if edit tool is enabled we'll have to delete/create //so info window behaves correctly. on.once(this.map.infoWindow, "hide", lang.hitch(this, function () { search.clearGraphics(); console.log("Cleared Search Graphics"); _destroyEditor(); console.log("Starting Editing Again"); reActivateEditor(); console.log("Complete"); })) })) function _destroyEditor() { if (editor) { editor.destroy(); console.log("Destroyed editor"); editor = null; } } function reActivateEditor() { var settings = { map: map, layerInfos: featureLayerInfos }; var params = { settings: settings }; editor = new Editor(params, 'editorDiv'); editor.startup(); //snapping defaults to Cmd key in Mac & Ctrl in PC. //specify "snapKey" option only if you want a different key combination for snapping map.enableSnapping(); } /*____________________________________________Scalebar________________________________________________________________*/ var scalebar = new Scalebar({ map: map, // "dual" displays both miles and kilmometers // "english" is the default, which displays miles // use "metric" for kilometers scalebarUnit: "english" }); /*____________________________________________Script________________________________________________________________*/ domClass.add(map.infoWindow.domNode, "light"); var atlasLayer = new ArcGISDynamicMapServiceLayer("http://gis.ashland.or.us/arcgis/rest/services/pictometry3inch_jason/MapServer", { "id": "atlasLayer", "showAttribution": false }); var recreationLayer = new ArcGISDynamicMapServiceLayer("http://gis.ashland.or.us/arcgis/rest/services/sandbox/EmerLoc/MapServer", { "id": "recreationLayer", "showAttribution": true, "refreshInterval": 0.038 }); var waterNetLayer = new ArcGISDynamicMapServiceLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Water_Network/MapServer", { "id": "waterNetworkLayer", "showAttribution": false }) map.addLayers([atlasLayer, recreationLayer, waterNetLayer]); var llWidget = new LayerList({ map: map, layers: [{ layer: atlasLayer, id: "Ashland Photo", subLayers: false }, { layer: recreationLayer, id: "Emergency Locations", subLayers: true }, { layer: waterNetLayer, id: "Water Network layers", subLayers: true }], showOpacitySlider: true, showLegend: true }, "layerList"); llWidget.startup(); /*When the LayerList is loaded enhance it to add collapse capabilities*/ llWidget.on('load', function () { enhanceLayerList(); }); /*Work with all the layers*/ function enhanceLayer(layerNode) { layerExpand = domConstruct.create('div'); domClass.add(layerExpand, 'esriLayerExpand collapse'); domConstruct.place(layerExpand, layerNode, 'first'); on(layerExpand, 'click', function (evt) { var LayerNodes = query('.esriLayer'); var SubList = query('.esriSubList', evt.target.parentNode); if (domClass.contains(evt.target, 'collapse')) { domClass.replace(evt.target, 'expand', 'collapse'); domStyle.set(SubList[0], 'display', 'none'); } else { domClass.replace(evt.target, 'collapse', 'expand'); domStyle.set(SubList[0], 'display', ''); } }); var subListNodes = query('.esriSubListLayer', layerNode); if (subListNodes.length > 0) { array.map(subListNodes, function (subListNode) { enhanceSubList(subListNode); }); } } /*Now work with all the sublayers*/ function enhanceSubList(subLayerNode) { var subLayerExpand; var subListNodes = query('.esriSubListLayer', subLayerNode); if (subListNodes.length > 0) { subLayerExpand = domConstruct.create('div'); domClass.add(subLayerExpand, 'esriLayerExpand collapse'); domConstruct.place(subLayerExpand, subLayerNode, 'first'); on(subLayerExpand, 'click', function (evt) { var cState = ''; var subListLayerNodes = query('.esriSubListLayer', evt.target.parentNode); if (domClass.contains(evt.target, 'collapse')) { domClass.replace(evt.target, 'expand', 'collapse'); cState = 'collapse'; } else { domClass.replace(evt.target, 'collapse', 'expand'); cState = 'expand'; } array.map(subListLayerNodes, function (subListLayerNode) { if (cState === 'collapse') { domStyle.set(subListLayerNode, 'display', 'none'); } else { domStyle.set(subListLayerNode, 'display', 'block'); } }); }); } else { subLayerExpand = domConstruct.create('div'); domClass.add(subLayerExpand, 'esriLayerExpand'); domConstruct.place(subLayerExpand, subLayerNode, 'first'); } } /*Begin with the individual layers*/ function enhanceLayerList() { var layerExpand, subLayerExpand; var LayerNodes = Query('.esriLayer'); arrayUtils.map(LayerNodes, function (layerNode) { enhanceLayer(layerNode); }); } /*____________________________________________AddLayers________________________________________________________________*/ var operationsPointLayer = new FeatureLayer("http://gis.ashland.or.us/arcgis/rest/services/sandbox/EmerLoc/FeatureServer/0", { mode: FeatureLayer.MODE_ONDEMAND, outFields: ["*"], refreshInterval: 0.038 }); map.addLayers([operationsPointLayer]); map.infoWindow.resize(400, 300); /*____________________________________________Dgrid________________________________________________________________*/ //add the states demographic data var statesLayer = new FeatureLayer("http://gis.ashland.or.us/arcgis/rest/services/sandbox/EmerLoc/MapServer/0", { mode: FeatureLayer.MODE_SELECTION, outFields: ["OBJECTID", "Priority", "Location", "last_edited_date", "CallType"] }); //create Selection Symbol var highlightSymbol = new SimpleMarkerSymbol({ "color": [0, 112, 255, 255], "size": 10, "angle": 0, "xoffset": 0, "yoffset": 14, "type": "esriSMS", "style": "esriSMSDiamond" }); statesLayer.on("load", function (evt) { var query = new Query(); query.where = "1=1"; statesLayer.refreshInterval = 0.03; query.outFields = ["OBJECTID", "Priority", "Location", "last_edited_date", "CallType"]; query.returnGeometry = true; statesLayer.queryFeatures(query, function (featureSet) { var items = arrayUtils.map(featureSet.features, function (feature) { var fields = statesLayer.fields; return feature.attributes; }); //idProperty must be set manually if value is something other than 'id' var memStore = new Memory({ data: items, idProperty: "OBJECTID" }); window.grid.set("store", memStore); window.grid.set("sort", "last_edited_date", " descending: false"); grid.on(".field-OBJECTID:click", function (e) { //retrieve the ObjectId when someone clicks on the magnifying glass if (e.target.alt) { zoomRow(e.target.alt); } }); }, function (error) { console.info(error); }); statesLayer.clearSelection(); }); map.addLayer(statesLayer); statesLayer.setRefreshInterval(0.083); map.on("click", function (evt) { grid.clearSelection(); }); function makeZoomButton(id) { //set the feature 'id' as the alt value for the image so that it can be used to query below var zBtn = "<div data-dojo-type='dijit/form/Button'><img src='images/zoom.png' alt='" + id + "'"; zBtn = zBtn + " width='15' height='15'></div>"; return zBtn; } //center at the selected feature on the map from the row in the data grid function zoomRow(id) { statesLayer.clearSelection(); grid.refresh(); var query = new Query(); query.objectIds = [id]; console.info(id); statesLayer.selectFeatures(query, FeatureLayer.SELECTION_SUBTRACT, function (features) { //re-centre map to zoom to the selected feature if (features.length) { // re-center the map to the selected feature map.centerAt(features[0].geometry, 0.9); } else { console.log("Feature Layer query returned no features... ", features); } }); statesLayer.clearSelection(); } function formatlast_edited_date(value) { var inputDate = new Date(value); return dojo.date.locale.format(inputDate, { selector: 'date', datePattern: 'MM/dd/yyyy HH:mm' }); } }); </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 id="search"></div> <div id="HomeButton"></div> <div id="LocateButton"></div> </div> <div data-dojo-type="dojox/layout/ExpandoPane" data-dojo-props="duration:300, title:'Layer List', splitter:true, region:'right', maxWidth:'220px', startExpanded:false, easeIn:'easing.linear', easeOut:'easing.linear'" style="width:22%;"> <div id="layerListPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'"> <div id="layerList"></div> </div> </div> <div data-dojo-type="dojox/layout/ExpandoPane" data-dojo-props="duration:300, title:'Calls', splitter:true, region:'left', maxWidth:'220px', easeIn:'easing.linear', easeOut:'easing.linear'" style="width:22%;"> <div data-dojo-type="dijit/layout/ContentPane" id="templatePickerPane" data-dojo-props="region:'left', maxWidth:'220px'" style="width:30%;"> <!--<div id="Editor" > <div id="panelHeader" style="height:20%;"> Default Editor </div>--> <div id="grid" style="height:75%;"></div> </div> </div> </div> </body> </html>