Last active
April 26, 2019 21:19
-
-
Save nommuna2/23549249bcc955789cf2a337d17e7537 to your computer and use it in GitHub Desktop.
(ArcGIS API for JavaScript) Sample of creating a form in a popup and using applyEdits operation to make edits to the feature layer.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
require([ | |
"esri/Map", | |
"esri/views/MapView", | |
"esri/layers/FeatureLayer", | |
"esri/widgets/Popup", | |
"esri/Graphic", | |
"dojo/domReady!" | |
], | |
function (Map, MapView, FeatureLayer, Popup, Graphic) { | |
//Create a new map and set the basemap to Dark gray | |
var map = new Map({ | |
basemap: "dark-gray", | |
//layers: [featureLayer] | |
}); | |
//set a new view and set the properties of the view | |
var view = new MapView({ | |
container: "viewDiv", | |
map: map, | |
center: [-86.049, 38.485], | |
zoom: 3 | |
}); | |
var fl = new FeatureLayer({ | |
url: "URl to a feature layer" | |
}); | |
map.add(fl); | |
//On click show the popup window with the lat long and set the content to the form function. | |
view.on("click", function(e) { | |
e.stopPropagation(); | |
console.log(e); | |
view.popup.open({ | |
title: "Clicked location: [" + e.mapPoint.longitude + ", " + e.mapPoint.latitude + "]", | |
}); | |
view.popup.content = form(); | |
}); | |
//This function sets up a simple form. Where the user enters a number then clicks submit to apply edits to the feature layer | |
function form () { | |
//Create the form | |
var container = document.createElement('div'); | |
var popField = document.createElement('input'); | |
var button = document.getElementById('submitData'); | |
popField.setAttribute("type", "text"); | |
container.appendChild(popField); | |
container.appendChild(button); | |
//Add an event listener on "click" | |
button.addEventListener("click", function(e){ | |
//Set up the attributes | |
var attributes = {}; | |
attributes["POP2000"] = popField.value; | |
// Create a new Graphic with the geometry and the attributes | |
var addFeature = new Graphic({ | |
geometry: e.mapPoint, | |
attributes: attributes | |
}); | |
//Once the feature layer has loaded onto the map, apply the edits to the feature layer | |
fl.load().then(function(){ | |
fl.applyEdits({ | |
addFeatures:[addFeature] | |
}).then(function (result) { | |
console.log(result); | |
alert("Successfully added new feature with objectId of: " + result.addFeatureResults[0].objectId) | |
}).catch(function (err){ | |
console.error(err.code); | |
}); | |
}); | |
}); | |
return container; | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Live sample: https://jsbin.com/pupuvurasu/1/edit?js,output