Whenever I try to add widgets to my map, it disappears

ChesouyeCoye

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Search widget tutorial</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.43/esri/css/esri.css">
<link rel="stylesheet" href="style.css">
<style>
html, body, #map {
height: 750px;
width: 100%;
margin: 0;
padding-top: 45px;
}
#search {
display: block;
position: absolute;
z-index: 3;
top: 150px;
left: 75px;
}
.spotlight {
z-index:-1;
position:absolute;
left:50%;
top:50%;
border-radius:50%;
opacity:0;
box-shadow:
inset rgba(0,0,0,0.25) 0px 0px 20px 20px,
rgba(0,0,0,0.25) 0px 0px 0px 1000px;
transition:all 1000ms;
-moz-transition:all 1000ms;
-webkit-transition:all 1000ms;
}
.spotlight-active {
z-index:2;
opacity:1;
}
</style>

routeTask = new RouteTask({
url: route_world_link
});
// The stops and route result will be stored in this layer
routeLayer = new GraphicsLayer({title: "Driving Route",
visible: false
});

// Setup the route parameters
routeParams = new RouteParameters({
stops: new FeatureSet(),
outSpatialReference: {
// autocasts as new SpatialReference()
wkid: 3857
},
returnDirections: true,
directionsLengthUnits: "kilometers"
});
//console.log(routeParams.directionsLengthUnits);
// Define the symbology used to display the stops
stopSymbol = {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
style: "cross",
size: 15,
outline: {
// autocasts as new SimpleLineSymbol()
width: 4
}
};

stopSymbol2 = {
// type: "simple",
// symbol: {
type: "picture-marker",
url: "http://localhost:8080/img/car.png",
width: "45px",
height: "40px"
//}
};

var popupStopDetails = {
"title": "<b>STOP</b>",
"content": "test"
}

function removeStop(){

if(routeHandler != 0){
routeHandler.remove();
routeHandler = 0;
document.getElementById("stopBtn").style.display = "";
document.getElementById("stop_info").style.display = "";
document.getElementById("addStopBtn").style.display = "inline-block";
document.getElementById("removeStopInfo").style.display = "block";
document.getElementById("reCalBtn").style.display = "inline-block";
document.getElementById("addStopBtn").addEventListener("click", addStop);
document.getElementById("reCalBtn").addEventListener("click", reCalRoute);
}

highlightHandler = view.on("pointer-move", function(event){
view.hitTest(event).then(function(response){
if (response.results.length) {

var graphic = response.results.filter(function (result) {

return result.graphic.layer === routeLayer;

})[0].graphic;

view.whenLayerView(graphic.layer).then(function(layerView){
if (highlightSelect) {
highlightSelect.remove();
}
if(graphic.geometry.type == "point"){
highlightSelect = layerView.highlight(graphic);
}
});

}
});
});

stopHandler = view.on("pointer-down", function(event){
view.hitTest(event).then(function(response){
if (response.results.length) {
var graphic = response.results.filter(function (result) {
return result.graphic.layer === routeLayer;
})[0].graphic;

view.whenLayerView(graphic.layer).then(function(layerView){
//layerView.highlight(graphic);
//console.log(graphic);
if(graphic.geometry.type == "point"){

var routeCount = 0;

for(rci=0;rci<routeLayer.graphics.items.length;rci++){
if(routeLayer.graphics.items[rci].geometry.type == "polyline"){
routeCount = routeCount + 1;
routeLayer.remove(routeLayer.graphics.items[rci]);
}
}

// console.log(routeCount);
//
var paramIndex = routeParams.stops.features.indexOf(graphic);
var routeLayerIndex = routeLayer.graphics.items.indexOf(graphic);

if (paramIndex > -1) {
routeParams.stops.features.splice(paramIndex, 1);
}

routeLayer.remove(graphic);
routeResult = [];
routeDistance = [];
routeTime = [];

}

});
}
});
});

}

function addStop(event) {
// Add a point at the location of the map click

if(routeHandler == 0){
stopHandler.remove();
stopHandler = 0;
highlightHandler.remove();
highlightHandler = 0;
if(highlightSelect){
highlightSelect.remove();
highlightSelect = 0;
}
routeHandler = view.on("click", addStop);
document.getElementById("addStopBtn").style.display = "";
document.getElementById("reCalBtn").style.display = "";
document.getElementById("removeStopInfo").style.display = "";
document.getElementById("stop_info").style.display = "block";
document.getElementById("stopBtn").style.display = "inline-block";
}
// console.log(event.mapPoint);
// console.log(typeof event.mapPoint);
// console.log(event.x);
// console.log(event.y);

var stop = new Graphic({
geometry: event.mapPoint,
symbol: stopSymbol2
});

if((typeof event.mapPoint) != "undefined"){
routeLayer.add(stop);
}

if(document.getElementById("stopBtn").style.display == "" && document.getElementById("route_info").style.display == ""){

document.getElementById("stopBtn").style.display = "inline-block";
document.getElementById("stopBtn").addEventListener("click", removeStop);
}

if(document.getElementById("route_info").style.display == ""){
document.getElementById("route_info").style.display = "inline-block";

routeResult.push(data.routeResults[0].route);
routeDistance.push(data.routeResults[0].directions.totalLength);
routeTime.push(data.routeResults[0].directions.totalDriveTime);

routeResult[routeResult.length - 1].symbol = routeSymbol;

routeLayer.add(routeResult[routeResult.length - 1]);

//console.log(routeResult.length);

var distance = data.routeResults[0].directions.totalLength;
var travelTime = data.routeResults[0].directions.totalDriveTime;
var travelTimeHours = 0;
var travelTimeMinutes = 0;
if (travelTime >= 60){
travelTimeHours = travelTime / 60;
travelTimeMinutes = travelTime % 60;
}else{
travelTimeMinutes = travelTime;
}

document.getElementById("route_info").innerHTML = "<b>" + distance.toFixed(2) + " Kilometers, " + Math.floor(travelTimeHours) + " Hour(s) " + Math.floor(travelTimeMinutes) + " Minutes" + "<b>";

if(document.getElementById("newRouteBtn").style.display == ""){

document.getElementById("newRouteBtn").style.display = "inline-block";
document.getElementById("newRouteBtn").addEventListener("click", newRoute);

}

}

function removeLastRoute(){

routeLayer.remove(routeParams.stops.features[(routeParams.stops.features.length - 1)]);
routeParams.stops.features.pop();

routeLayer.remove(routeResult[routeResult.length - 1]);
routeResult.pop();
routeDistance.pop();
routeTime.pop();
//routeTask.solve(routeParams).then(showRoute);
if (routeParams.stops.features.length > 1) {
//console.log(routeResult.length);
var distance = routeDistance[routeDistance.length - 1];
var travelTime = routeTime[routeTime.length - 1];
var travelTimeHours = 0;
var travelTimeMinutes = 0;
if (travelTime >= 60){

travelTimeHours = travelTime / 60;
travelTimeMinutes = travelTime % 60;
}else{
travelTimeMinutes = travelTime;
}

document.getElementById("route_info").innerHTML = "<b>" + distance.toFixed(2) + " Kilometers, " + Math.floor(travelTimeHours) + " Hour(s) " + Math.floor(travelTimeMinutes) + " Minutes" + "<b>";

}
if (routeParams.stops.features.length == 1) {
document.getElementById("route_info").innerHTML = "<b> 0 Kilometers, 0 Hour(s) 0 Minutes" + "<b>";
document.getElementById("newRouteBtn").style.display = "";
}

if (routeParams.stops.features.length < 1) {

view.ui.empty("top-right");
document.getElementById("newRouteBtn").style.display = "";
document.getElementById("stopBtn").style.display = "";
document.getElementById("lastRouteBtn").style.display = "";
document.getElementById("reCalBtn").style.display = "";
document.getElementById("addStopBtn").style.display = "";
if(routeHandler == 0){
stopHandler.remove();
stopHandler = 0;
highlightHandler.remove();
highlightHandler = 0;
if(highlightSelect){
highlightSelect.remove();
highlightSelect = 0;
}
routeHandler = view.on("click", addStop);
}

}
}

function newRoute(){
routeLayer.removeAll();
routeParams.stops.features = [];
//view.ui.empty("top-right");
document.getElementById("newRouteBtn").style.display = "";
document.getElementById("stopBtn").style.display = "";
document.getElementById("lastRouteBtn").style.display = "";
document.getElementById("addStopBtn").style.display = "";
document.getElementById("reCalBtn").style.display = "";
document.getElementById("removeStopInfo").style.display = "";
document.getElementById("route_info").style.display = "";
document.getElementById("route_processing").innerHTML = "";
document.getElementById("route_processing").style.display = "";
if(document.getElementById("stop_info").style.display == ""){
document.getElementById("stop_info").style.display = "block";
}

if(routeHandler == 0){
stopHandler.remove();
stopHandler = 0;
highlightHandler.remove();
highlightHandler = 0;
if(highlightSelect){
highlightSelect.remove();
highlightSelect = 0;
}
routeHandler = view.on("click", addStop);
}
routeResult = [];
routeDistance = [];
routeTime = [];

}

//CREATE MAP OBJECT
map = new Map({
basemap: "streets-vector"//"satellite

//URL TO CHANGE BASEMAP CODE
//https://developers.arcgis.com/javascript/latest/api-reference/esri-Map.html#basemap
});

//CREATE VIEW
view = new MapView({
container: "viewDiv",
map: map,
center: [-77.259, 18.137],//[-77.086, 18.174],//[-77.45, 18.113],//[-76.83,17.985],//,//[-118.71511, 34.09042], // longitude, latitude
zoom: 9//,
// padding: {
// right: 320
// }
});

var homeWidget = new Home({
view: view
});

view.ui.add(homeWidget, "top-left");

// creates a new instance of the NavigationToggle widget
var navigationToggle = new NavigationToggle({
view: view
});

// and adds it to the top right of the view
//view.ui.add(navigationToggle, "top-right");

view.popup.on("trigger-action", function(event) {
// Execute the measureThis() function if the measure-this action is clicked
if (event.action.id === "measure-area") {
measureArea();
}

if (event.action.id === "measure-perimeter") {
measurePerimeter();
}

if (event.action.id === "hide-measurement") {
if(document.getElementById("geo_info").style.display == "inline-block"){
document.getElementById("geo_info").style.display = "";
}
}
});

function measureArea() {
var geom = view.popup.selectedFeature.geometry;
var area = geometryEngine.geodesicArea(geom, "square-kilometers");
area = parseFloat(Math.round(area * 100) / 100).toFixed(2);

if(document.getElementById("geo_info").style.display == ""){
document.getElementById("geo_info").style.display = "inline-block";
}
document.getElementById("geo_info").innerHTML = formatter.format(area) + " square-km";
}

function measurePerimeter() {
var geom = view.popup.selectedFeature.geometry;
var distance = geometryEngine.geodesicLength(geom, "kilometers");
distance = parseFloat(Math.round(distance * 100) / 100).toFixed(2);

if(document.getElementById("geo_info").style.display == ""){
document.getElementById("geo_info").style.display = "inline-block";
}
document.getElementById("geo_info").innerHTML = formatter.format(distance) + " km";
}

//CREATE BASEMAP WIDGET
var basemapWidget = new BasemapGallery({
view: view,
source: {
portal: {
url: "https://www.arcgis.com",
useVectorBasemaps: true // Load vector tile basemaps
}
},
visible: false
});

searchWidget = new Search({
view: view,
searchAllEnabled: true,
includeDefaultSources: false,
allPlaceholder: "<--Change search feature.. ",
visible: false,
locationEnabled: false,
activeMenu: "source",
maxSuggestions: 40
});

searchWidget.on("select-result", function(event){

if (searchWidget.activeSourceIndex != -1){

searchWidget.activeSource.layer.visible = true;

view.ui.add(legend, "bottom-left");
var oth;

if (searchWidget.activeSource.name == "Polling Locations"){
oth = searchWidget.results[0].results[0].feature.attributes.PARISH;
}

if (searchWidget.activeSource.name == "Admin Offices"){
oth = searchWidget.results[0].results[0].feature.attributes.LOCATION;
}

if (searchWidget.activeSource.name == "Constituency"){
oth = "REGION: " + searchWidget.results[0].results[0].feature.attributes.REGION_NO;
}

if (searchWidget.activeSource.name == "Electoral Divisions"){
oth = searchWidget.results[0].results[0].feature.attributes.CONST_NAME;
}

if (searchWidget.activeSource.name == "Communities"){
oth = searchWidget.results[0].results[0].feature.attributes.PARISH;
}

if (tableResult.length > 0){
for(x=0;x<tableResult.length;x++){

if(searchWidget.activeSource.name == tableResult[x].type && searchWidget.results[0].results[0].key == tableResult[x].key){
//&& searchWidget.searchTerm == tableResult[x].descrip
//if(searchWidget.results[0].results[0].key == tableResult[x].key){
//console.log("true");
return;
}
}

tableResult.push({num: (tableResult.length + 1), type: searchWidget.activeSource.name, descrip: searchWidget.results[0].results[0].name, other: oth, key: searchWidget.results[0].results[0].key});
loadTableData(tableResult[tableResult.length - 1]);
}

if (tableResult.length == 0){
tableResult.push({num: (tableResult.length + 1), type: searchWidget.activeSource.name, descrip: searchWidget.results[0].results[0].name, other: oth, key: searchWidget.results[0].results[0].key});
loadTableData(tableResult[tableResult.length - 1]);
}
}else{

event.source.layer.visible = true;

view.ui.add(legend, "bottom-left");
var oth;

if (event.source.name == "Polling Locations"){
oth = event.result.feature.attributes.PARISH;
}

if (event.source.name == "Admin Offices"){
oth = event.result.feature.attributes.LOCATION;
}

if (event.source.name == "Constituency"){
oth = "REGION: " + event.result.feature.attributes.REGION_NO;
}

if (event.source.name == "Electoral Divisions"){
oth = event.result.feature.attributes.CONST_NAME;
}

if (event.source.name == "Communities"){
oth = event.result.feature.attributes.PARISH;
}

if (tableResult.length > 0){
for(x=0;x<tableResult.length;x++){

if(event.source.name == tableResult[x].type && event.result.key == tableResult[x].key){
return;
}
}

tableResult.push({num: (tableResult.length + 1), type: event.source.name, descrip: event.result.name, other: oth, key: event.result.key});
loadTableData(tableResult[tableResult.length - 1]);
}

if (tableResult.length == 0){
tableResult.push({num: (tableResult.length + 1), type: event.source.name, descrip: event.result.name, other: oth, key: event.result.key});
loadTableData(tableResult[tableResult.length - 1]);
}

}
});

searchWidget.on("search-focus", function(event){

if(pdSearchWidget.results[0].results[0].key == tableResult[x].key){
//console.log("true");
return;
}
}

tableResult.push({num: (tableResult.length + 1), type: "PD", descrip: pdSearchWidget.results[0].results[0].name, other: pdSearchWidget.activeSource.name, key: pdSearchWidget.results[0].results[0].key});
loadTableData(tableResult[tableResult.length - 1]);
}

if (tableResult.length == 0){
tableResult.push({num: (tableResult.length + 1), type: "PD", descrip: pdSearchWidget.results[0].results[0].name, other: pdSearchWidget.activeSource.name, key: pdSearchWidget.results[0].results[0].key});
loadTableData(tableResult[tableResult.length - 1]);
}
}else{

if (tableResult.length > 0){
for(x=0;x<tableResult.length;x++){

if(event.result.key == tableResult[x].key){
//console.log("true");
return;
}
}

tableResult.push({num: (tableResult.length + 1), type: "PD", descrip: event.result.name, other: event.result.feature.attributes.CONST_NAME, key: event.result.key});
loadTableData(tableResult[tableResult.length - 1]);
}

if (tableResult.length == 0){
tableResult.push({num: (tableResult.length + 1), type: "PD", descrip: event.result.name, other: event.result.feature.attributes.CONST_NAME, key: event.result.key});
loadTableData(tableResult[tableResult.length - 1]);
}

}

//pdSearchWidget.results[0].results = [];

});

pdSearchWidget.on("search-focus", function(event){

var temp = pdSearchWidget.searchTerm;
pdSearchWidget.clear();
pdSearchWidget.searchTerm = temp;
if (pdSearchWidget.activeSourceIndex == -1){

pd.definitionExpression = null;

pd.queryFeatureCount().then((v) => {
document.getElementById("active_const").innerHTML = "PD SEARCH" + " ( TOTAL: " + v + ")";
});

}else{

pd.definitionExpression = "CONST_NAME = '" + pdSearchWidget.activeSource.name + "'";

// pdSearchWidget.activeSource.layer.queryFeatureCount().then((v) => {
pd.queryFeatureCount().then((v) => {
document.getElementById("active_const").innerHTML = pdSearchWidget.activeSource.name + " (MAX. PD: " + v + ")";
});

}
});

pdSearchWidget.on("search-clear", function(event){
pd.visible = false;
view.zoom = 10;
view.center = [-77.259, 18.137];

if(document.getElementById("geo_info").style.display != ""){
document.getElementById("geo_info").style.display = "";
}
});
//
// pdSearchWidget.on("suggest-complete", function(event){
//
// for(s=0;s<pdSearchWidget.suggestions[0].results.length;s++){
// parseInt(pdSearchWidget.suggestions[0].results[s].text);
// }
//
// //pdSearchWidget.suggestions[0].results.sort(dynamicSort("text"));
// });
//

//CREATE LEGEND WIDGET
legend = new Legend({
view: view,
basemapLegendVisible: true,
style: {
type: "classic",
layout: "auto"

},
id: "lg",
label: "LEGEND"
});

//CREATE LAYER LIST
layerlist = new LayerList({
view: view,
visible: false,
selectionEnabled: true
});

var basemapExpand = new Expand({
view: view,
content: basemapWidget,
expandTooltip: "Basemaps"
});

var layerExpand = new Expand({
view: view,
content: layerlist,
expandTooltip: "Layers"
});

var scaleBar = new ScaleBar({
view: view
});
// Add widget to the bottom left corner of the view
view.ui.add(scaleBar,"bottom-left");

printWidget = new Print({
view: view,
printServiceUrl: "http://gis2014:6080/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task",
//"https://utility.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%...",
id: "pr",
visible: false,
templateOptions: {
title: "",
author: "GIS Dept.",
copyright: "The EOJ 2020",
legendEnabled: true,
layout: "tabloid-ansi-b-landscape"
}
});

// document
// .getElementById("measure")
// .addEventListener("click", function() {
//
// var topbarWidget = document.getElementById("topbar");
//
// if (topbarWidget.style.display == "") {
//
// topbarWidget.style.display = "grid";
view.ui.add("topbar", "top-left");
// }else{
// setActiveWidget(null);
// //setActiveButton(null);
// topbarWidget.style.display = "";
// //view.ui.remove("topbar");
//
// }
//
// });

document
.getElementById("layers")
.addEventListener("click", function() {
var drivingInfo = document.getElementById("stop_info");
var layerIcon = document.getElementById("layers");

if (layerlist.visible == false) {
if (drivingInfo.style.display == "block"){
view.ui.add(layerlist, "bottom-right");
}else{
view.ui.add(layerlist, "top-right");
}
layerIcon.style.backgroundColor = "blue";
view.ui.add(legend, "bottom-left");
layerlist.visible = true; document.getElementById("layerInfo").style.display = "inline-block";
}else{
layerIcon.style.backgroundColor = "";
view.ui.remove(layerlist);
layerlist.visible = false;
document.getElementById("layerInfo").style.display = "";
if (legend.activeLayerInfos.length == 0){
view.ui.remove(legend);
if(document.getElementById("geo_info").style.display != ""){
document.getElementById("geo_info").style.display = "";
}
}
}

});

document
.getElementById("driving")
.addEventListener("click", function() {

var drivingInfo = document.getElementById("stop_info");
var routeInfo = document.getElementById("route_info");
var driveIcon = document.getElementById("driving");

if (routeHandler == 0 && stopHandler == 0) {
driveIcon.style.backgroundColor = "blue";
drivingInfo.style.display = "block";
routeLayer.visible = true;
//Adds a graphic when the user clicks the map. If 2 or more points exist, route is solved.
map.basemap = "streets-navigation-vector";
routeHandler = view.on("click", addStop);

if (layerlist.visible == true){
view.ui.add(layerlist, "bottom-right");
}

if (printWidget.visible == true){
view.ui.add(printWidget, "bottom-right");
}

}else{
driveIcon.style.backgroundColor = "";
routeLayer.removeAll();
routeParams.stops.features = [];
routeResult = [];
routeLayer.visible = false;
drivingInfo.style.display = "";
routeInfo.style.display = "";

}else{

document.getElementById("printInfo").style.display = "block";

document.getElementById("printpw").addEventListener("keydown",function(e){
if(e.keyCode == 13){
var inputtxt = document.getElementById("printpw").value;
var now = new Date();
validatePrintPW(inputtxt, now.getTime());
}
});
}
}else{

view.ui.remove(printWidget);
printWidget.visible = false;
if(document.getElementById("printInfo").style.display == "block"){
document.getElementById("printInfo").style.display = "";
}

printIcon.style.backgroundColor = "";
}

});

document
.getElementById("search")
.addEventListener("click", function() {
var searchIcon = document.getElementById("search");
var pdSearchIcon = document.getElementById("pdsearch");

switch(searchWidget.visible){
case true:
searchIcon.style.backgroundColor = "";
view.ui.remove(document.getElementById("active_layer"));
view.ui.remove(searchWidget);
searchWidget.visible = false;

break;

case false:
searchIcon.style.backgroundColor = "blue";
if (pdSearchWidget.visible == false){
var active_layer = document.createElement("div");
active_layer.id = "active_layer";
active_layer.style.backgroundColor = "white";
active_layer.innerHTML = "FEATURE SEARCH";
view.ui.add(active_layer, "top-left");
view.ui.add(searchWidget, "top-left");
searchWidget.visible = true;
}

if (pdSearchWidget.visible == true){
view.ui.remove(document.getElementById("active_const"));
view.ui.remove(pdSearchWidget);
pdSearchIcon.style.backgroundColor = "";
pdSearchWidget.visible = false;
var active_layer = document.createElement("div");
active_layer.id = "active_layer";
active_layer.style.backgroundColor = "white";
active_layer.innerHTML = "FEATURE SEARCH";
view.ui.add(active_layer, "top-left");
view.ui.add(searchWidget, "top-left");
searchWidget.visible = true;
}
break;
}

});

document
.getElementById("pdsearch")
.addEventListener("click", function() {
var pdSearchIcon = document.getElementById("pdsearch");
var searchIcon = document.getElementById("search");
switch(pdSearchWidget.visible){
case true:
pdSearchIcon.style.backgroundColor = "";
view.ui.remove(document.getElementById("active_const"));
view.ui.remove(pdSearchWidget);
pdSearchWidget.visible = false;

break;

case false:
pdSearchIcon.style.backgroundColor = "blue";
if (searchWidget.visible == false){
var active_const = document.createElement("div");
active_const.id = "active_const";
active_const.style.backgroundColor = "white";
if (pdSearchWidget.activeSourceIndex == -1){

pd.definitionExpression = null;

pd.queryFeatureCount().then((v) => {
active_const.innerHTML = "PD SEARCH" + " ( TOTAL: " + v + ")";
});

}else{

pd.definitionExpression = "CONST_NAME = '" + pdSearchWidget.activeSource.name + "'";

// pdSearchWidget.activeSource.layer.queryFeatureCount().then((v) => {
pd.queryFeatureCount().then((v) => {
active_const.innerHTML = pdSearchWidget.activeSource.name + " (MAX. PD: " + v + ")";
});

}
view.ui.add(active_const, "top-left");
view.ui.add(pdSearchWidget, "top-left");
pdSearchWidget.visible = true;
}

if (searchWidget.visible == true){
view.ui.remove(document.getElementById("active_layer"));
view.ui.remove(searchWidget);
searchIcon.style.backgroundColor = "";
searchWidget.visible = false;
var active_const = document.createElement("div");
active_const.id = "active_const";
active_const.style.backgroundColor = "white";
if (pdSearchWidget.activeSourceIndex == -1){

pd.definitionExpression = null;

pd.queryFeatureCount().then((v) => {
active_const.innerHTML = "PD SEARCH" + " ( TOTAL: " + v + ")";
});

}else{

pd.definitionExpression = "CONST_NAME = '" + pdSearchWidget.activeSource.name + "'";

// pdSearchWidget.activeSource.layer.queryFeatureCount().then((v) => {
pd.queryFeatureCount().then((v) => {
active_const.innerHTML = pdSearchWidget.activeSource.name + " (MAX. PD: " + v + ")";
});

}
view.ui.add(active_const, "top-left");
view.ui.add(pdSearchWidget, "top-left");
pdSearchWidget.visible = true;
}
break;
}

});

// document
// .getElementById("basemap")
// .addEventListener("click", function() {
//
//
// if (basemapWidget.visible == false) {
// view.ui.add(basemapWidget, "top-right");
// basemapWidget.visible = true;
//
// }else{
// view.ui.remove(basemapWidget);
// basemapWidget.visible = false;
// }
//
//
// });

document
.getElementById("results")
.addEventListener("click", function() {
var resultsIcon = document.getElementById("results");

var resultsWidget = document.getElementById("results_table");
var resultsWidgetDiv = document.getElementById("resultsTableDiv");
var clearBtn = document.getElementById("clearBtn");

if (resultsWidget.style.display == "") {
resultsIcon.style.backgroundColor = "blue";
resultsWidgetDiv.style.display = "block";
resultsWidget.style.display = "table";
clearBtn.style.display = "inline-block"

}else{
resultsIcon.style.backgroundColor = "";
resultsWidget.style.display = "";
resultsWidgetDiv.style.display = "";
clearBtn.style.display = "";

}

});

document
.getElementById("distanceButton")
.addEventListener("click", function() {
setActiveWidget(null);
if (!this.classList.contains("active")) {
setActiveWidget("distance");
} else {
setActiveButton(null);
}
});

document
.getElementById("areaButton")
.addEventListener("click", function() {
setActiveWidget(null);
if (!this.classList.contains("active")) {
setActiveWidget("area");
} else {
setActiveButton(null);
}
});

function setActiveWidget(type) {
switch (type) {
case "distance":
activeWidget = new DistanceMeasurement2D({
view: view
});

// skip the initial 'new measurement' button
activeWidget.viewModel.newMeasurement();

view.ui.add(activeWidget, "top-right");
setActiveButton(document.getElementById("distanceButton"));
break;
case "area":
activeWidget = new AreaMeasurement2D({
view: view
});

// skip the initial 'new measurement' button
activeWidget.viewModel.newMeasurement();

view.ui.add(activeWidget, "top-right");
setActiveButton(document.getElementById("areaButton"));
break;
case null:
if (activeWidget) {
view.ui.remove(activeWidget);
activeWidget.destroy();
activeWidget = null;
}
break;
}
}

});

</script>
</head>
<body>
<nav>
<input type="checkbox" id="nav-toggle">
<div class="logo">
<a href="http://www.ecj.com.jm" alt="Go to ECJ">
<img src="img/ecjLogo.png" alt="ECJ Logo" title="Go to ECJ website" class="ecjLogo" /></a>
   
<strong>ELECTORAL COMMISSION OF JAMAICA</strong></div>
<ul class="links">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<label for="nav-toggle" class="icon-burger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</label>
</nav>
<div id="search"></div>
<div id="map"></div>
</body>
</html>

JohnFoster6

@ChesouyeCoye in order for people in the community to help you better it would be good to frame your post as a question with the specific details you are hoping to achieve, and then include a link to the code running somewhere as a public web page or a CodePen or other type sandbox. Putting such a large amount of code that is unformatted here isn't going to be helpful for anyone who would like to help you figure this issue out.

BjornSvensson

@ChesouyeCoye Looks like the code is trying to use 4x code with the 3.43 API library. This will not work. See https://developers.arcgis.com/javascript/latest/ for more info about using the 4x API.

For questions specific to the ArcGIS Maps SDK for JavaScript, it might better to ask in that specific community -- https://community.esri.com/t5/arcgis-maps-sdk-for-javascript/ct-p/arcgis-api-for-javascript