I want to use a geometry object from an esriRequest to add a graphic to a featureLayer. I present the client with two options: 1.) use the SketchViewModel draw tool to create a polygon to add a new graphic to the featureLayer, and 2.) use a dropdown box selector to choose a specific Field Office boundary polygon to add a new graphic to the featureLayer. While the draw tool works fine, when I obtain my geometry object from the esriRequest it will not display when I later go to that record and attempt to display the geometry on my web map.
<script>
var geometryFromSketch;
var geometryObj;
require([
"esri/Map",
"esri/views/MapView",
"esri/widgets/Sketch/SketchViewModel",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"esri/layers/GeoRSSLayer",
"esri/layers/FeatureLayer",
"esri/layers/MapImageLayer",
"esri/geometry/SpatialReference",
"esri/geometry/Polygon",
"dojo/domReady!"
], function(Map, MapView, SketchViewModel, Graphic, GraphicsLayer, GeoRSSLayer, FeatureLayer, MapImageLayer, Polygon) {
// GraphicsLayer to hold graphics created via sketch view model
var tempGraphicsLayer = new GraphicsLayer();
const featureLayer = new FeatureLayer({
url:
"https://gis.nm.blm.doi.net/arcgis/rest/services/Stipulations/BLM_NM_OG_Stips_Poly/FeatureServer/0/addFeatures"
});
// Point to the rss feed url
var layer = new MapImageLayer({
url: "https://gis.blm.gov/nmarcgis/rest/services/Base/BLM_NM_Reference_Boundaries/MapServer"
});
var map = new Map({
basemap: "national-geographic",
layers: [layer, tempGraphicsLayer]
});
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 6,
center: [-106.1499021874988, 34.44280009376313]
});
view.when(function() {
// create a new sketch view model
var sketchViewModel = new SketchViewModel({
view: view,
layer: tempGraphicsLayer,
pointSymbol: { // symbol used for points
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
style: "circle",
color: "#72ACCB",
size: "16px",
outline: { // autocasts as new SimpleLineSymbol()
color: [255, 255, 255],
width: 3 // points
}
},
polylineSymbol: { // symbol used for polylines
type: "simple-line", // autocasts as new SimpleMarkerSymbol()
color: "#72ACCB",
width: "4",
style: "dash"
},
polygonSymbol: { // symbol used for polygons
type: "simple-fill", // autocasts as new SimpleMarkerSymbol()
color: "rgba(114,172,203, 0.7)",
style: "solid",
outline: {
color: "white",
width: 1
}
}
});
// ************************************************************
// Get the completed graphic from the event and add it to view.
// This event fires when user presses
// * "C" key to finish sketching point, polygon or polyline.
// * Double-clicks to finish sketching polyline or polygon.
// * Clicks to finish sketching a point geometry.
// ***********************************************************
sketchViewModel.on("draw-complete", function(evt) {
//console.log("evtGeo", evt.geometry) ;
geometryForSketch = evt.geometry;
document.getElementById('GISGeometry').value = 'Geometry Input';
// add the graphic to the graphics layer
tempGraphicsLayer.add(evt.graphic);
setActiveButton();
});
// Call FeatureLayer.applyEdits() with specified params.
function applyEditsToIncidents(params) {
// unselectFeature();
featureLayer
.applyEdits(params)
.then(function(){
unloadLoadingGif();
window.location.href = "http://it4rmdev.blm.doi.net/Michaels_Leasing_Stipulations_Proof_11_25_2019/StipPages/stipulationsList.cfm";
})
.catch(function(error) {
unloadLoadingGif();
console.log("===============================================");
console.error(
"[ applyEdits ] FAILURE: ",
error.code,
error.name,
error.message
);
console.log("error = ", error);
});
}
// *************************************
// activate the sketch to create a point
// *************************************
var submitButton = document.getElementById("submitButton");
submitButton.onclick = function() {
<!---GET SELECTED VALUE OF FIELD OFFICE DROPDOWN--->
var fOSelectVal = document.getElementById('fieldOfficeShp').options[ document.getElementById('fieldOfficeShp').selectedIndex ].value;
<!---GET SELECTED VALUE OF FIELD OFFICE DROPDOWN--->
loadLoadingGif('/Settings/Images/Loading.gif');
if(fOSelectVal == ' ' )
{
geometryObj = geometryForSketch;
console.log("geo", geometryObj);
}
else
{
<!---POPULATE ESRI AJAX WHERE CLAUSE BASED ON FIELD OFFICE DROPDOWN SELECTION--->
if(fOSelectVal == "Las Cruces District Office"){
var Clause = "ADMU_NAME = 'LAS CRUCES DISTRICT OFFICE'"
}
else if(fOSelectVal == "Carlsbad Field Office"){
var Clause = "ADMU_NAME = 'CARLSBAD FIELD OFFICE'"
}
else if(fOSelectVal == "Socorro Field Office"){
var Clause = "ADMU_NAME = 'SOCORRO FIELD OFFICE'"
}
else if(fOSelectVal == "Roswell Field Office"){
var Clause = "ADMU_NAME = 'ROSWELL FIELD OFFICE'"
}
else if(fOSelectVal == "Rio Puerco Field Office"){
var Clause = "ADMU_NAME = 'RIO PUERCO FIELD OFFICE'"
}
else if(fOSelectVal == "Taos Field Office"){
var Clause = "ADMU_NAME = 'TAOS FIELD OFFICE'"
}
else if(fOSelectVal == "Farmington Field Office"){
var Clause = "ADMU_NAME = 'FARMINGTON FIELD OFFICE'"
}
else if(fOSelectVal == "Oklahoma Field Office"){
var Clause = "ADMU_NAME = 'OKLAHOMA FIELD OFFICE'"
}
<!---POPULATE ESRI AJAX WHERE CLAUSE BASED ON FIELD OFFICE DROPDOWN SELECTION--->
<!---ESRI FUNCTION FOR INTERSECTING GEOMETERIES AND PERFORMING ALL AJAX CALLS BASED ON QUERY SELECTIONS--->
require(["esri/request"], function(esriRequest) {
/************************************************
*
* Define the 'options' for our request.
*
*************************************************/
<!---VARIABLES FOR PROJECT GEOMETRY GET--->
var options = {
// These properties will be appended to the request URL in the following format:
// <url>?f=json
query: {
f: "json",
geometryType: "esriGeometryPolygon",
where: Clause,
geometryPrecision: 3,
outSR: 3857
},
// Determine the format you want to read the response as.
// Default type is 'json'. Other values are 'xml', 'text', 'blob', 'arraybuffer', 'document'.
responseType: "json"
};
<!---VARIABLES FOR PROJECT GEOMETRY GET--->
<!---SET URL VARIABLE FOR JSON CALL TO ESRI PROJECT_POLY DB--->
var url = "https://gis.blm.gov/nmarcgis/rest/services/Base/BLM_NM_Reference_Boundaries/MapServer/0/query";
<!---SET URL VARIABLE FOR JSON CALL TO ESRI PROJECT_POLY DB--->
<!---ESRI AJAX REQUEST TO GET FIELD OFFICE BOUNDARY GEOMETRY--->
esriRequest(url, options).then(
function(response)
{
unloadLoadingGif();
geometryObj= response.data.features[0].geometry.rings;
document.getElementById('GISGeometry').value = 'Geometry Input';
<!---console.log("geo2", response.data.features[0].geometry);--->
console.log("geo3", geometryObj);
});
});
}
var Res = document.getElementById('optResource');
var Stat = document.getElementById('optStatus');
var Type = document.getElementById('optType');
var AdmFldOff = document.getElementById('optFO');
var RMPA = document.getElementById('optRMPA');
var Dsgntn = document.getElementById('optDsgntn');
var ROD_Yr = document.getElementById('optROD_Yr');
var State = document.getElementById('optState');
var AdmState = document.getElementById('optAdminState');
var DataSrc = document.getElementById('optDataSrc');
//build geometry object to add
var polygon = Polygon({
f: json,
type: "polygon", // autocasts as new Polygon()
rings: geometryObj,
spatialReference: {"latestWkid":3857,"wkid":102100 }
});
editFeature = new Graphic({
geometry: polygon,
attributes: {
OG_STIP_ID: document.getElementById('txtStipID').value,
OG_STIP_NA: document.getElementById('txtTitle').value,
OG_STIP_TYPE: Type.options[Type.selectedIndex].value,
OG_STIP_CNTNT: document.getElementById('txtDescript').value,
PRPSE: document.getElementById('txtPurpose').value,
PRCDNG_RMP_RMPA: RMPA.options[RMPA.selectedIndex].value,
AFFCTED_RESRCE: Res.options[Res.selectedIndex].value,
STATUS: Stat.options[Stat.selectedIndex].value,
DSGNTN: Dsgntn.options[Dsgntn.selectedIndex].value,
GEO_STATE: State.options[State.selectedIndex].value,
ADMIN_ST: AdmState.options[AdmState.selectedIndex].value,
ADM_UNIT_CD: AdmFldOff.options[AdmFldOff.selectedIndex].value,
ROD_YR: ROD_Yr.options[ROD_Yr.selectedIndex].value,
SITE_NA: document.getElementById('txtSite').value,
DATA_SRCE: DataSrc.options[DataSrc.selectedIndex].value,
GEN_COMMENTS: document.getElementById('txtGenComm').value,
WAIVER: document.getElementById('txtWaiver').value,
EXCPTN: document.getElementById('txtException').value,
MODFCTN: document.getElementById('txtModif').value
<!---USER_ID: <cfoutput>'#Session.getAuthUser#'</cfoutput>,--->
<!---DATE_CREATED: "2019-11-05 00:00:00.0",--->
}
});
const edits = {
addFeatures: [editFeature]
};
applyEditsToIncidents(edits);
};
<!---END OF SUBMIT BUTTON CLICK ()--->
// ***************************************
// activate the sketch to create a polygon
// ***************************************
var drawPolygonButton = document.getElementById("polygonButton");
drawPolygonButton.onclick = function() {
// set the sketch to create a polygon geometry
tempGraphicsLayer.removeAll();
sketchViewModel.reset();
document.getElementById('GISGeometry').value = '';
sketchViewModel.create("polygon");
setActiveButton(this);
};
// **************
// reset button
// **************
document.getElementById("resetBtn").onclick = function() {
tempGraphicsLayer.removeAll();
sketchViewModel.reset();
document.getElementById('GISGeometry').value = '';
setActiveButton();
};
function setActiveButton(selectedButton) {
// focus the view to activate keyboard shortcuts for sketching
view.focus();
var elements = document.getElementsByClassName("active");
for (var i = 0; i < elements.length; i++) {
elements.classList.remove("active");
}
if (selectedButton) {
selectedButton.classList.add("active");
}
};
});
});
</script>