I know there are many threads on editing and navigation, but I still can't figure it out. I want to be able to enable/disable editing on my featureLayer.
I have a boolean set as app.editEnabled.
I have the button constructed as a toggleButton:
createEditButton: function (){
var tglButton = new ToggleButton({
showLabel: true,
label: 'Begin Editing',
onChange: function(val) {
if (val){
this.set('label', 'Stop Editing');
app.editEnabled = true;
}else{
this.set('label', 'Begin Editing');
app.editEnabled = false;
}
}
}, "tglEditButton");
},
It is properly changing my Boolean and my button label.
var template = new PopupTemplate({ title: null });
template.setContent(setPopupContent);
My FeatureLayer is defined as
featureLayer = new FeatureLayer(pathName+"/arcgis/rest/services/MDA/sampleGeocodeEdit/FeatureServer/0",{
id:"featureLayer",
outFields:['*'],
infoTemplate:template
});
//symbology defined elsewhere
featureLayer.renderer = renderer;
featureLayer.setSelectionSymbol(highlightMarkerSymbol);
I have a listener on it:
on(featureLayer, "click", function(evt){
map.infoWindow.hide();
formatString = "";
objectId = evt.graphic.attributes[featureLayer.objectIdField];
selectQuery.objectIds = [objectId];
featureLayer.selectFeatures(selectQuery);
if (app.editEnabled) {
myEditor.activateToolbar(evt.graphic,map);
}
});
in myEditor
activateToolbar: function (graphic,map) {
map.infoWindow.hide();
map.disableMapNavigation();
map.disablePan();
app.editToolbar.activate(Edit.MOVE, graphic);
on(app.editToolbar, 'graphic-move-stop', function(evt){
featureLayer.applyEdits(null, [graphic], null);
app.editToolbar.deactivate();
map.enableMapNavigation();
map.infoWindow.hide();
});
}
There is where I'm getting stuck. Instead of the graphic moving when I drag the mouse, it still just pans the screen instead. As long as my feature doesn't have an infoTemplate, the graphic drags. Once I include one in my featureLayer constructor, navigation is not disabled and instead of dragging the graphic, it just pans. I've tried hiding the infoWindow, but it isn't getting removed.
Solved! Go to Solution.
Ok, now I understand what you mean.
Change the below function in myEditor.js file.
createEditButton: function (map) { var tglButton = new ToggleButton({ showLabel: true, label: 'Begin Editing', }, "tglEditButton"); on(tglButton, 'change',lang.hitch(this, function (val) { if (val) { this.set('label', 'Stop Editing'); app.editEnabled = true; map.infoWindow.hide(); var selected = featureLayer.getSelectedFeatures(); if(selected && selected.length > 0){ var graphic = selected[0]; this.activateToolbar(graphic, map); } } else { this.set('label', 'Begin Editing'); app.editEnabled = false; } })); },
The idea is to get the selected feature and setup the edit Toolbar when the graphic is already selected. I have not tested the code. Also you need to require dojo/_base/lang.
Hope this helps.
Could you also share the code for "setPopupContent".
It's rather convoluted and it doesn't seem relevant, but sure. I changed it to be just a simple string:
popupTemplate.setContent("this is my template")
and it didn't make any difference to the behavior.
function setPopupContent(content){
var template = "<span id='attImage'></span><div class='boldPopup'>${Facility}</div><div>${Address}</div><div>${City},${State}</div>";
// get attachments and update template when we have url
var oid = content.attributes[featureLayer.objectIdField];
featureLayer.queryAttachmentInfos(oid).then(function(attachments){
if(attachments.length > 0){
var attachment = attachments[0];
if(attachment.url && attachment.name){
dom.byId("attImage").innerHTML= "<img class='popupImage' alt='siteImage' src='" + attachment.url +"'/>";
}
}
});
return esriLang.substitute(content.attributes,template);
}
I just wanted to see if you were enabling the MapNavigation in it. As you mentioned, the issue occurs only when you use the template. It was just a thought.
You must be a mind reader. I actually did have mapNavigation.enabled set in it. I was so sure that was clue I needed. But I took the line out and it didn't help.
In my createEditButton function, I added map.infoWindow.hide() in the section if (val) ..... It removes the infoWindow, navigation is still enabled, so I get map movement, not graphic moving. If I click the feature again, THEN that disables the navigation and I can move the point.
I don't want navigation to be disabled just because I enabled editing, though. It feels close, I just don't have the logic right.
It will probably help to see it working here:
The points get added by geocoding, not by something like templatepicker. It's the reason I'm using this approach, as opposed to something like the Editor widget.
Is the Link you have provided a sample code or the application where the issue exist?
The application where the issue exists. I haven't figured how to post some place like jsbin once I have it split into modules.
I dont find any issue, with the application. I think it was resolved when you removed the line from setContent function. My be try refreshing the local browser cache it should work.
It's still not behaving like I want. You have to select the feature again after the infoWindow has been removed before you can move the graphic.
What I see is, you click Enable Editbutton, which disables the InfoWindow/Popup click. Then click the Graphic, which selects the point, updates the attributes panel and enables edittoolbar. Then mouse down, drag the graphic and mouse up.
I think its ideal flow.
For the first click event to raise, you need to mouse up ( this event enables the edittoolbar). Then you need to press the mouse again to drag. I dont see any other way to reduce the user click. unless, you use mouse-down to select the feature, enable editor and drag it immediately. I am not sure it will be user-friendly.