How to customize the sketch widget?

SiyabongaKubeka — Tue, 23 Jun 2020 06:21:50 GMT

Hi All

I gave a widget that I want ti customize by removing the following items on it:

1. Draw a circle.

2. Draw a rectangle,

3. Draw a point

4. Draw a polyline.

I only want the draw polygon item. How do I do that? Please see my code below:

const featureLayerUrl = 'https://portal.environment.gov.za/server/rest/services/Boundary/Wards/MapServer/0';
var webmap = new WebMap({
portalItem: {
id: "04582be14885483da48f29398960f653"
}
});

var graphicsLayer = new GraphicsLayer();

var view = new MapView({
map: webmap,
container: "viewDiv",
popup: null
});

var featureLayer = new FeatureLayer({
url: featureLayerUrl
});

webmap.add(featureLayer);

webmap.layers.add(graphicsLayer);

var sketch = new Sketch({
layer: graphicsLayer,
view: view,
creationMode: "update",

});

view.ui.add(sketch, {
position: "top-right"
});

sketch.on('create', function (event) {
// check if the create event's state has changed to complete indicating
// the graphic create operation is completed.
if (event.state === "complete") {

if (view.zoom >= 11) {
let gra = event.graphic.clone();
event.graphic.layer.removeAll();
gra.symbol.color = "red";
gra.layer.add(gra);
console.log(view.zoom);
console.log("X = ", gra.geometry.x);
console.log("Y = ", gra.geometry.y);
console.log("Lat = ", event.graphic.geometry.latitude);
console.log("Long = ", event.graphic.geometry.longitude);
lat = event.graphic.geometry.latitude;
lon = event.graphic.geometry.longitude;
zoomLevel = view.zoom;
for (var i = 0; i < gra.geometry.rings.length; i++){
for (var p = 0; p < gra.geometry.rings.length; p++){
crmLatitude = String(gra.geometry.rings);
crmLongitude = String(gra.geometry.rings

);
var LatLon = String(gra.geometry.rings

);
console.log(LatLon);
latlon = LatLon;

}
}
debugger;
}
else{
alert("please zoom in");
event.graphic.layer.remove(event.graphic);
}
}

});

view.on('click', function(event){
var queryTask = new QueryTask({
url: featureLayerUrl
});
var query = new Query();
query.geometry = view.toMap(event);
query.distance = 0;
query.units = "meters";
query.spatialRelationship = "intersects";
query.returnGeometry = true;
query.outFields = [ "PROVINCE", "DCS12_NAME", "S12_NAME", "WARD_NO" ];

queryTask.execute(query).then(function(results){

var feat = results.features[0];
provinces = feat.attributes.PROVINCE;
wards = feat.attributes.WARD_NO;
districts = feat.attributes.DCS12_NAME;
municipalities = feat.attributes.S12_NAME

console.log(provinces);
console.log(wards);
console.log(districts);
console.log(municipalities);

//Call to CRM to populate the lookup field for Province

debugger;

window.parent.Xrm.WebApi.online.retrieveMultipleRecords("dea_province", "?$select=dea_name,dea_provinceid&$filter=dea_name eq '" + provinces + "'").then(
function success(results) {
debugger;
for (var i = 0; i < results.entities.length; i++) {
var dea_name = results.entities["dea_name"];
var dea_provinceid = results.entities["dea_provinceid"];
console.log(dea_name);
console.log(dea_provinceid);

//Populate lookup
var lookupValue = new Array();
lookupValue[0] = new Object();
lookupValue[0].id = dea_provinceid; // GUID of the lookup id
lookupValue[0].name = dea_name; // Name of the lookup
lookupValue[0].entityType = "dea_province"; //Entity Type of the lookup entity
window.parent.Xrm.Page.getAttribute("dea_province").setValue(lookupValue);
}
},
function(error) {
Xrm.Utility.alertDialog(error.message);
}
);

//Call to CRM to populate the lookup field for the Local Municipality

window.parent.Xrm.WebApi.online.retrieveMultipleRecords("dea_localmunicipality", "?$select=dea_localmunicipalityid,dea_name&$filter=dea_name eq '" + municipalities + "'").then(
function success(results) {
for (var i = 0; i < results.entities.length; i++) {
var dea_localmunicipalityid = results.entities["dea_localmunicipalityid"];
var dea_name = results.entities["dea_name"];
console.log(dea_name);
console.log(dea_localmunicipalityid);

//Populate lookup
var lookupValue = new Array();
lookupValue[0] = new Object();
lookupValue[0].id = dea_localmunicipalityid; // GUID of the lookup id
lookupValue[0].name = dea_name; // Name of the lookup
lookupValue[0].entityType = "dea_localmunicipality"; //Entity Type of the lookup entity
window.parent.Xrm.Page.getAttribute("dea_localmunicipality").setValue(lookupValue);
}
},
function(error) {
Xrm.Utility.alertDialog(error.message);
}
);

//Call to CRM to populate the lookup field for Ward ID

debugger;
window.parent.Xrm.WebApi.online.retrieveMultipleRecords("dea_wardid", "?$select=dea_name,dea_wardidid&$filter=dea_name eq '" + wards + "'").then(
function success(results) {
for (var i = 0; i < results.entities.length; i++) {
var dea_name = results.entities["dea_name"];
var dea_wardidid = results.entities["dea_wardidid"];
console.log(dea_name);
console.log(dea_wardidid);

//Populate lookup
var lookupValue = new Array();
lookupValue[0] = new Object();
lookupValue[0].id = dea_wardidid; // GUID of the lookup id
lookupValue[0].name = dea_name; // Name of the lookup
lookupValue[0].entityType = "dea_wardid"; //Entity Type of the lookup entity
window.parent.Xrm.Page.getAttribute("dea_ward").setValue(lookupValue);
}
},
function(error) {
Xrm.Utility.alertDialog(error.message);
}
);

//Call to CRM to populate the lookup field for District Municipality

window.parent.Xrm.WebApi.online.retrieveMultipleRecords("dea_districtmunicipality", "?$select=dea_districtmunicipalityid,dea_name&$filter=dea_name eq '" + districts + "'").then(
function success(results) {
for (var i = 0; i < results.entities.length; i++) {
var dea_districtmunicipalityid = results.entities["dea_districtmunicipalityid"];
var dea_name = results.entities["dea_name"];
console.log(dea_districtmunicipalityid);
console.log(dea_name);

//Populate lookup
var lookupValue = new Array();
lookupValue[0] = new Object();
lookupValue[0].id = dea_districtmunicipalityid; // GUID of the lookup id
lookupValue[0].name = dea_name; // Name of the lookup
lookupValue[0].entityType = "dea_districtmunicipality"; //Entity Type of the lookup entity
window.parent.Xrm.Page.getAttribute("dea_districtmunicipality").setValue(lookupValue);
}
},
function(error) {
Xrm.Utility.alertDialog(error.message);
}
);

//Populate the coordinates field

window.parent.Xrm.Page.getAttribute("dea_latitude").setValue(crmLatitude);
window.parent.Xrm.Page.getAttribute("dea_longitude").setValue(crmLongitude);
//THE END OF CALLS TO CRM
});

});
});

</script>
<meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta><meta></head>

Re: How to customize the sketch widget?

mdonnelly — Tue, 23 Jun 2020 06:51:07 GMT

Try this:

var sketch = new Sketch({
layer: graphicsLayer,
view: view,

availableCreateTools: ["polygon"],
creationMode: "update"

});

Sketch | ArcGIS API for JavaScript 4.15

Re: How to customize the sketch widget?

SiyabongaKubeka — Tue, 23 Jun 2020 07:08:47 GMT

Thank you very much Mark.

topic Re: How to customize the sketch widget? in ArcGIS JavaScript Maps SDK Questions

How to customize the sketch widget?

Re: How to customize the sketch widget?

Re: How to customize the sketch widget?