Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Cancel
- Home
- :
- About Vakhtang_Zubiashvili
Vakhtang_Zubias
Frequent Contributor
since
10-19-2014
05-13-2025
171
Posts created
57
Kudos given
1
Solutions
7
Kudos received
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
My Ideas
(0 Idea Submissions)Latest Contributions by Vakhtang_Zubiashvili
|
POST
|
Hi all, Robert Scheitlin, GISP, Ken Buja I have web map with editable featureLayer. After click on my feature i get atrributes (using hitTest), and after click button "Query" query result displays as graphicsLayer and after another click graphic adds to graphicLayer. Idea of doing that is to merge several features in to one feature and update featreLayer after click on button. Now after click button "Update" i want to update graphicLayer features in my featureLayer, but it does not update. I paste full code to show how it is done: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>GWP - მილი და სამისამართო ერთეული</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/css/main.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://js.arcgis.com/4.14"></script>
<script>
require([
"esri/Map",
"esri/widgets/ScaleBar",
"esri/widgets/Home",
"esri/widgets/Compass",
"esri/widgets/BasemapToggle",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/renderers/UniqueValueRenderer",
"esri/tasks/QueryTask",
"esri/tasks/support/Query",
"esri/widgets/BasemapToggle",
"esri/widgets/DistanceMeasurement2D",
"esri/widgets/AreaMeasurement2D",
"esri/widgets/ScaleBar",
"esri/widgets/Home",
"esri/widgets/Compass",
"esri/views/MapView",
"esri/widgets/Legend",
"esri/widgets/Expand",
"esri/layers/GroupLayer",
"esri/layers/MapImageLayer",
"esri/widgets/LayerList",
"esri/layers/FeatureLayer",
"esri/layers/GraphicsLayer",
"esri/widgets/Expand",
"esri/widgets/Sketch/SketchViewModel",
"esri/widgets/FeatureForm",
"esri/widgets/FeatureTemplates",
"esri/geometry/geometryEngine",
"esri/Graphic",
"dojo/on",
"dojo/dom",
"dojo/dom-construct",
"dojo/domReady!"
], function(
Map, ScaleBar, Home, Compass, BasemapToggle, SimpleMarkerSymbol, SimpleFillSymbol, SimpleLineSymbol, UniqueValueRenderer, QueryTask, Query, BasemapToggle, DistanceMeasurement2D,
AreaMeasurement2D, ScaleBar, Home, Compass, MapView,Legend, Expand, GroupLayer, MapImageLayer,
LayerList,
FeatureLayer,
GraphicsLayer,
Expand,
SketchViewModel,
FeatureForm,
FeatureTemplates,
geometryEngine,
Graphic,
on, dom, domConstruct
) {
let editFeature, highlight;
var fLpolygonSymbol = {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: "yellow",
style: "solid",
outline: {
color: "red",
width: 1
}
};
const featureLayer = new FeatureLayer({
url:
"http://localhost:6080/arcgis/rest/services/test/Request_Area/FeatureServer/0",
title:"",
outFields: ["*"],
popupEnabled: false,
id: "incidentsLayer",
listMode: "hide",
legendEnabled: false
});
// GraphicsLayer to hold graphics created via sketch view model
const graphicsLayer = new GraphicsLayer({
id: "tempGraphics",
listMode: "hide"
});
const labelClass = {
// autocasts as new LabelClass()
symbol: {
type: "text", // autocasts as new TextSymbol()
color: "black",
haloColor: "black",
font: {
// autocast as new Font()
family: "sans-serif",
size: 8,
weight: "bold"
}
},
labelPlacement: "center-along",
labelExpressionInfo: {
expression: "$feature.g_dasaxeleba_ka"
}
};
var renderer = {
type: "simple", // autocasts as new SimpleRenderer()
symbol: {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
style: "none",
outline: {
// makes the outlines of all features consistently light gray
color: "grey",
width: 0.5
}
}
};
layer2popup = {
title: "ქუჩა",
content: [{
type: "fields",
fieldInfos: [{
fieldName: "g_dasaxeleba_ka",
label: "ქუჩის დასახელება",
visible: true
},{
fieldName: "SE_ID_new",
label: "SE ID new",
visible: true
},
{
fieldName: "zd_donis_ID",
label: "ზედა ზონის ID",
visible: true
}]
}]
}
var layer2 = new FeatureLayer({
url: "http://localhost:6080/arcgis/rest/services/test/Tbilisi_wyalmomarageba_vaxo/MapServer/15",
title: "სამისამართო ერთეული",
popupTemplate: layer2popup,
popupEnabled: false,
outFields: ["*"],
labelingInfo: [labelClass],
renderer: renderer
});
//saZiebo sistema
var HWUrl = "http://10.0.251.179:6080/arcgis/rest/services/test/Tbilisi_wyalmomarageba_vaxo/MapServer/15";
// magistraluri arxi
var HWLayer = new FeatureLayer({
url: HWUrl,
outFields: ["*"],
visible: false
});
/*
// GraphicsLayer for displaying results
var resultsLayer = new GraphicsLayer({
title: "ძიების რეზულტატი"
});
*/
var map = new Map({
basemap: "osm",
layers: [layer2, featureLayer, graphicsLayer]
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [44.7502, 41.725524],
zoom: 12,
highlightOptions: {
color: "red"
}
});
// Double-Click-ზე Zoom შეჩერება
view.on("double-click", function(evt) {
evt.stopPropagation();
console.info(evt);
});
// Add a basemap toggle widget to toggle between basemaps
var toggle = new BasemapToggle({
titleVisible: true,
view: view,
nextBasemap: "satellite"
});
// Toggle რუკისთვის
view.ui.add(toggle, "top-left");
// Click-ზე graphicsLayer შექმნა და მისი რუკაზე დამატება
view.on("click", function (event) {
// Search for graphics at the clicked location. View events can be used
// as screen locations as they expose an x,y coordinate that conforms
// to the ScreenPoint definition.
view.hitTest(event).then(function (response) {
if (response.results.length) {
var graphic = response.results.filter(function (result) {
// check if the graphic belongs to the layer of interest
return result.graphic.layer === layer2;
})[0].graphic;
var attributes = graphic.attributes;
var name = attributes.g_dasaxeleba_ka;
var SE_ID = attributes.SE_ID_new;
}
var queryZebna = dom.byId("query-Zebna");
on(queryZebna, "click", function() {
queryMagistraluri()
.then(displayResults);
});
function queryMagistraluri() {
var query = HWLayer.createQuery();
//query.returnGeometry = true;
//query.outFields = ["*"];
query.where = "g_dasaxeleba_ka LIKE N'%"+ name +"%'";
query.outSpatialReference = view.spatialReference;
return HWLayer.queryFeatures(query)
}
// display the query results in the view
function displayResults(results) {
console.log(results);
var pfeatures = results.features.map(function(graphica) {
graphica.symbol = {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: "orange",
style: "solid",
outline: { // autocasts as new SimpleLineSymbol()
color: "black",
width: 1
}
};
return graphica
});
graphicsLayer.addMany(pfeatures);
view.goTo(pfeatures)
}
});
});
const btnupdate = dom.byId("button-update");
on(btnupdate, "click", function () {
// Create a new graphic and set its geometry to
function addGraphic(event) {
// Create a new graphic and set its geometry to
// `create-complete` event geometry.
const graphic = new Graphic({
geometry: polygon,
symbol: graphica.symbol,
attributes: {}
});
graphicsLayer.add(graphic);
const edits = { //Fire the addFeatures function using the completed graphic
addFeatures: [graphic]
};
applyEdits(edits);
console.log(graphic);
};
function applyEdits(params) {
featureLayer.applyEdits(params).then(function(editsResult) {
// Get the objectId of the newly added feature.
// Call selectFeature function to highlight the new feature.
if (editsResult.addFeatureResults.length > 0) {
const objectId = editsResult.addFeatureResults[0].objectId;
}
})
.catch(function(error) {
console.log("===============================================");
console.error("[ applyEdits ] FAILURE: ", error.code, error.name,
error.message);
console.log("error = ", error);
});
}
})
});
</script>
</head>
<body>
<button id="query-Zebna">ძებნა</button>
<button id="button-update">Update</button>
<div id="viewDiv"></div>
</div>
</body>
</html>
... View more
01-24-2020
05:57 AM
|
0
|
11
|
5377
|
|
POST
|
I have removed Date field. For attributes i added, but still nothing var attributes:
//////Code here;
attributes = evtTemplate.template.prototype.attributes;
//////Code here
geometry: event.geometry,
symbol: sketchVM.creataGraphic.symbol,
attributes: attributes
... View more
01-22-2020
11:15 PM
|
0
|
2
|
2484
|
|
POST
|
Robert, No it does not have any required fields. It has numeric, string and Date fields. When using JS 4.9 i can add feature without attributes, does it imposible in version 4.14 ?
... View more
01-22-2020
09:37 PM
|
0
|
0
|
2484
|
|
POST
|
I lost Robert Scheitlin, GISP, Ken Buja, i changed - - - - "symbol: sketchViewModel.graphic.symbol"(JS version 4.9) to "symbol: sketchViewModel.crateGraphic.symbol" (JS version 4.14) and "view" to "view:view". now it does polygon sketch, but doesn't update featureLayer. It does not show any error in console, i do not understand <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>Update FeatureLayer using applyEdits() - 4.14</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.14/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.14/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#formDiv {
width: 100%;
}
.esri-item-list__scroller {
overflow-y: visible;
}
.editArea-container {
background: #fff;
line-height: 1.5em;
overflow: auto;
padding: 12px 15px;
width: 300px;
}
.list-heading {
font-weight: normal;
margin-top: 20px;
margin-bottom: 10px;
color: #323232;
}
.or-wrap {
background-color: #e0e0e0;
height: 1px;
margin: 2em 0;
overflow: visible;
}
.or-text {
background: #fff;
line-height: 0;
padding: 0 1em;
position: relative;
bottom: 0.75em;
}
/* override default styles */
.esri-feature-form {
background: #fff;
}
.esri-feature-templates {
width: 256px;
}
.esri-feature-templates__section-header {
display: none;
}
.esri-feature-templates__section {
box-shadow: none;
}
.esri-feature-templates__scroller {
max-height: 200px;
}
</style>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"esri/widgets/Expand",
"esri/widgets/Sketch/SketchViewModel",
"esri/widgets/FeatureForm",
"esri/widgets/FeatureTemplates"
], function(
Map,
MapView,
FeatureLayer,
Graphic,
GraphicsLayer,
Expand,
SketchViewModel,
FeatureForm,
FeatureTemplates
) {
let editFeature, highlight;
const featureLayer = new FeatureLayer({
url:
"http://localhost:6080/arcgis/rest/services/test/Request_Area/FeatureServer/0",
title:"ქუჩების ფენა",
outFields: ["*"],
popupEnabled: false,
id: "incidentsLayer"
});
// GraphicsLayer to hold graphics created via sketch view model
const graphicsLayer = new GraphicsLayer({
id: "tempGraphics"
});
const map = new Map({
basemap: "dark-gray",
layers: [featureLayer, graphicsLayer, ]
});
const view = new MapView({
container: "viewDiv",
map: map,
center: [44.7502, 41.725524],
zoom: 12,
highlightOptions: {
color: "red"
}
});
//****************************-სიმბოლოები პოლიგონისთვის-***********************
const pointSymbol = {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
style: "square",
color: "#8A2BE2",
size: "16px",
outline: { // autocasts as new SimpleLineSymbol()
color: [255, 255, 255],
width: 3
}
};
const polylineSymbol = {
type: "simple-line", // autocasts as new SimpleLineSymbol()
color: "#8A2BE2",
width: "4",
style: "dash"
};
const polygonSymbol = {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: "yellow",
style: "solid",
outline: {
color: "red",
width: 1
}
};
// New FeatureForm and set its layer to 'Incidents' FeatureLayer.
// FeatureForm displays attributes of fields specified in fieldConfig.
const featureForm = new FeatureForm({
container: "formDiv",
layer: featureLayer,
});
// Check if the user clicked on the existing feature
// The FeatureTemplates widget uses the 'addTemplatesDiv'
// element to display feature templates from incidentsLayer
const templates = new FeatureTemplates({
container: "addTemplatesDiv",
layers: [featureLayer]
});
var attributes;
// Listen for when a template item is selected
templates.on("select", function(evtTemplate) {
var sketchVM = new SketchViewModel({
view: view,
layer: graphicsLayer,
pointSymbol,
polylineSymbol,
polygonSymbol
});
// Call create method to create a polygon with Click.
sketchVM.create("polygon", {mode: "click"});
sketchVM.on("create-complete", addGraphic);
function addGraphic(event) {
// Create a new graphic and set its geometry to
// `create-complete` event geometry.
const graphic = new Graphic({
geometry: event.geometry,
symbol: sketchVM.createGraphic.symbol,
attributes: {}
});
graphicsLayer.add(graphic);
const edits = {
addFeatures: [graphic]
};
applyEdits(edits);
console.log(graphic);
}
function applyEdits(params) {
featureLayer.applyEdits(params).then(function(editsResult) {
// Get the objectId of the newly added feature.
// Call selectFeature function to highlight the new feature.
if (editsResult.addFeatureResults.length > 0) {
const objectId = editsResult.addFeatureResults[0].objectId;
}
})
.catch(function(error) {
console.log("===============================================");
console.error("[ applyEdits ] FAILURE: ", error.code, error.name,
error.message);
console.log("error = ", error);
});
}
});
// Expand widget for the editArea div.
const editExpand = new Expand({
expandIconClass: "esri-icon-edit",
expandTooltip: "Expand Edit",
expanded: true,
view: view,
content: document.getElementById("editArea")
});
view.ui.add(editExpand, "top-right");
// input boxes for the attribute editing
const addFeatureDiv = document.getElementById("addFeatureDiv");
const attributeEditing = document.getElementById("featureUpdateDiv");
});
</script>
</head>
<body>
<div id="editArea" class="editArea-container esri-widget--panel">
<div id="addFeatureDiv" style="display:block;">
<div id="addTemplatesDiv" style="background:#fff;"></div>
</div>
<div id="featureUpdateDiv" style="display:none; margin-top: 1em;">
<h3 class="list-heading">შეიყვანეთ ინციდენტის ინფორმაცია</h3>
<div id="attributeArea">
<div id="formDiv"></div>
<input
type="button"
class="esri-button"
value="მონაცემების ატვირთვა"
id="btnUpdate"
/>
</div>
<br />
<div id="deleteArea">
<input
type="button"
class="esri-button"
value="წაშალეთ ინციდენტი"
id="btnDelete"
/>
</div>
</div>
</div>
<div id="viewDiv"></div>
</body>
</html>
... View more
01-22-2020
12:08 AM
|
0
|
5
|
2484
|
|
POST
|
I am sorry guys, i disturbed you, but need help. Please notice that i am working In JavaScript 4.14 not in 4.9, all codes you wrote are works for 4.9 and works great, but not for 4.14; Need Help people
... View more
01-21-2020
04:45 AM
|
0
|
1
|
2484
|
|
POST
|
Hi Ken, Can you please explain? I have: var sketchVM = new SketchViewModel({
view,
layer: graphicsLayer,
pointSymbol,
polylineSymbol,
polygonSymbol
});
// Call create method to create a polygon with Click.
sketchVM.create("polygon", {mode: "click"});
// Create a new feature using one of the selected
// template items.
editFeature = new Graphic({
geometry: event.geometry,
symbol: sketchVM.graphic.symbol,
attributes: {
IncidentType: attributes.IncidentType
}
}); What i have to do more?
... View more
01-20-2020
05:49 AM
|
0
|
0
|
2484
|
|
POST
|
Hi all, I am trying to create polygon feature, in JavaScript Version 4.9 it works, but when i change it in version 4.14 it does not work. I asked how to create polygon in another Question (Create Polygon Feature: Java Script ), it seems everything OK, but sketch created sketch doesn't updates in featureLeyer (can not "Apply edits"). Here is a code from JavaScript version 4.9 that works fine, how can i update it in version 4.14? Thanks. <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Sketch View</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/css/main.css">
<script src="https://js.arcgis.com/4.9/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
font-family: verdana;
}
#topbar {
background: rgb(223, 34, 34);
position: absolute;
top: 15px;
right: 15px;
padding: 10px;
}
.action-button {
font-size: 16px;
background-color: transparent;
border: 1px solid #D3D3D3;
color: #6e6e6e;
height: 32px;
width: 32px;
text-align: center;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
}
.action-button:hover,
.action-button:focus {
background: #0079c1;
color: #e4e4e4;
}
.active {
background: #0079c1;
color: #e4e4e4;
}
#info {
padding: 14px;
border-radius: 5px;
}
#update {
padding: 6px;
}
#form {
background: #fff;
}
/* replaces esri-widget--panel */
.scroller {
overflow-x: hidden;
overflow-y: auto;
}
</style>
<script>
require([
"esri/views/MapView",
"esri/Map",
"esri/widgets/Sketch/SketchViewModel",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"esri/layers/FeatureLayer",
"esri/widgets/Expand",
"esri/widgets/FeatureForm"
], function (
MapView, Map,
SketchViewModel, Graphic, GraphicsLayer, FeatureLayer, Expand, FeatureForm
) {
let highlight, editFeature;
const featureLayer = new FeatureLayer({
url: "http://localhost:6080/arcgis/rest/services/test/Request_Area/FeatureServer/0",
outFields: ["*"],
popupEnabled: false,
id: "HotspotsLayer"
});
// GraphicsLayer to hold graphics created via sketch view model
const graphicsLayer = new GraphicsLayer({
id: "tempGraphics"
});
const map = new Map({
basemap: "gray",
layers: [graphicsLayer, featureLayer]
});
const view = new MapView({
container: "viewDiv",
map: map,
center: [44.7502, 41.725524],
zoom: 12
});
const pointSymbol = {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
style: "square",
color: "#8A2BE2",
size: "16px",
outline: { // autocasts as new SimpleLineSymbol()
color: [255, 255, 255],
width: 3
}
};
const polylineSymbol = {
type: "simple-line", // autocasts as new SimpleLineSymbol()
color: "#8A2BE2",
width: "4",
style: "dash"
};
const polygonSymbol = {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: "red",
style: "solid",
outline: {
color: "red",
width: 1
}
};
var attributes;
view.when(function () {
// create a new sketch view model
const sketchViewModel = new SketchViewModel({
view,
layer: graphicsLayer,
pointSymbol,
polylineSymbol,
polygonSymbol
});
setUpClickHandler();
// ***********************************************************
// Call FeatureLayer.applyEdits() with specified params. ეს მონაკვეთი არ მუშაობს
// ***********************************************************
function applyEdits(params) {
featureLayer.applyEdits(params).then(function(editsResult) {
// Get the objectId of the newly added feature.
// Call selectFeature function to highlight the new feature.
if (editsResult.addFeatureResults.length > 0) {
const objectId = editsResult.addFeatureResults[0].objectId;
//selectFeature(objectId);
}
})
.catch(function(error) {
console.log("===============================================");
console.error("[ applyEdits ] FAILURE: ", error.code, error.name,
error.message);
console.log("error = ", error);
});
}
// Listen to create-complete event to add a newly created graphic to view
sketchViewModel.on("create-complete", addGraphic);
// Listen the sketchViewModel's update-complete and update-cancel events
sketchViewModel.on("update-complete", updateGraphic);
sketchViewModel.on("update-cancel", updateGraphic);
// აქედან ვიწყებ ხვალ=====================================================
// called when sketchViewModel's create-complete event is fired.
function addGraphic(event) {
// Create a new graphic and set its geometry to
// `create-complete` event geometry.
const graphic = new Graphic({
geometry: event.geometry,
symbol: sketchViewModel.graphic.symbol,
attributes: attributes
});
graphicsLayer.add(graphic);
const edits = { //Fire the addFeatures function using the completed graphic
addFeatures: [graphic]
};
applyEdits(edits);
console.log(graphic);
}
// Runs when sketchViewModel's update-complete or update-cancel
// events are fired.
function updateGraphic(event) {
// Create a new graphic and set its geometry event.geometry
var graphic = new Graphic({
geometry: event.geometry,
symbol: editGraphic.symbol
});
graphicsLayer.add(graphic);
// set the editGraphic to null update is complete or cancelled.
editGraphic = null;
}
// set up logic to handle geometry update and reflect the update on "graphicsLayer"
function setUpClickHandler() {
view.on("click", function (event) {
view.hitTest(event).then(function (response) {
var results = response.results;
if (results.length > 0) {
for (var i = 0; i < results.length; i++) {
// Check if we're already editing a graphic
if (!editGraphic && results[i].graphic.layer.id === "tempGraphics") {
// Save a reference to the graphic we intend to update
editGraphic = results[i].graphic;
// Remove the graphic from the GraphicsLayer
// Sketch will handle displaying the graphic while being updated
graphicsLayer.remove(editGraphic);
sketchViewModel.update(editGraphic);
break;
}
}
}
});
});
}
// activate the sketch to create a polygon
var drawPolygonButton = document.getElementById("polygonButton");
drawPolygonButton.onclick = function () {
// set the sketch to create a polygon geometry
sketchViewModel.create("polygon");
setActiveButton(this);
};
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="topbar">
<button class="action-button esri-icon-polygon" id="polygonButton" type="button"
title="Draw polygon"></button>
</div>
<div id="info" class="esri-widget">
<h3>მონიშნეთ ობიექტი მონაცემების შესაცვლელად</h3>
</div>
<div id="update" class="esri-widget esri-hidden">
<div id="form" class="scroller esri-component"></div>
<input
type="button"
class="esri-button"
value="მონაცემების ატვირთვა"
id="btnUpdate"
/>
<br />
<div id="deleteArea">
<input
type="button"
class="esri-button"
value="წაშალეთ ინციდენტი"
id="btnDelete"
/>
</div>
</div>
</body>
</html>
... View more
01-19-2020
11:51 PM
|
0
|
1
|
1518
|
|
POST
|
Hi again, I have changed code, Robert Scheitlin, GISP helped me. I still try to configure code, use code Robert gave me and code we have in template ArcGIS API for JavaScript Sandbox. Now i can click on template, draw polygon sketch, but it does not apply edits to Featurelayer and gives error. Se images and code: templates.on("select", function(evtTemplate) {
// Access the template item's attributes from the event's
// template prototype.
attributes = evtTemplate.template.prototype.attributes;
unselectFeature();
document.getElementById("viewDiv").style.cursor = "crosshair";
// With the selected template item, listen for the view's click event and create feature
const handler = view.on("click", function(event) {
// remove click event handler once user clicks on the view
// to create a new feature
handler.remove();
event.stopPropagation();
featureForm.feature = null;
var sketchVM = new SketchViewModel({
view,
layer: graphicsLayer,
pointSymbol,
polylineSymbol,
polygonSymbol
});
// Call create method to create a polygon with Click.
sketchVM.create("polygon", {mode: "click"});
// Create a new feature using one of the selected
// template items.
editFeature = new Graphic({
geometry: event.geometry,
symbol: sketchVM.graphic.symbol,
attributes: {
IncidentType: attributes.IncidentType
}
});
// Setup the applyEdits parameter with adds.
const edits = {
addFeatures: [editFeature]
};
applyEditsToIncidents(edits);
document.getElementById("viewDiv").style.cursor = "auto";
});
});
// Call FeatureLayer.applyEdits() with specified params.
function applyEditsToIncidents(params) {
// unselectFeature();
featureLayer
.applyEdits(params)
.then(function(editsResult) {
// Get the objectId of the newly added feature.
// Call selectFeature function to highlight the new feature.
if (
editsResult.addFeatureResults.length > 0 ||
editsResult.updateFeatureResults.length > 0
) {
unselectFeature();
let objectId;
if (editsResult.addFeatureResults.length > 0) {
objectId = editsResult.addFeatureResults[0].objectId;
} else {
featureForm.feature = null;
objectId = editsResult.updateFeatureResults[0].objectId;
}
selectFeature(objectId);
if (addFeatureDiv.style.display === "block") {
toggleEditingDivs("none", "block");
}
}
// show FeatureTemplates if user deleted a feature
else if (editsResult.deleteFeatureResults.length > 0) {
toggleEditingDivs("block", "none");
}
})
.catch(function(error) {
console.log("===============================================");
console.error(
"[ applyEdits ] FAILURE: ",
error.code,
error.name,
error.message
);
console.log("error = ", error);
});
}
... View more
01-17-2020
05:13 AM
|
0
|
2
|
5957
|
|
POST
|
Dear Robert, I changed you code using 4.14 version of create sketch polygon, now i can draw polygon click on template in form, but can't update in featureLayer, it seems everything ok, but does not work: const templates = new FeatureTemplates({
container: "addTemplatesDiv",
layers: [featureLayer]
});
// Listen for when a template item is selected
templates.on("select", function(evtTemplate) {
var sketchVM = new SketchViewModel({
view,
layer: graphicsLayer,
layer: graphicsLayer,
pointSymbol,
polylineSymbol,
polygonSymbol
});
// Call create method to create a polygon with Click.
sketchVM.create("polygon", {mode: "click"});
sketchVM.on("create-complete", addGraphic);
function addGraphic(event) {
// Create a new graphic and set its geometry to
// `create-complete` event geometry.
const graphic = new Graphic({
geometry: event.geometry,
symbol: sketchVM.graphic.symbol,
attributes: attributes
});
graphicsLayer.add(graphic);
const edits = {
addFeatures: [graphic]
};
applyEdits(edits);
console.log(graphic);
}
function applyEdits(params) {
featureLayer.applyEdits(params).then(function(editsResult) {
// Get the objectId of the newly added feature.
// Call selectFeature function to highlight the new feature.
if (editsResult.addFeatureResults.length > 0) {
const objectId = editsResult.addFeatureResults[0].objectId;
}
})
.catch(function(error) {
console.log("===============================================");
console.error("[ applyEdits ] FAILURE: ", error.code, error.name,
error.message);
console.log("error = ", error);
});
}
});
... View more
01-16-2020
04:23 AM
|
0
|
0
|
5957
|
|
POST
|
Robert, I tried to follow your suggestion, add some part of code to add just polygon, but i stacked // Listen for when a template item is selected templates.on("select", function(evtTemplate) { // Access the template item's attributes from the event's // template prototype. attributes = evtTemplate.template.prototype.attributes; unselectFeature(); document.getElementById("viewDiv").style.cursor = "crosshair"; // With the selected template item, listen for the view's click event and create feature const handler = view.on("click", function(event) { var sketchViewModel = new SketchViewModel({ view, layer: graphicsLayer, pointSymbol, polylineSymbol, polygonSymbol }); setUpClickHandler(); // *********************************************************** // Call FeatureLayer.applyEdits() with specified params. ეს მონაკვეთი არ მუშაობს // *********************************************************** function applyEdits(params) { featureLayer.applyEdits(params).then(function(editsResult) { // Get the objectId of the newly added feature. // Call selectFeature function to highlight the new feature. if (editsResult.addFeatureResults.length > 0) { const objectId = editsResult.addFeatureResults[0].objectId; //selectFeature(objectId); } }) .catch(function(error) { console.log("==============================================="); console.error("[ applyEdits ] FAILURE: ", error.code, error.name, error.message); console.log("error = ", error); }); } // Listen to create-complete event to add a newly created graphic to view sketchViewModel.on("create-complete", addGraphic); // Listen the sketchViewModel's update-complete and update-cancel events sketchViewModel.on("update-complete", updateGraphic); sketchViewModel.on("update-cancel", updateGraphic); // აქედან ვიწყებ ხვალ===================================================== // called when sketchViewModel's create-complete event is fired. function addGraphic(event) { // Create a new graphic and set its geometry to // `create-complete` event geometry. const graphic = new Graphic({ geometry: event.geometry, symbol: sketchViewModel.graphic.symbol, attributes: {} }); graphicsLayer.add(graphic); const edits = { //Fire the addFeatures function using the completed graphic addFeatures: [graphic] }; applyEdits(edits); console.log(graphic); } // Runs when sketchViewModel's update-complete or update-cancel // events are fired. function updateGraphic(event) { // Create a new graphic and set its geometry event.geometry var graphic = new Graphic({ geometry: event.geometry, symbol: editGraphic.symbol }); graphicsLayer.add(graphic); // set the editGraphic to null update is complete or cancelled. editGraphic = null; } // set up logic to handle geometry update and reflect the update on "graphicsLayer" function setUpClickHandler() { view.on("click", function (event) { view.hitTest(event).then(function (response) { var results = response.results; if (results.length > 0) { for (var i = 0; i < results.length; i++) { // Check if we're already editing a graphic if (!editGraphic && results[i].graphic.layer.id === "tempGraphics") { // Save a reference to the graphic we intend to update editGraphic = results[i].graphic; // Remove the graphic from the GraphicsLayer // Sketch will handle displaying the graphic while being updated graphicsLayer.remove(editGraphic); sketchViewModel.update(editGraphic); break; } } } }); }); } }); });
... View more
01-15-2020
05:43 AM
|
0
|
2
|
5957
|
|
POST
|
Thanks Undral, but i need to use custom Form and also want to see how code works itself for future purposes.
... View more
01-12-2020
11:25 PM
|
0
|
0
|
5957
|
|
POST
|
Dear Robert, I added some changes you can see from line 244 to line 256, but still no success. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>Update FeatureLayer using applyEdits() - 4.14</title> <link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css" /> <script src="https://js.arcgis.com/4.14/"></script> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } #formDiv { width: 100%; } .esri-item-list__scroller { overflow-y: visible; } .editArea-container { background: #fff; line-height: 1.5em; overflow: auto; padding: 12px 15px; width: 300px; } .list-heading { font-weight: normal; margin-top: 20px; margin-bottom: 10px; color: #323232; } .or-wrap { background-color: #e0e0e0; height: 1px; margin: 2em 0; overflow: visible; } .or-text { background: #fff; line-height: 0; padding: 0 1em; position: relative; bottom: 0.75em; } /* override default styles */ .esri-feature-form { background: #fff; } .esri-feature-templates { width: 256px; } .esri-feature-templates__section-header { display: none; } .esri-feature-templates__section { box-shadow: none; } .esri-feature-templates__scroller { max-height: 200px; } </style> <script> require([ "esri/Map", "esri/views/MapView", "esri/widgets/Sketch/SketchViewModel", "esri/layers/FeatureLayer", "esri/Graphic", "esri/layers/GraphicsLayer", "esri/widgets/Expand", "esri/widgets/FeatureForm", "esri/widgets/FeatureTemplates" ], function( Map, MapView, SketchViewModel, FeatureLayer, Graphic, GraphicsLayer, Expand, FeatureForm, FeatureTemplates ) { let editFeature, highlight; const featureLayer = new FeatureLayer({ url: "http://localhost:6080/arcgis/rest/services/test/Request_Area/FeatureServer/0", title:"ქუჩების ფენა", outFields: ["*"], popupEnabled: false, id: "incidentsLayer" }); // GraphicsLayer to hold graphics created via sketch view model const graphicsLayer = new GraphicsLayer({ id: "tempGraphics" }); const map = new Map({ basemap: "dark-gray", layers: [graphicsLayer, featureLayer] }); const view = new MapView({ container: "viewDiv", map: map, center: [44.7502, 41.725524], zoom: 12, highlightOptions: { color: "red" } }); //****************************-სიმბოლოები პოლიგონისთვის-*********************** var pointSymbol = { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() style: "square", color: "#8A2BE2", size: "16px", outline: { // autocasts as new SimpleLineSymbol() color: [255, 255, 255], width: 3 } }; var polylineSymbol = { type: "simple-line", // autocasts as new SimpleLineSymbol() color: "#8A2BE2", width: "4", style: "dash" }; var polygonSymbol = { type: "simple-fill", // autocasts as new SimpleFillSymbol() color: "red", style: "solid", outline: { color: "red", width: 1 } }; // New FeatureForm and set its layer to 'Incidents' FeatureLayer. // FeatureForm displays attributes of fields specified in fieldConfig. const featureForm = new FeatureForm({ container: "formDiv", layer: featureLayer, fieldConfig: [ { name: "Req_Code", label: "REQ კოდი" }, { name: "abonentebis_raodenoba", label: "აბონენტების რაოდენობა" } ] }); // Listen to the feature form's submit event. // Update feature attributes shown in the form. featureForm.on("submit", function() { if (editFeature) { // Grab updated attributes from the form. const updated = featureForm.getValues(); // Loop through updated attributes and assign // the updated values to feature attributes. Object.keys(updated).forEach(function(name) { editFeature.attributes[name] = updated[name]; }); // Setup the applyEdits parameter with updates. const edits = { updateFeatures: [editFeature] }; applyEditsToIncidents(edits); document.getElementById("viewDiv").style.cursor = "auto"; } }); // Check if the user clicked on the existing feature selectExistingFeature(); // The FeatureTemplates widget uses the 'addTemplatesDiv' // element to display feature templates from incidentsLayer const templates = new FeatureTemplates({ container: "addTemplatesDiv", layers: [featureLayer] }); // Listen for when a template item is selected templates.on("select", function(evtTemplate) { // Access the template item's attributes from the event's // template prototype. attributes = evtTemplate.template.prototype.attributes; unselectFeature(); document.getElementById("viewDiv").style.cursor = "crosshair"; // With the selected template item, listen for the view's click event and create feature const handler = view.on("click", function(event) { // remove click event handler once user clicks on the view // to create a new feature handler.remove(); event.stopPropagation(); featureForm.feature = null; var sketchViewModel = new SketchViewModel({ view, layer: graphicsLayer, pointSymbol, polylineSymbol, polygonSymbol }); setUpClickHandler(); if (event.mapPoint) { point = event.mapPoint.clone(); point.z = undefined; point.hasZ = false; // Create a new feature using one of the selected // template items. function addGraphic(event) { // Create a new graphic and set its geometry to // `create-complete` event geometry. const graphic = new Graphic({ geometry: event.geometry, symbol: sketchViewModel.graphic.symbol, attributes: { IncidentType: attributes.IncidentType } }); graphicsLayer.add(graphic); const edits = { //Fire the addFeatures function using the completed graphic addFeatures: [graphic] }; applyEdits(edits); console.log(graphic); } applyEditsToIncidents(edits); document.getElementById("viewDiv").style.cursor = "auto"; } else { console.error("event.mapPoint is not defined"); } }); }); // Call FeatureLayer.applyEdits() with specified params. function applyEditsToIncidents(params) { // unselectFeature(); featureLayer .applyEdits(params) .then(function(editsResult) { // Get the objectId of the newly added feature. // Call selectFeature function to highlight the new feature. if ( editsResult.addFeatureResults.length > 0 || editsResult.updateFeatureResults.length > 0 ) { unselectFeature(); let objectId; if (editsResult.addFeatureResults.length > 0) { objectId = editsResult.addFeatureResults[0].objectId; } else { featureForm.feature = null; objectId = editsResult.updateFeatureResults[0].objectId; } selectFeature(objectId); if (addFeatureDiv.style.display === "block") { toggleEditingDivs("none", "block"); } } // show FeatureTemplates if user deleted a feature else if (editsResult.deleteFeatureResults.length > 0) { toggleEditingDivs("block", "none"); } }) .catch(function(error) { console.log("==============================================="); console.error( "[ applyEdits ] FAILURE: ", error.code, error.name, error.message ); console.log("error = ", error); }); } // Check if a user clicked on an incident feature. function selectExistingFeature() { view.on("click", function(event) { // clear previous feature selection unselectFeature(); if ( document.getElementById("viewDiv").style.cursor != "crosshair" ) { view.hitTest(event).then(function(response) { // If a user clicks on an incident feature, select the feature. if (response.results.length === 0) { toggleEditingDivs("block", "none"); } else if ( response.results[0].graphic && response.results[0].graphic.layer.id == "incidentsLayer" ) { if (addFeatureDiv.style.display === "block") { toggleEditingDivs("none", "block"); } selectFeature( response.results[0].graphic.attributes[ featureLayer.objectIdField ] ); } }); } }); } // Highlights the clicked feature and display // the feature form with the incident's attributes. function selectFeature(objectId) { // query feature from the server featureLayer .queryFeatures({ objectIds: [objectId], outFields: ["*"], returnGeometry: true }) .then(function(results) { if (results.features.length > 0) { editFeature = results.features[0]; // display the attributes of selected feature in the form featureForm.feature = editFeature; // highlight the feature on the view view.whenLayerView(editFeature.layer).then(function(layerView) { highlight = layerView.highlight(editFeature); }); } }); } // Expand widget for the editArea div. const editExpand = new Expand({ expandIconClass: "esri-icon-edit", expandTooltip: "Expand Edit", expanded: true, view: view, content: document.getElementById("editArea") }); view.ui.add(editExpand, "top-right"); // input boxes for the attribute editing const addFeatureDiv = document.getElementById("addFeatureDiv"); const attributeEditing = document.getElementById("featureUpdateDiv"); // Controls visibility of addFeature or attributeEditing divs function toggleEditingDivs(addDiv, attributesDiv) { addFeatureDiv.style.display = addDiv; attributeEditing.style.display = attributesDiv; document.getElementById( "updateInstructionDiv" ).style.display = addDiv; } // Remove the feature highlight and remove attributes // from the feature form. function unselectFeature() { if (highlight) { highlight.remove(); } } // Update attributes of the selected feature. document.getElementById("btnUpdate").onclick = function() { // Fires feature form's submit event. featureForm.submit(); }; // Delete the selected feature. ApplyEdits is called // with the selected feature to be deleted. document.getElementById("btnDelete").onclick = function() { // setup the applyEdits parameter with deletes. const edits = { deleteFeatures: [editFeature] }; applyEditsToIncidents(edits); document.getElementById("viewDiv").style.cursor = "auto"; }; }); </script> </head> <body> <div id="editArea" class="editArea-container esri-widget--panel"> <div id="addFeatureDiv" style="display:block;"> <h3 class="list-heading">Report Incidents</h3> <ul style="font-size: 13px; padding-left: 1.5em;"> <li>აირჩიეთ ფენა ჩამოათვალიდან</li> <li>დააწკაპეთ რუკაზე რომ დაამატოთ ახალი ობიექტი</li> <li>დაკავშირებული მონაცემების ატვირთვა</li> <li>დააწკაპეთ <i>მონაცემების ატვირთვა</i></li> </ul> <div id="addTemplatesDiv" style="background:#fff;"></div> </div> <div id="featureUpdateDiv" style="display:none; margin-top: 1em;"> <h3 class="list-heading">შეიყვანეთ ინციდენტის ინფორმაცია</h3> <div id="attributeArea"> <div id="formDiv"></div> <input type="button" class="esri-button" value="მონაცემების ატვირთვა" id="btnUpdate" /> </div> <br /> <div id="deleteArea"> <input type="button" class="esri-button" value="წაშალეთ ინციდენტი" id="btnDelete" /> </div> </div> <div id="updateInstructionDiv" style="text-align:center; display:block"> <p class="or-wrap"><span class="or-text">ან</span></p> <p id="selectHeader">მონიშნეთ ინციდენტი რომ წაშალოთ ან შეცვალოთ.</p> </div> </div> <div id="viewDiv"></div> </body> </html>
... View more
01-12-2020
11:22 PM
|
0
|
4
|
5957
|
|
POST
|
Hi guys, I am trying to use ArcGIS API for JavaScript Sandbox this sample to add polygon feature, i also use codes taking from here https://community.esri.com/thread/224031-how-to-create-a-polygon-js-api-49?commentID=811443&et=watches.email.thread#comment-811443 from Robert Scheitlin, GISP, but can not combine this two sample to add polygon and update attributes. Thank you for your help Here is a code samples i use (you can see them in links too): // ***********************************************************
// Call FeatureLayer.applyEdits() with specified params.
// ***********************************************************
function applyEdits(params) {
featureLayer.applyEdits(params).then(function(editsResult) {
// Get the objectId of the newly added feature.
// Call selectFeature function to highlight the new feature.
if (editsResult.addFeatureResults.length > 0) {
const objectId = editsResult.addFeatureResults[0].objectId;
//selectFeature(objectId);
}
}) // called when sketchViewModel's create-complete event is fired.
function addGraphic(event) {
// Create a new graphic and set its geometry to
// `create-complete` event geometry.
const graphic = new Graphic({
geometry: event.geometry,
symbol: sketchViewModel.graphic.symbol,
attributes: {}
}); <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>Update FeatureLayer using applyEdits() - 4.14</title> <link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css" /> <script src="https://js.arcgis.com/4.14/"></script> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } #formDiv { width: 100%; } .esri-item-list__scroller { overflow-y: visible; } .editArea-container { background: #fff; line-height: 1.5em; overflow: auto; padding: 12px 15px; width: 300px; } .list-heading { font-weight: normal; margin-top: 20px; margin-bottom: 10px; color: #323232; } .or-wrap { background-color: #e0e0e0; height: 1px; margin: 2em 0; overflow: visible; } .or-text { background: #fff; line-height: 0; padding: 0 1em; position: relative; bottom: 0.75em; } /* override default styles */ .esri-feature-form { background: #fff; } .esri-feature-templates { width: 256px; } .esri-feature-templates__section-header { display: none; } .esri-feature-templates__section { box-shadow: none; } .esri-feature-templates__scroller { max-height: 200px; } </style> <script> require([ "esri/Map", "esri/views/MapView", "esri/widgets/Sketch/SketchViewModel", "esri/layers/FeatureLayer", "esri/Graphic", "esri/layers/GraphicsLayer", "esri/widgets/Expand", "esri/widgets/FeatureForm", "esri/widgets/FeatureTemplates" ], function( Map, MapView, SketchViewModel, FeatureLayer, Graphic, GraphicsLayer, Expand, FeatureForm, FeatureTemplates ) { let editFeature, highlight; const featureLayer = new FeatureLayer({ url: "http://localhost:6080/arcgis/rest/services/test/Request_Area/FeatureServer/0", title:"ქუჩების ფენა", outFields: ["*"], popupEnabled: false, id: "incidentsLayer" }); // GraphicsLayer to hold graphics created via sketch view model const graphicsLayer = new GraphicsLayer({ id: "tempGraphics" }); const map = new Map({ basemap: "dark-gray", layers: [graphicsLayer, featureLayer] }); const view = new MapView({ container: "viewDiv", map: map, center: [44.7502, 41.725524], zoom: 12 }); //****************************-სიმბოლოები პოლიგონისთვის-*********************** const pointSymbol = { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() style: "square", color: "#8A2BE2", size: "16px", outline: { // autocasts as new SimpleLineSymbol() color: [255, 255, 255], width: 3 } }; const polylineSymbol = { type: "simple-line", // autocasts as new SimpleLineSymbol() color: "#8A2BE2", width: "4", style: "dash" }; const polygonSymbol = { type: "simple-fill", // autocasts as new SimpleFillSymbol() color: "red", style: "solid", outline: { color: "red", width: 1 } }; // New FeatureForm and set its layer to 'Incidents' FeatureLayer. // FeatureForm displays attributes of fields specified in fieldConfig. const featureForm = new FeatureForm({ container: "formDiv", layer: featureLayer, fieldConfig: [ { name: "Req_Code", label: "REQ კოდი" }, { name: "abonentebis_raodenoba", label: "აბონენტების რაოდენობა" } ] }); // Listen to the feature form's submit event. // Update feature attributes shown in the form. featureForm.on("submit", function() { if (editFeature) { // Grab updated attributes from the form. const updated = featureForm.getValues(); // Loop through updated attributes and assign // the updated values to feature attributes. Object.keys(updated).forEach(function(name) { editFeature.attributes[name] = updated[name]; }); // Setup the applyEdits parameter with updates. const edits = { updateFeatures: [editFeature] }; applyEditsToIncidents(edits); document.getElementById("viewDiv").style.cursor = "auto"; } }); // Check if the user clicked on the existing feature selectExistingFeature(); // The FeatureTemplates widget uses the 'addTemplatesDiv' // element to display feature templates from incidentsLayer const templates = new FeatureTemplates({ container: "addTemplatesDiv", layers: [featureLayer] }); // Listen for when a template item is selected templates.on("select", function(evtTemplate) { // Access the template item's attributes from the event's // template prototype. attributes = evtTemplate.template.prototype.attributes; unselectFeature(); document.getElementById("viewDiv").style.cursor = "crosshair"; // With the selected template item, listen for the view's click event and create feature const handler = view.on("click", function(event) { // remove click event handler once user clicks on the view // to create a new feature handler.remove(); event.stopPropagation(); featureForm.feature = null; if (event.mapPoint) { point = event.mapPoint.clone(); point.z = undefined; point.hasZ = false; // Create a new feature using one of the selected // template items. editFeature = new Graphic({ geometry: point, attributes: { IncidentType: attributes.IncidentType } }); // Setup the applyEdits parameter with adds. const edits = { addFeatures: [editFeature] }; applyEditsToIncidents(edits); document.getElementById("viewDiv").style.cursor = "auto"; } else { console.error("event.mapPoint is not defined"); } }); }); // Call FeatureLayer.applyEdits() with specified params. function applyEditsToIncidents(params) { // unselectFeature(); featureLayer .applyEdits(params) .then(function(editsResult) { // Get the objectId of the newly added feature. // Call selectFeature function to highlight the new feature. if ( editsResult.addFeatureResults.length > 0 || editsResult.updateFeatureResults.length > 0 ) { unselectFeature(); let objectId; if (editsResult.addFeatureResults.length > 0) { objectId = editsResult.addFeatureResults[0].objectId; } else { featureForm.feature = null; objectId = editsResult.updateFeatureResults[0].objectId; } selectFeature(objectId); if (addFeatureDiv.style.display === "block") { toggleEditingDivs("none", "block"); } } // show FeatureTemplates if user deleted a feature else if (editsResult.deleteFeatureResults.length > 0) { toggleEditingDivs("block", "none"); } }) .catch(function(error) { console.log("==============================================="); console.error( "[ applyEdits ] FAILURE: ", error.code, error.name, error.message ); console.log("error = ", error); }); } // Check if a user clicked on an incident feature. function selectExistingFeature() { view.on("click", function(event) { // clear previous feature selection unselectFeature(); if ( document.getElementById("viewDiv").style.cursor != "crosshair" ) { view.hitTest(event).then(function(response) { // If a user clicks on an incident feature, select the feature. if (response.results.length === 0) { toggleEditingDivs("block", "none"); } else if ( response.results[0].graphic && response.results[0].graphic.layer.id == "incidentsLayer" ) { if (addFeatureDiv.style.display === "block") { toggleEditingDivs("none", "block"); } selectFeature( response.results[0].graphic.attributes[ featureLayer.objectIdField ] ); } }); } }); } // Highlights the clicked feature and display // the feature form with the incident's attributes. function selectFeature(objectId) { // query feature from the server featureLayer .queryFeatures({ objectIds: [objectId], outFields: ["*"], returnGeometry: true }) .then(function(results) { if (results.features.length > 0) { editFeature = results.features[0]; // display the attributes of selected feature in the form featureForm.feature = editFeature; // highlight the feature on the view view.whenLayerView(editFeature.layer).then(function(layerView) { highlight = layerView.highlight(editFeature); }); } }); } // Expand widget for the editArea div. const editExpand = new Expand({ expandIconClass: "esri-icon-edit", expandTooltip: "Expand Edit", expanded: true, view: view, content: document.getElementById("editArea") }); view.ui.add(editExpand, "top-right"); // input boxes for the attribute editing const addFeatureDiv = document.getElementById("addFeatureDiv"); const attributeEditing = document.getElementById("featureUpdateDiv"); // Controls visibility of addFeature or attributeEditing divs function toggleEditingDivs(addDiv, attributesDiv) { addFeatureDiv.style.display = addDiv; attributeEditing.style.display = attributesDiv; document.getElementById( "updateInstructionDiv" ).style.display = addDiv; } // Remove the feature highlight and remove attributes // from the feature form. function unselectFeature() { if (highlight) { highlight.remove(); } } // Update attributes of the selected feature. document.getElementById("btnUpdate").onclick = function() { // Fires feature form's submit event. featureForm.submit(); }; // Delete the selected feature. ApplyEdits is called // with the selected feature to be deleted. document.getElementById("btnDelete").onclick = function() { // setup the applyEdits parameter with deletes. const edits = { deleteFeatures: [editFeature] }; applyEditsToIncidents(edits); document.getElementById("viewDiv").style.cursor = "auto"; }; }); </script> </head> <body> <div id="editArea" class="editArea-container esri-widget--panel"> <div id="addFeatureDiv" style="display:block;"> <h3 class="list-heading">Report Incidents</h3> <ul style="font-size: 13px; padding-left: 1.5em;"> <li>აირჩიეთ ფენა ჩამოათვალიდან</li> <li>დააწკაპეთ რუკაზე რომ დაამატოთ ახალი ობიექტი</li> <li>დაკავშირებული მონაცემების ატვირთვა</li> <li>დააწკაპეთ <i>მონაცემების ატვირთვა</i></li> </ul> <div id="addTemplatesDiv" style="background:#fff;"></div> </div> <div id="featureUpdateDiv" style="display:none; margin-top: 1em;"> <h3 class="list-heading">შეიყვანეთ ინციდენტის ინფორმაცია</h3> <div id="attributeArea"> <div id="formDiv"></div> <input type="button" class="esri-button" value="მონაცემების ატვირთვა" id="btnUpdate" /> </div> <br /> <div id="deleteArea"> <input type="button" class="esri-button" value="წაშალეთ ინციდენტი" id="btnDelete" /> </div> </div> <div id="updateInstructionDiv" style="text-align:center; display:block"> <p class="or-wrap"><span class="or-text">ან</span></p> <p id="selectHeader">მონიშნეთ ინციდენტი რომ წაშალოთ ან შეცვალოთ.</p> </div> </div> <div id="viewDiv"></div> </body> </html>
... View more
01-09-2020
11:27 PM
|
0
|
20
|
9609
|
|
POST
|
Thank you Robert, this is exactly it what i wanted. You are great as always. Happy new year.
... View more
12-26-2019
09:45 PM
|
0
|
0
|
5730
|
|
POST
|
Hi guys, Need your help. I have code, Anne Fitz helped me. I make selection (highlight) of features on click and clear highlights when click on "Clear highlights" button. Now i want to unselect selected feature when click on Right mouse button, so others have to stay selected. I make some changes, but it became funny map, it does job vice versa, i cant select (highlight) when click on left button of mouse, but i can select when click Right one. You can see on my uploaded code. Help please <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <!-- ArcGIS API for JavaScript, https://js.arcgis.com For more information about the view-hittest sample, read the original sample description at developers.arcgis.com. https://developers.arcgis.com/javascript/latest/sample-code/view-hittest/index.html --> <title>Access features with pointer events - 4.14</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } #clearHighlights { background-color: black; opacity: 0.75; color: orange; font-size: 12pt; padding: 8px; cursor: pointer; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css" /> <script src="https://js.arcgis.com/4.14/"></script> <script> require([ "esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer" ], function(Map, MapView, FeatureLayer) { const hurricanesLayer = new FeatureLayer({ url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Hurricanes/MapServer/1", outFields: ["*"] }); const map = new Map({ basemap: "dark-gray", layers: [hurricanesLayer] }); const view = new MapView({ container: "viewDiv", map: map, center: [-61.125537, 35.863534], zoom: 4, highlightOptions: { color: "orange" } }); view.ui.add("clearHighlights", "top-right"); view .when() .then(function() { return hurricanesLayer.when(); }) .then(function(layer) { const renderer = layer.renderer.clone(); renderer.symbol.width = 4; renderer.symbol.color = [128, 128, 128, 0.8]; layer.renderer = renderer; // Set up an event handler for pointer-down (mobile) // and pointer-move events (mouse) // and retrieve the screen x, y coordinates return view.whenLayerView(layer); }) .then(function(layerView) { //view.on("pointer-move", eventHandler); view.on("pointer-down", eventHandler); const clearBtn = document.getElementById("clearHighlights") clearBtn.addEventListener("click", clearHighlights); let highlightedObjs = []; let highlight; function eventHandler(event) { // the hitTest() checks to see if any graphics in the view // intersect the x, y coordinates of the pointer console.log("clicked"); view.hitTest(event).then(getGraphics); } let currentYear, currentName; function getGraphics(response) { console.log(response); // the topmost graphic from the hurricanesLayer // and display select attribute values from the // graphic to the user if (response.results.length) { const graphic = response.results.filter(function(result) { return result.graphic.layer === hurricanesLayer; })[0].graphic; const attributes = graphic.attributes; const name = attributes.NAME; const year = attributes.YEAR; // highlight all features belonging to the same hurricane as the feature // returned from the hitTest const query = layerView.createQuery(); query.where = "YEAR = " + year + " AND NAME = '" + name + "'"; layerView.queryObjectIds(query).then(function(ids) { // remove highlight if already defined if (highlight) { highlight.remove(); } // create array from existing highlighted objs + items returned from query var arr = highlightedObjs.concat(ids); console.log(arr); // highlight all objs in array highlight = layerView.highlight(arr); highlightedObjs = arr; }); } } view.on("click", eventHandler); function eventHandler(event) { if (event.button === 2) { view.hitTest(event).then(function (evt) { getGraphics(evt, event); }); } if (highlight) { highlight.remove(); highlight = null; } } function clearHighlights(){ // clear array of highlighted objs and remove highlights highlightedObjs = []; highlight.remove(); } }); }); </script> </head> <body> <div id="viewDiv"></div> <div id="clearHighlights"> Clear Highlights </div> </body> </html>
... View more
12-26-2019
03:09 AM
|
0
|
2
|
5972
|
My kudoed posts
| Title | Kudos | Posted |
|---|---|---|
| 1 | 08-22-2022 11:57 PM | |
| 1 | 08-31-2022 12:41 AM | |
| 1 | 08-23-2022 02:49 AM | |
| 1 | 05-10-2022 05:12 AM | |
| 1 | 01-13-2022 10:03 AM |
Activity Feed
- Posted Get Total length of polyline feature Layer on ArcGIS JavaScript Maps SDK Questions. 05-12-2025 10:57 AM
- Posted Re: Enable all layers for snapping on ArcGIS JavaScript Maps SDK Questions. 10-29-2024 04:22 AM
- Kudoed Re: Enable all layers for snapping for Sage_Wall. 10-29-2024 04:20 AM
- Posted Enable all layers for snapping on ArcGIS JavaScript Maps SDK Questions. 10-28-2024 11:27 PM
- Tagged Enable all layers for snapping on ArcGIS JavaScript Maps SDK Questions. 10-28-2024 11:27 PM
- Posted Re: Disable selection on featurelayer on ArcGIS JavaScript Maps SDK Questions. 05-19-2024 10:59 PM
- Kudoed Re: Disable selection on featurelayer for JeffreyThompson2. 05-19-2024 10:59 PM
- Posted Disable selection on featurelayer on ArcGIS JavaScript Maps SDK Questions. 05-16-2024 05:14 AM
- Posted Re: Get Length of feature from FeaturteServer layer on ArcGIS JavaScript Maps SDK Questions. 05-13-2024 01:38 AM
- Posted Re: Get coordinates of polyline on ArcGIS JavaScript Maps SDK Questions. 05-12-2024 11:42 PM
- Kudoed Re: Get coordinates of polyline for JamesIng. 05-12-2024 11:40 PM
- Posted Get coordinates of polyline on ArcGIS JavaScript Maps SDK Questions. 04-15-2024 08:40 AM
- Tagged Get coordinates of polyline on ArcGIS JavaScript Maps SDK Questions. 04-15-2024 08:40 AM
- Tagged Get coordinates of polyline on ArcGIS JavaScript Maps SDK Questions. 04-15-2024 08:40 AM
- Posted Get Length of feature from FeaturteServer layer on ArcGIS JavaScript Maps SDK Questions. 03-28-2024 05:35 AM
- Posted Re: Shop popup on hover and unselect selected feature on ArcGIS JavaScript Maps SDK Questions. 03-03-2024 10:08 PM
- Kudoed Re: Shop popup on hover and unselect selected feature for JoelBennett. 03-03-2024 10:07 PM
- Posted Shop popup on hover and unselect selected feature on ArcGIS JavaScript Maps SDK Questions. 02-29-2024 05:17 AM
- Posted Re: Server crashes when switch to https on Esri Geoportal Server Questions. 12-07-2023 12:59 AM
- Posted Server crashes when switch to https on Esri Geoportal Server Questions. 12-06-2023 04:31 AM
Contact Me
| Online Status |
Offline
|
| Date Last Visited |
05-13-2025
03:20 AM
|