<!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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.15/"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style>
html, body {
height: 100% !important;
width: 100% !important;
margin: 0px;
padding: 0px;
}
#menu {
padding: 1em;
}
.padding-0{
padding-right:0;
padding-left:0;
}
.navbar {
background-color: #FFF4CB;
height: 80px;
min-height: 80px;
max-height: 80px;
}
.container-fluid {
background-color: transparent;
height: 100% !important;
padding: 0 !important;
}
#ViewDiv {
width: 100% !important;
min-height: 100vh;
}
.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);
}
});
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 DirectLineMeasurement3D({
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 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;
}
}
function setActiveButton(selectedButton) {
// focus the view to activate keyboard shortcuts for sketching
view.focus();
var elements = document.getElementsByClassName("active");
for (var i = 0; i < elements.length; i++) {
elements.classList.remove("active");
}
if (selectedButton) {
selectedButton.classList.add("active");
}
}
/********************
* Add feature layer
********************/
var pt = ext.cneter;
// Carbon storage of trees in Warren Wilson College.
/*
var featureLayer = new FeatureLayer({
url:
"https://gis.dmmr.gov.sa/arcgis/rest/services/DMMR/Mop_Main_App_3_june/FeatureServer/29"
});
map.add(featureLayer);
//featureLayer.when(function () {
// //featureLayer.definitionExpression = createDefinitionExpression("");
// zoomToLayer(featureLayer);
//});
*/
view.goTo({
position: {
x: 43.951098,
y: 24.304549,
z: 5000000,
spatialReference: {
wkid: 4326
}
},
heading: 0,
tilt: 0
},
{
speedFactor: 0.1,
easing: "out-quint"
});
/*
featureLayer.load().then(function() {
// Set the view extent to the data extent
//view.extent = layer.fullExtent;
featureLayer.popupTemplate = featureLayer.createPopupTemplate();
});
*/
var zoomOutAction = {// This text is displayed as a tooltip
title: "Zoom out",
// The ID by which to reference the action in the event handler
id: "zoom-out",
// Sets the icon font used to style the action button
className: "esri-icon-zoom-out-magnifying-glass"
};
view.popup.viewModel.actions.push(zoomOutAction);
// The function to execute when the zoom-out action is clicked
function zoomOut() {
var new_ext = new Extent({ xmin: fExt.xmin, ymin: fExt.ymin, xmax: fExt.xmax, ymax: fExt.ymax, spatialReference: { wkid: 4326 }});
//view.goTo(fExt, { speedFactor: 0.1, easing: "out-quint" });
view.goTo(new_ext);
}
// 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
var layerListExpand = new Expand({
view: view,
content: layerList,
expandIconClass: "esri-icon-layer-list1",
group: "top-right"
});
view.ui.add([layerListExpand], "top-right");
});
var legend = new Legend({view: view,
style: "classic" // other styles include 'classic'
});
//view.ui.add(legend, "bottom-left");
var basemapGallery = new BasemapGallery({ view: view });
// Add the widget to the top-right corner of the view
var bgExpand = new Expand({
view: view,
content: basemapGallery,
expandIconClass: "esri-icon-basemap",
expandTooltip: "Basemap",
group: "top-right"
});
// 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});
var scaleBar = new ScaleBar({
view: view,
unit: "dual" // The scale bar displays both metric and non-metric units.
});
var measureExpand = new Expand({
view: view,
content: topbar,
expandIconClass: "esri-icon-measure-line",
expandTooltip: "measement",
group: "top-right"
});
var ccExpand= new Expand({
view: view,
content: ccWidget,
expandIconClass: "esri-icon-applications",
group: "top-right"
});
var searchExpand= new Expand({
view: view,
content: searchWidget,
expandIconClass: "esri-icon-search",
group: "top-right"
});
var legendExpand = new Expand({
view: view,
content: legend,
expandIconClass: "esri-icon-default-action",
group: "top-right"
});
var menuExpand = new Expand({
view: view,
expandIconClass: "esri-icon-menu",
content: document.getElementById("menu"),
expanded: false,
group: "top-right"
});
//view.ui.add("topbar", "top-right");
view.ui.add([bgExpand, measureExpand,ccExpand,searchExpand,legendExpand,menuExpand], "top-right");
//view.ui.add([ccExpand],"bottom-right");
/*view.ui.add([
{
component: bgExpand,
position: "top-right",
index: 0
},
{
component: ccWidget,
position: "bottom-right",
index: 1
},
{
component: scaleBar,
position: "bottom-left",
index: 2
}]);
*/
//var vp = new Viewpoint({targetGeometry: geom.extent});
//home.viewpoint = vp;
var homeBtn = new Home({view: view});
// Add the home button to the top left corner of the view
view.ui.add(homeBtn, "top-left");
homeBtn.goToOverride = function (view, goToParams) {
//alert("gp");
graphicsLayer.removeAll();
return view.goTo({
position: {
x: 43.951098,
y: 24.104549,
z: 5000000,
spatialReference: {
wkid: 4326
}
},
heading: 0,
tilt: 0
},
{
speedFactor: 0.1,
easing: "out-quint"
});
};
/******************************************************************/
function setView(){
view.goTo({
position: {
x: 43.951098,
y: 24.104549,
z: 5000000,
spatialReference: {
wkid: 4326
}
},
heading: 0,
tilt: 0
},
{
speedFactor: 0.1,
easing: "out-quint"
});
}
/******************************************************************/
function zoomToLayer(layer) {
return layer.queryExtent().then(function (response) {
view.goTo(response.extent).catch(function (error) {
if (error.name != "AbortError") {
console.error(error);
}
});
});
}
//************************************************************************************************************************************//
function dynamicPanel() {
$('#mainRow').css('direction', 'rtl');
$('#MenusTools').css('direction', 'ltr');
//$("#mainRow").append("<div id=left class='row mt-1'></div>");
$('#left').empty();
$('#left').removeClass('col-lg-0');
$('#left').removeClass('col-xl-0');
$('#left').removeClass('col-sm-0');
$('#left').removeClass('col-md-0');
$('#left').addClass('col-lg-6');
$('#left').addClass('col-xl-6');
$('#left').addClass('col-sm-6');
$('#left').addClass('col-md-6');
$('#left').addClass('padding-0');
$('#left').css('background-color','#14197A');
$('#left').css('height', 'inherit');
$('#left').css('width', '100%');
$('#left').css('float', 'left !important');
$('#right').removeClass('col-lg-12');
$('#right').removeClass('col-xl-12');
$('#right').removeClass('col-sm-12');
$('#right').removeClass('col-md-12');
$('#right').addClass('col-lg-6');
$('#right').addClass('col-xl-6');
$('#right').addClass('col-sm-6');
$('#right').addClass('col-md-6');
$('#right').addClass('padding-0');
$('#right').css('height', '100%');
$('#right').css('width', '100%');
$('#right').css('float', 'right !important');
//*********************Area Div**********************************************//
$("#divArea").append("<div id=divArea1 class='col col-lg-12 col-xl-12 col-md-12 col-lg-12' ></div>");
$("#divArea1").append("<div id=divArea2 class='row'> </div>");
$("#divArea2").append("<div id=divArea21 class='col col-lg-6 col-xl-6 col-md-6 col-lg-6' ></div>");
$("#divArea2").append("<div id=divArea22 class='col col-lg-6 col-xl-6 col-md-6 col-lg-6' ></div>");
$("#divArea21").append("<div id=divArea211 class='row' ></div>");
$("#divArea21").css('margin-right', '8px');
$("#divArea21").css('border-right', 'solid 2px grey');
$("#divArea21").css('border-top', 'solid 2px grey');
$("#divArea21").css('border-bottom', 'solid 2px grey');
$('#divArea211').css('direction', 'ltr');
$('#divArea211').css('margin-left', '60%');
$('#divArea211').css('font-weight', 'bold');
$('#divArea211').css('font-size', 'large');
$('#divArea211').css('font-family', 'DroidArabicKufiRegular');
$('#divArea211').css('color', '#14197A');
$("#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.