popup template close Button

NadirHussain · ‎06-11-2020

i need urgent help.i have my custom page.on page i use bootstrap to create a navigation bar.As you see in the bellow image as highlited in red rectangle.if i click on my scene view it shows a popup with some information.if i use to close popup from cross button.when i press cross button of popup my navigation bar also disappeared.as you see in the other image.

please help me to solve this issue.i am using4.15 arcgis api.i am using scene view.

Thanks once again.waiting for reply.

RobertScheitlin__GISP · ‎06-11-2020

Nadir,

Sounds like you have a css rule specificity issue. Meaning that you are using some generic css class name like .hidden, .hide , .visible , or the like and esri is using the same class to hide its' popup. Thus when the popup is hidden so is your toolbar. Try making your css rule and class name that hides your navigation tools more specific.

GeorgeAbraham · ‎06-12-2020

Hi Nadir Hussain,

As Robert Scheitlin, GISP mentioned above, the issue seems very specific to an incorrect CSS implementation. If you could share a working code, then could take a further look and fix it for you.

NadirHussain · ‎06-13-2020

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="shortcut icon" href="Images/logonew.png" type="image/x-icon" />
<title>123445</title>

.navbar-nav .navbar-expand-md .dropdown-menu {
background: border-box;
position: absolute;
}

#container {
margin: 0 auto;
width: 460px;
padding: 2em;
background: #DCDDDF;
}

.#topbar {
background: #fff;
padding: 10px;
}

</style>
<script type="text/javascript">
var map;
var chartCaption;
var flgMugamaat;
var fExt;
var feat;
var activeWidget = null;
var layerList = null;
var strTitle = "";
var graphicsLayer=null;
require(["esri/Map", "esri/views/MapView","esri/layers/MapImageLayer", "esri/views/SceneView", "esri/layers/FeatureLayer", "esri/widgets/BasemapGallery", "esri/widgets/CoordinateConversion", "esri/widgets/Expand",
"esri/widgets/ScaleBar", "esri/widgets/Popup/PopupViewModel", "esri/geometry/Extent", "esri/PopupTemplate", "esri/layers/GraphicsLayer", "esri/widgets/DirectLineMeasurement3D",
"esri/widgets/AreaMeasurement3D","esri/widgets/Search", "esri/Graphic","esri/widgets/Legend","esri/widgets/Home","esri/widgets/LayerList"],
function (Map, MapView,MapImageLayer, SceneView, FeatureLayer, BasemapGallery, CoordinateConversion, Expand, ScaleBar, PopupVM, Extent, PopupTemplate, GraphicsLayer, DirectLineMeasurement3D,
AreaMeasurement3D,Search, Graphic,Legend,Home,LayerList) {
/****************************************************************/
graphicsLayer = new GraphicsLayer();
//var layer = new MapImageLayer();
var Lyr1PopupTemplate = {
title: "مجمعات_الأنشطة_التعدينية المعتمدة", content: [{
type: "fields",
fieldInfos: [{ fieldName: "أسم_المجمع", label: "أسم المجمع", visible: true }, { fieldName: "أسم_الموقع", label: "أسم الموقع", visible: true }]
}]
};
var Lyr2PopupTemplate = {
title: "مجمعات_الأنشطة_التعدينية_المقترحة", content: [{
type: "fields",
fieldInfos: [{ fieldName: "تصنيف_خام", label: "تصنيف_خام", visible: true }, { fieldName: "رقم_المجمع", label: "رقم المجمع", visible: true }]
}]
};
var Lyr3PopupTemplate = {
title: "موقع إحتياطى تعدينى", content: [{
type: "fields",
fieldInfos: [{ fieldName: "اسم_الموقع", label: "اسم الموقع", visible: true }, { fieldName: "اسم_المجمع", label: "اسم المجمع", visible: true }]
}]
};
var Lyr4PopupTemplate = {
title: "الحدود الإدارية", content: [{
type: "fields",
fieldInfos: [{ fieldName: "Aname", label: "Arabic Name", visible: true }, { fieldName: "Ename", label: "English Name", visible: true }]
}]
};
var llist= new MapImageLayer({url:"",title: "Census Demographics",
sublayers: [
{
id: 0,
title: "مشاريع رخص محاجر مواد بناء",
visible: true,
source: { mapLayerId: 0 }
},
{
id: 1,
title: "مشاريع رخص التعدين",
visible: true,
source: { mapLayerId: 1}
},
{
id: 2,
title: "مشاريع رخص محاجر مواد خام",
visible: true,
// points to the block groups layer
source: { mapLayerId: 2}
},
{
id: 3,
title: "مشاريع رخص المناجم الصغيرة",
visible: true,
// points to the block groups layer
source: { mapLayerId: 3}
},
{
id: 4,
title: "مشاريع رخص الكشف",
visible: true,
// points to the block groups layer
source: { mapLayerId:4 }
},
{
id: 5,
title: "رخص محاجر مواد بناء السارية المفعول",
visible: true,
// points to the block groups layer
source: { mapLayerId:5 }
},
{
id: 6,
title: "رخص التعدين السارية المفعول",
visible: true,
// points to the block groups layer
source: { mapLayerId:6}
},
{
id: 7,
title: "رخص محاجر مواد خام السارية المفعول",
visible: true,
// points to the block groups layer
source: { mapLayerId:7}
},
{
id: 8,
title: "رخص المناجم الصغيرة السارية المفعول",
visible: true,
// points to the block groups layer
source: { mapLayerId:8}
},
{
id: 9,
title: "رخص الكشف السارية المفعول",
visible: true,
// points to the block groups layer
source: { mapLayerId:9}
},
{
id: 10,
title: "تجديد رخص محاجر مواد بناء",
visible: true,
// points to the block groups layer
source: { mapLayerId:10}
},
{
id: 11,
title: "تجديد رخص التعدين",
visible: true,
// points to the block groups layer
source: { mapLayerId:11}
},
{
id: 12,
title: "تجديد رخص محاجر مواد خام",
visible: true,
// points to the block groups layer
source: { mapLayerId:12}
},
{
id: 13,
title: "تجديد رخص المناجم الصغيرة",
visible: true,
// points to the block groups layer
source: { mapLayerId:13}
},
{
id: 14,
title: "تجديد رخص الكشف",
visible: true,
// points to the block groups layer
source: { mapLayerId:14}
},
{
id: 15,
title: "رخص محاجر مواد بناء الصادرة المبلغ عنها بالإنتهاء",
visible: true,
// points to the block groups layer
source: { mapLayerId:15}
},
{
id: 16,
title: "رخص التعدين الصادرة المبلغ عنها بالإنتهاء",
visible: true,
// points to the block groups layer
source: { mapLayerId:16}
},
{
id: 17,
title: "رخص محاجر مواد خام الصادرة مبلغ عنها بالإنتهاء",
visible: true,
// points to the block groups layer
source: { mapLayerId:17}
},
{
id: 18,
title: "رخص المناجم الصغيرة الصادرة المبلغ عنها بالإنتهاء",
visible: true,
// points to the block groups layer
source: { mapLayerId:18}
},
{
id: 19,
title: "رخص الكشف الصادرة المبلغ عنها بالإنتهاء",
visible: true,
// points to the block groups layer
source: { mapLayerId:19}
},
{
id: 20,
title: "رخص حقوق الإرتفاق الصادرة المبلغ عنها بالإنتهاء",
visible: true,
// points to the block groups layer
source: { mapLayerId:20}
},
{
id: 21,
title: "رخص محاجر مواد بناء المنتهية",
visible: true,
// points to the block groups layer
source: { mapLayerId:21}
},
{
id: 22,
title: "رخص التعدين المنتهية",
visible: true,
// points to the block groups layer
source: { mapLayerId:22}
},
{
id: 23,
title: "رخص محاجر مواد خام المنتهية",
visible: true,
// points to the block groups layer
source: { mapLayerId:23}
},
{
id: 24,
title: "رخص المناجم الصغيرة المنتهية",
visible: true,
// points to the block groups layer
source: { mapLayerId:24}
},
{
id: 25,
title: "رخص الكشف المنتهية",
visible: true,
// points to the block groups layer
source: { mapLayerId: 25 }
},
{
id: 26,
title: "مجمعات الأنشطة التعدينية المعتمدة",
visible: true,
// points to the block groups layer
source: { mapLayerId: 26 },
popupEnabled: true, popupTemplate: Lyr1PopupTemplate
},
{
id: 27,
title: "مجمعات الأنشطة التعدينية المقترحة",
visible: true,
// points to the block groups layer
source: { mapLayerId: 27 },
popupEnabled: true, popupTemplate: Lyr2PopupTemplate
},
{
id: 28,
title: "موقع إحتياطى تعدينى",
visible: true,
// points to the block groups layer
source: { mapLayerId: 28 },
popupEnabled: true, popupTemplate: Lyr3PopupTemplate
},
{
id: 29,
title: "الحدود الإدارية",
visible: true,
source: { mapLayerId: 29},
popupEnabled: true, popupTemplate: Lyr4PopupTemplate
}

]
});

/****************************************************************/
map = new Map({ basemap: "satellite",layers: [llist]});

var ext = new Extent({ xmin: 34.569673375000036, ymin: 16.37983382100009, xmax: 55.666503900000066, ymax: 32.16033986800005, spatialReference: { wkid: 4326 } });
var view = new SceneView({
container: "viewDiv",
map: map,
//camera: { position: {x:43.951098,y:24.304549}, tilt: 0 },
//center: [43.951098, 24.304549],
viewingMode: "global",
/*popup: {
autoOpenEnabled: true,
dockEnabled: true,
dockOptions: {
// dock popup at bottom-right side of view
buttonEnabled: true,
breakpoint: true,
position: "bottom-left"
}
},
*/
//Sets the zoom LOD to 13
zoom: 6,

});
// Create new instance of the Measurement widget
document.getElementById("distanceButton")
.addEventListener("click", function () {
setActiveWidget(null);
if (!this.classList.contains("active")) {
setActiveWidget("distance");
} else {
setActiveButton(null);
}
});

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

view.ui.add(activeWidget, "top-right");
setActiveButton(document.getElementById("distanceButton"));
break;
case "area":
activeWidget = new AreaMeasurement3D({
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;
}
}

// This event fires for each click on any action
view.popup.viewModel.on("trigger-action", function(event){
// If the zoom-out action is clicked, fire the zoomOut() function
if(event.action.id === "zoom-out"){
zoomOut();
}
});

/******************************************************************************************/

/******************************************************************************************/
view.when(function() {
layerList = new LayerList({
view: view,
listItemCreatedFunction: function(event) {
const item = event.item;
if (item.layer.type == "group") {
// don't show legend twice
item.panel = {
content: "legend",
open: true
};
}
}
});
// Add widget to the top right corner of the view

// close the expand whenever a basemap is selected
basemapGallery.watch("activeBasemap", function () {
var mobileSize =
view.heightBreakpoint === "xsmall" ||
view.widthBreakpoint === "xsmall";

if (mobileSize) {
bgExpand.collapse();
}
});
//view.ui.add(basemapGallery, {position: "top-right"});
//view.ui.add(bgExpand, "top-right");

var ccWidget = new CoordinateConversion({view: view});

$("#divArea211").append("<div><label id=lblCounter ></label></div>");
////*********************Area Div**********************************************//
$("#divArea22").append("<div id=divArea221 class='row' ></div>");
$("#divArea22").css('margin-right', '-27px');
$("#divArea22").css('border-left', 'solid 2px grey');
$("#divArea22").css('border-top', 'solid 2px grey');
$("#divArea22").css('border-bottom', 'solid 2px grey');
$('#divArea221').css('direction', 'ltr');
$('#divArea221').css('margin-left', '0%');
$('#divArea221').css('font-weight', 'bold');
$('#divArea221').css('font-size', 'large');
$('#divArea221').css('font-family', 'DroidArabicKufiRegular');
$('#divArea221').css('color', '#14197A');
$("#divArea221").append("<div><label id=lblArea ></label></div>");
//*********************Chart Div**********************************************//
$("#left").append("<div id=divChart class='row mt-1'></div>");
$('#divChart').css('height', '50%');
$("#divChart").append("<div id=divChart1 class='col col-lg-12 col-xl-12 col-md-12 col-lg-12' ></div>");
$("#divChart1").append("<div id=barChartContainer class='row'></div>");
$('#barChartContainer').css('height', '100%');
$('#barChartContainer').css('width', '100%');
$('#barChartContainer').css('margin-right', '-5px');
$('#barChartContainer').css('border', '2px solid #ced4da');
//*********************************************************************************//
$("#left").append("<div id=divChart2 class='row mt-1'></div>");
$('#divChart2').css('height', '40%');
$("#divChart2").append("<div id=divChart21 class='col col-lg-12 col-xl-12 col-md-12 col-lg-12' ></div>");
$("#divChart21").append("<div id=barChartContainer1 class='row'></div>");
$('#barChartContainer1').css('height', '100%');
$('#barChartContainer1').css('width', '100%');
$('#barChartContainer1').css('margin-right', '-5px');
$('#barChartContainer1').css('border', '2px solid #ced4da');
}
//**************************************************************************************************************//
$('#SearchButton1').bind('click', function () {
var progressBarVal = 100;
try {
$('#pBar').css('visibility', 'visible');
$('#pBar').css('display', 'block');
chartCaption = "الوضع الراهن لرخص محاجر مواد البناء";
setTimeout(function () {
$('#pBar').css('visibility', 'hidden');
dynamicPanel();
setView();
var featureLayer1 = new FeatureLayer({
url: "",
outFields: ["*"],

});

featureLayer1.queryFeatures().then(function (results) {
// prints an array of all the features in the service to the console
console.log(results.features);
addGraphics(results,"رخص محاجر مواد البناء");
});
PageMethods.getTotalProjects("4", OnSuccessTaadeen, OnError);
PageMethods.getTotalMinerals("4", OnSuccessMinerals, OnError);

}, 5000);
}
catch (err) {
txt = "There was an error on this page.\n\n";
txt += "Error description: " + err.message + "\n\n";
txt += "Click OK to continue.\n\n";
alert(txt);
}
});
//**************************************************************//
$('#SearchButton2').bind('click', function () {
var progressBarVal = 100;
try {
$('#pBar').css('visibility', 'visible');
$('#pBar').css('display', 'block');
chartCaption = "الوضع الراهن لرخص المناجم الصغيرة";
setTimeout(function () {
$('#pBar').css('visibility', 'hidden');
dynamicPanel();
setView();
var featureLayer1 = new FeatureLayer({
url: "",
outFields: ["*"]
});
//map.add(featureLayer1);
featureLayer1.queryFeatures().then(function (results) {
// prints an array of all the features in the service to the console
console.log(results.features);
addGraphics(results, "رخص المناجم الصغيرة");
});
PageMethods.getTotalProjects("1", OnSuccessTaadeen, OnError);
PageMethods.getTotalMinerals("1", OnSuccessMinerals, OnError);

}, 5000);
}
catch (err) {
txt = "There was an error on this page.\n\n";
txt += "Error description: " + err.message + "\n\n";
txt += "Click OK to continue.\n\n";
alert(txt);
}
});
//**************************************************************//
$('#SearchButton3').bind('click', function () {
var progressBarVal = 100;
try {
$('#pBar').css('visibility', 'visible');
$('#pBar').css('display', 'block');
chartCaption = "الوضع الراهن لرخص التعدين";
setTimeout(function () {
$('#pBar').css('visibility', 'hidden');
dynamicPanel();
setView();
var featureLayer1 = new FeatureLayer({
url: "",
outFields: ["*"]
});
//map.add(featureLayer1);
featureLayer1.queryFeatures().then(function (results) {
// prints an array of all the features in the service to the console
console.log(results.features);
addGraphics(results, "رخص التعدين السارية المفعول");
});
PageMethods.getTotalProjects("3", OnSuccessTaadeen, OnError);
PageMethods.getTotalMinerals("3", OnSuccessMinerals, OnError);

}, 5000);
}
catch (err) {
txt = "There was an error on this page.\n\n";
txt += "Error description: " + err.message + "\n\n";
txt += "Click OK to continue.\n\n";
alert(txt);
}
});
//**************************************************************//
$('#SearchButton4').bind('click', function () {
var progressBarVal = 100;
try {
$('#pBar').css('visibility', 'visible');
$('#pBar').css('display', 'block');
chartCaption = "الوضع الراهن لرخص محاجر مواد خام";
setTimeout(function () {
$('#pBar').css('visibility', 'hidden');
dynamicPanel();
setView();
var featureLayer1 = new FeatureLayer({
url: "",
outFields: ["*"]
});
//map.add(featureLayer1);
featureLayer1.queryFeatures().then(function (results) {
// prints an array of all the features in the service to the console
console.log(results.features);
addGraphics(results, "رخص محاجر مواد خام السارية المفعول");
});
PageMethods.getTotalProjects("2", OnSuccessTaadeen, OnError);
PageMethods.getTotalMinerals("2", OnSuccessMinerals, OnError);

}, 5000);
}
catch (err) {
txt = "There was an error on this page.\n\n";
txt += "Error description: " + err.message + "\n\n";
txt += "Click OK to continue.\n\n";
alert(txt);
}
});
//**************************************************************//
$('#SearchButton5').bind('click', function () {
var progressBarVal = 100;
try {
$('#pBar').css('visibility', 'visible');
$('#pBar').css('display', 'block');
chartCaption = "الوضع الراهن لرخص الكشف";
setTimeout(function () {
$('#pBar').css('visibility', 'hidden');
dynamicPanel();
setView();
var featureLayer1 = new FeatureLayer({
url: "",
outFields: ["*"]
});
//map.add(featureLayer1);
featureLayer1.queryFeatures().then(function (results) {
// prints an array of all the features in the service to the console
console.log(results.features);
addGraphics(results, "رخص الكشف السارية المفعول");
});
PageMethods.getTotalProjects("5", OnSuccessTaadeen, OnError);
PageMethods.getTotalMinerals("5", OnSuccessMinerals, OnError);

}, 5000);
}
catch (err) {
txt = "There was an error on this page.\n\n";
txt += "Error description: " + err.message + "\n\n";
txt += "Click OK to continue.\n\n";
alert(txt);
}
});
//**************************************************************//
$('#SearchButton6').bind('click', function () {
var progressBarVal = 100;
try {
$('#pBar').css('visibility', 'visible');
$('#pBar').css('display', 'block');
chartCaption = "الوضع الراهن الاحتياطي التعدينى";
setTimeout(function () {
$('#pBar').css('visibility', 'hidden');
dynamicPanel();
setView();
var featureLayer1 = new FeatureLayer({
url: "",
outFields: ["*"]
});
featureLayer1.queryFeatures().then(function (results) {
// prints an array of all the features in the service to the console
console.log(results.features);
graphicsLayer.removeAll();
addGraphics(results, "مجمعات الأنشطة التعدينية المعتمدة");
});
chartCaption = "الوضع الراهن المجمعات التعدينية",
PageMethods.getTotalProjects("6", OnSuccessTaadeen, OnError);
PageMethods.getTotalMinerals("6", OnSuccessMinerals, OnError);

}, 5000);
}
catch (err) {
txt = "There was an error on this page.\n\n";
txt += "Error description: " + err.message + "\n\n";
txt += "Click OK to continue.\n\n";
alert(txt);
}
});
//**************************************************************//
$('#SearchButton7').bind('click', function () {
var progressBarVal = 100;
try {
$('#pBar').css('visibility', 'visible');
$('#pBar').css('display', 'block');
chartCaption = "الوضع الراهن الاحتياطي التعدينى";
setTimeout(function () {
$('#pBar').css('visibility', 'hidden');
dynamicPanel();
setView();
var featureLayer1 = new FeatureLayer({
url: "",
outFields: ["*"]
});
//map.add(featureLayer1);
featureLayer1.queryFeatures().then(function (results) {
// prints an array of all the features in the service to the console
console.log(results.features);
graphicsLayer.removeAll();
addGraphics(results, "موقع إحتياطى تعدينى");
});

PageMethods.getTotalProjects("7", OnSuccessTaadeen, OnError);
PageMethods.getTotalMinerals("7", OnSuccessMinerals, OnError);

}, 5000);
}
catch (err) {
txt = "There was an error on this page.\n\n";
txt += "Error description: " + err.message + "\n\n";
txt += "Click OK to continue.\n\n";
alert(txt);
}
});
//**************************************************************//
function addGraphics(result,Title) {
var strContents;
var strHeader = "";
var template = null;
graphicsLayer.removeAll();
result.features.forEach(
function(feature){
var point1 = { type: "point", x: feature.geometry.extent.center.x, y: feature.geometry.extent.center.y};
strHeader = "<thead><tr><th align=center bgcolor=#FFF4CB><font-weight=bold><font color=#14197A><font-size=large>Values</th><th align=center bgcolor=#FFF4CB><font color=#14197A><font-size=large>Name</th></tr></thead><tbody>";
if(Title!=="موقع إحتياطى تعدينى" && Title!=="مجمعات الأنشطة التعدينية المعتمدة"){
//alert(Title);
strContents = setContents(feature);
strHeader = "<font size=2 face=Courier New><table width=100% border='2px solid black' direction='initial' >" + strHeader + strContents + "</tbody>" + "</table></font>";
template = new PopupTemplate({ title: Title, content: strHeader, actions: [zoomOutAction], overwriteActions: true });
}
strHeader="";
var g = new Graphic({
geometry: point1,
attributes: { FExtent: feature.geometry.extent, feature: feature },//feature.attributes,
symbol: { type: "simple-marker", color: [0, 0, 0], outline: { width: 2, color: [0, 255, 255], }, size: "10px" },
popupTemplate: template
//popupTemplate: { title: Title, actions: [ { id: "moadBina",
//image:"https://developers.arcgis.com/javascript/latest/sample-code/popup-custom-action/live/beer.png",
//title: "Brewery Info"
});
graphicsLayer.add(g);
});
map.add(graphicsLayer);
}
//***************************************************************//
function setContents(feat){
var strContent = "";
//if (idResult.layerId != 5) {
// dblArea1 = feat.feature.attributes.Area_Zone / 1000000;
// dblArea1 = dblArea1.toFixed(3);
//}
//else {
var dblArea1 = feat.attributes.Area_Zone;
// }
strContent = "";
strContent = "<tr align=center bgcolor=#FFF4CB color=#14197A>" + "<td align=center style=color:#14197A>" + feat.attributes.اسم_الشركة + "</td>";
strContent = strContent + "<td align=center style=color:#14197A>" + "اسم الشركة" + "</td>" + "</tr>";
strContent = strContent + "<tr align=center bgcolor=#FFF4CB color=#14197A>" + "<td align=center style=color:#14197A>" + feat.attributes.الامارة;
strContent = strContent + "<td align=center style=color:#14197A>" + "الامارة" + "</td>" + "</tr>";
strContent = strContent + "<tr align=center bgcolor=#FFF4CB color=#14197A>" + "<td align=center style=color:#14197A>" + feat.attributes.الموقع;
strContent = strContent + "<td align=center style=color:#14197A>" + "الموقع" + "</td>" + "</tr>";
strContent = strContent + "<tr align=center bgcolor=#FFF4CB color=#14197A>" + "<td align=center style=color:#14197A>" + feat.attributes.نوع_الخام;
strContent = strContent + "<td align=center style=color:#14197A>" + "نوع الخام" + "</td>" + "</tr>";
strContent = strContent + "<tr align=center bgcolor=#FFF4CB color=#14197A>" + "<td align=center style=color:#14197A>" + feat.attributes.رقم_القرار;
strContent = strContent + "<td align=center style=color:#14197A>" + "رقم القرار " + "</td>" + "</tr>";
strContent = strContent + "<tr align=center bgcolor=#FFF4CB color=#14197A>" + "<td align=center style=color:#14197A>" + convertDateFormat(feat.attributes.تاريخ_القرار);
strContent = strContent + "<td align=center style=color:#14197A>" + "تاريخ القرار " + "</td>" + "</tr>";
strContent = strContent + "<tr align=center bgcolor=#FFF4CB color=#14197A>" + "<td align=center style=color:#14197A>" + convertDateFormat(feat.attributes.الانتهاء);
strContent = strContent + "<td align=center style=color:#14197A>" + "تاريخ الانتهاء " + "</td>" + "</tr>";
strContent = strContent + "<tr align=center bgcolor=#FFF4CB color=#14197A>" + "<td align=center style=color:#14197A>" + dblArea1;// feat.feature.attributes.Area_Zone;
strContent = strContent + "<td align=center style=color:#14197A>" + "المساحة" + "</td>" + "</tr>";
//if ((idResult.layerId == 6) || (idResult.layerId == 7) || (idResult.layerId == 9)) {
// strLyr = getPath(idResult.layerId, feat.feature.attributes.OBJECTID_12, "");
// strContent = strContent + "<tr>" + "<td align=center colspan=2 font-size: large;font-weight: 600;color:blue;font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;>" + "<a href=" + strLyr + ">المزيد من المعلومات</a> " + "</td>"
//}
//else {
strLyr = getPath(5, feat.attributes.OBJECTID_1, "");
strContent = strContent + "<tr align=center bgcolor=#FFF4CB>" + "<td align=center colspan=2 font-size: large;font-weight: 600;color:blue;font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;>" + "<a href=" + strLyr + ">المزيد من المعلومات</a> " + "</td>"
//}
return strContent;
}
//**************************************************************//
/* view.on("click", function(screenPoint) {
view.hitTest(screenPoint)
.then(function(response){
// do something with the result graphic
var graphic = response.results[0].graphic;
feat=graphic.attributes.feature;
fExt=graphic.attributes.FExtent;
view.popup.open({location: screenPoint, features: [graphic]});

});

});
*/
//************************************************************************//
//view.when(function () {
// alert("Hello graphic");
// // Watch for when features are selected
// view.popup.watch("selectedFeature", function (graphic) {
// if (graphic) {
// alert("Hello graphic");
// // Set the action's visible property to true if the 'website' field value is not null, otherwise set it to false
// var graphicTemplate = graphic.getEffectivePopupTemplate();
// }
// });
//});
/*view.popup.watch("selectedFeature", function (graphic) {
alert("Hello");
if (graphic) {
var graphicTemplate = graphic.getEffectivePopupTemplate();
graphicTemplate.actions.items[0].visible = graphic.attributes.website ? true : false;
}
});*/
//************************************************************************//
var pointGraphic = new Graphic({
symbol: {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
color: [0, 0, 139],
outline: {
color: [255, 255, 255],
width: 1.5
}
}
});
//***************************************************************************************************************************************/
function queryFeatures(screenPoint) {
const point = view.toMap(screenPoint);
featureLayer.queryFeatures({
geometry: point,
// distance and units will be null if basic query selected
distance: null,
units: null,
spatialRelationship: "intersects",
returnGeometry: false,
outFields: ["*"]
})
.then(function (featureSet) {
// set graphic location to mouse pointer and add to mapview
pointGraphic.geometry = point;
view.graphics.add(pointGraphic);
// open popup of query result
view.popup.open({
location: point,
features: featureSet.features,
featureMenuOpen: true
});
});
}
//***************************************************************************************************************************************/

// Call the appropriate DistanceMeasurement2D or DirectLineMeasurement3D
function distanceMeasurement() {
const type = activeView.type;
//measurement.activeTool = type.toUpperCase() === "2D" ? "distance" : "direct-line";
distanceButton.classList.add("active");
areaButton.classList.remove("active");
}

// Call the appropriate AreaMeasurement2D or AreaMeasurement3D
function areaMeasurement() {
measurement.activeTool = "area";
distanceButton.classList.remove("active");
areaButton.classList.add("active");
}

// Clears all measurements
function clearMeasurements() {
distanceButton.classList.remove("active");
areaButton.classList.remove("active");
measurement.clear();
}

//**************************************************************************************************************************************//
});
</script>
</head>
<body style="overflow-x:hidden;overflow-y:hidden;">
<div style="border:solid 5px #D5A538">
<nav class="navbar navbar-dark navbar-expand-md justify-content-between" style=" border:5px solid #14197A">
<div class="container-fluid" >
<div class="navbar-collapse collapse dual-nav w-50 order-1 order-md-0">
<a href="#" class="navbar-brand">
<img src="Images/leftLogo.png" width="65" alt="" class="d-inline-block align-middle " />
</a>
</div>
<a href="" class="navbar-brand mx-auto d-block text-center" style="color:black; font-family: 'DroidArabicKufiRegular';font-weight: normal;font-style: normal; font-size:xx-large;font-weight:900;color:#14197A">بوابة المعلومات التعدينية</a>
<div class="navbar-collapse collapse dual-nav w-50 order-2">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">

<div class="dropdown">

<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" style="background-color:transparent;border:none;"
aria-haspopup="true" aria-expanded="false"><img src="Images/Menu3.png" style="margin-top:32px;margin-right:-5px" />
</button>

<div class="dropdown-menu dropdown-primary" style="background-color:#FFF4CB;">
<a class="dropdown-item myLabel" style="background-color:#FFF4CB;color:#14197A;font-family:DroidArabicKufiRegular" href="Main.aspx">رخص محاجر مواد البناء</a>
<a class="dropdown-item myLabel" style="background-color:#FFF4CB;color:#14197A;font-family:DroidArabicKufiRegular" href="ManajimAlsageera/Masharia.aspx">رخص المناجم الصغيرة</a>
<a class="dropdown-item myLabel" style="background-color:#FFF4CB;color:#14197A;font-family:DroidArabicKufiRegular" href="RukhsaTaadeen/TaadeenMasharia.aspx">رخص التعدين</a>
<a class="dropdown-item myLabel" style="background-color:#FFF4CB;color:#14197A;font-family:DroidArabicKufiRegular" href="MoadKhaam/KhaamMasharia.aspx">رخص محاجر مواد خام</a>
<a class="dropdown-item myLabel" style="background-color:#FFF4CB;color:#14197A;font-family:DroidArabicKufiRegular" href="Kashf/KashfMasharia.aspx">رخص الكشف</a>
<a class="dropdown-item myLabel" style="background-color:#FFF4CB;color:#14197A;font-family:DroidArabicKufiRegular" href="Magamaat/Moatmada.aspx">المجمعات التعدينية</a>
</div>
</div>

</li>

<li class="nav-item" >
<a class="nav-link" id="logout" href="Default.aspx">
<img src="Images/logout3.png" style="margin-top:30px" /> </a>
</li>

<li class="nav-item">
<a class="nav-link" href="Home.aspx">
<img src="Images/Home3.png" style="margin-top:30px"/>
</a>
</li>

<li class="nav-item" >
<a class="nav-link" href="">
<img src="Images/newlogo2.png" width="170" alt="" class="d-inline-block align-middle mr-2 mt-1" />
</a>
</li>

</ul>
</div>
</div>
</nav>
</div>
<div class="container-fluid">
<div id="mainRow" class="row">
<div id="right" class="col col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div id="viewDiv" style="left: 0px; right: 0px; bottom: 0px; top: 0px; height: 100vh">
</div>
<div id="topbar">
<button class="action-button esri-icon-measure-line" id="distanceButton" type="button" title="Measure distance between two points"></button>
<button class="action-button esri-icon-measure-area" id="areaButton" type="button" title="Measure area" ></button>
</div>

<div id="menu" class="esri-widget" style="border:solid 5px #14197A;background-color:#D5A538">
<a id="SearchButton1" href="#" class="dropdown-item myLabel" style="background-color:#FFF4CB;color:#14197A;font-family:DroidArabicKufiRegular;border:2px solid #14197A">رخص محاجر مواد البناء</a>
<a id="SearchButton2" href="#" class="dropdown-item myLabel" style="background-color:#FFF4CB;color:#14197A;font-family:DroidArabicKufiRegular;border:2px solid #14197A">رخص المناجم الصغيرة</a>
<a id="SearchButton3" href="#" class="dropdown-item myLabel" style="background-color:#FFF4CB;color:#14197A;font-family:DroidArabicKufiRegular;border:2px solid #14197A">رخص التعدين</a>
<a id="SearchButton4" href="#" class="dropdown-item myLabel" style="background-color:#FFF4CB;color:#14197A;font-family:DroidArabicKufiRegular;border:2px solid #14197A">رخص محاجر مواد خام</a>
<a id="SearchButton5" href="#" class="dropdown-item myLabel" style="background-color:#FFF4CB;color:#14197A;font-family:DroidArabicKufiRegular;border:2px solid #14197A">رخص الكشف</a>
<a id="SearchButton6" href="#" class="dropdown-item myLabel" style="background-color:#FFF4CB;color:#14197A;font-family:DroidArabicKufiRegular;border:2px solid #14197A">المجمعات التعدينية</a>
<a id="SearchButton7" href="#" class="dropdown-item myLabel" style="background-color:#FFF4CB;color:#14197A;font-family:DroidArabicKufiRegular;border:2px solid #14197A">الاحتياطي التعدينى</a>
</div>
</div>
<div id="left" class="col col-sm-0 col-md-0 col-lg-0 col-xl-0">
</div>
</div>

</div>
<div id="pBar" class = "progress" style="height:100px; width:100px;visibility:hidden;top:50%;left:45%;z-index:100;position:fixed;background-color:transparent;">
<img src="Images/loading.gif" height="100" width="100" />
</div>
<form id="Form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" EnablePageMethods="true" EnableScriptGlobalization="true" runat="server" />
</form>
</body>
</html>

this is my code.here i remove url of my image service.pls check this.