select feature by url parameters

183
1
01-15-2021 07:43 AM
soma3
by
New Contributor

this my code and i want to use url parameters to select feature instead of just zoom to extent

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<title>مخططات عقارية</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/themes/dark-blue/main.css">
<style>

html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 1);
}
#titleDiv {
padding: 10px;
}

#titleText {
font-size: 20pt;
font-weight: 60;
padding-bottom: 10px;
}

/* Style the buttons inside the tab */
.tab button {
background-color: rgb(0, 174, 255);
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 15px;
}

/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
background-color: #fff;
}

/* Style the tab content */
.tabcontent {
background-color: #fff;
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
font-size: 20px;
}

.esri-popup__main-container {
outline: none;
pointer-events: auto;
position: relative;
z-index: 1;
width: 340px;
max-height: 100px;
background-color: #000;
display: flex;
flex-flow: column nowrap;
}
.esri-widget {
box-sizing: border-box;
color: #f4f4f4;
font-size: 14px;
font-family: "Avenir Next W00","Helvetica Neue",Helvetica,Arial,sans-serif;
line-height: 1.3em;
background-color: #000;
}

.esri-popup__content {
display: flex;
flex-flow: column nowrap;
flex: 1 1 auto;
font-size: 12px;
font-weight: 400;
margin: 0 15px 0px;
overflow: auto;
line-height: normal;
}

 

[class*="esri-popup--aligned-bottom-"] .esri-popup__footer {
border-bottom: solid 0px rgba(0,0,0,1);
}
.esri-popup__footer {
align-items: center;
display: none;
flex: 1 1auto;
justify-content: space-between;
padding: 0px 0;
}

.esri-view-height-less-than-medium .esri-popup__main-container {
max-height: 110px;
}
.esri-view-width-xlarge .esri-popup__main-container {
width: 340px;
}

li {
list-style-type: none;
}
.esri-ui-corner .esri-component {
box-shadow: 0 0px 0px rgba(0, 0, 0, 0.3);
}
</style>

<script src="https://js.arcgis.com/4.16/"></script>
<script>
require([
"esri/WebMap",
"esri/widgets/BasemapGallery",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/widgets/Search",
"esri/widgets/LayerList",
"esri/widgets/Legend",
"esri/widgets/Home",
"esri/widgets/Expand" ,
], function(WebMap,BasemapGallery, MapView,FeatureLayer ,Search ,LayerList ,Legend ,Home
,Expand) {

var map = new WebMap({
portalItem: {
id: "db1d9f5508db440596c9af8e285cfda8"
}
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [43.535531,29.610050],
zoom: 14,
ui: {
components: ["attribution"]
},
popup: {autoCloseEnabled :true,visibleElements : { featureNavigation :false ,
closeButton: false
},
dockEnabled: true,
dockOptions: {
// Disables the dock button from the popup
buttonEnabled: false,
// Ignore the default sizes that trigger responsive docking
breakpoint: true,
position :"bottom-center",
}
}

});
view.popup.viewModel.actions.getItemAt(0).visible = false;
var myPopupTemplate = {
title:"",
content: "<img src='https://i.ibb.co/bvNj8CL/logos4.jpg' align=right width=69px height=auto >"+"<ul text-align=right' 'style=list-style:none; dir='rtl' >"+
" < 'style=list-style-type: none;'><b>"+" <a href= 'https://wa.me/?text=https://rbw.sa/public/rwf/V/index.html' data-action= 'share/whatsapp/share' target='_blank'> <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRJj4MNsTON-A716UUH8HrPXWAkiOsEuLL2bg&usqp=CAU' align=left style='margin-left:130px' width=20px display=inline; /> </a>"+"<li><a style='text-align:right margin-right:16px ;color:white'>{TxtMemo} </a> <a href ='{GM}' ><img src='https://i.ibb.co/58ppXrY/gm3.png'></a></b></li> "+"<li><a style='text-align:right margin-right:12px; color:white'><b> {Area} </b></a></li>"+"<li><a style='text-align:right margin-right:12px ;color:white'><b>{Price} </b></a></li>"+
"<li style=list-style-type: none; ><b> <a href='tel:{Call_Number}' style='text-align:right ;margin-right:26px';>{Call_Number} </a></b></li>"+"</ul>"
} ;
var labelClass =
{
symbol:
{
type: "text",

font:{
size:7.5,
weight: "bold"
}
},
labelPlacement: "always-horizontal",
labelExpressionInfo:
{
expression: "$feature.رقم_القطعة"
},
maxScale: 0,
minScale: 8000,
};
var labelClass2 =
{
symbol:
{
type: "text",
color:"white",
haloColor: "black",
haloSize: 1,
font:{
size:10,
weight: "bold"
}
},
labelPlacement: "above-center",
labelExpressionInfo:
{
expression: "$feature.Names"
},
maxScale: 0,
minScale: 9000,
};
if ('URLSearchParams' in window) { // Feature detection (URLSearchParams is not supported by Internet Explorer)
var url = new URL(document.URL);
var search_params = url.searchParams;
if(search_params.has('m')) {
var mylayerz = search_params.get('m');
var expr = "OBJECTID = '" +mylayerz + "'";
} else {
var mylayerz = "";
var expr = "2=2";
}
};

var mylayer= new FeatureLayer({
url: "https://services6.arcgis.com/f6IbF4Mn2X25xEIp/arcgis/rest/services/rbbgdb/FeatureServer/0",definitio...: expr,
title:"OBJECTID" +mylayerz ,popupTemplate: myPopupTemplate,labelingInfo: [labelClass],outFields: ["TxtMemo","OBJECTID","إسم_المعلم"],
});
map.add(mylayer);
var mylayer2= new FeatureLayer({
url: "https://services6.arcgis.com/f6IbF4Mn2X25xEIp/arcgis/rest/services/rbbgdb/FeatureServer/1",
labelingInfo: [labelClass2]
});
map.add(mylayer2);
var mylayer1 = new FeatureLayer({
url: "https://services6.arcgis.com/f6IbF4Mn2X25xEIp/arcgis/rest/services/rbbgdb/FeatureServer/2"
});
map.add(mylayer1);
view.popup.watch("selectedFeature", function(graphic){
if(graphic.layer === mylayer){
view.popup.triggerAction(0); //This calls the popup Zoom To action
}
});
var searchWidget = new Search({
view: view,
sources: [
{
layer: mylayer,
searchFields: ["TxtMemo","OBJECTID","إسم_المعلم"],
displayField: ("TxtMemo","OBJECTID","إسم_المعلم"),
exactMatch: false,
outFields: ["TxtMemo","OBJECTID","إسم_المعلم"],
name:" ابحث في مخطط المحمدية",
placeholder: "example: 1080",
}
],
includeDefaultSources: false,
});
var layerList = new LayerList({
view: view,
});
var expand12 = new Expand({ expandIconClass:"esri-icon-maps",
view: view,
content:layerList,
Group:"top-left"
});

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

var legend = new Legend({
view: view,
layerInfos: [
{
layer:mylayer,
title:"مخطط المحمدية"
},
],
});


var expand2 = new Expand({
view: view,
content:searchWidget,
Group:"top-right"
});
var expand3= new Expand({
view: view,
content:legend,
group: "bottom-right",
});

view.ui.add("nav", "top-left");
mylayer
.when(function( ) {

return mylayer.query();

})
.then(function(response) {

view.goTo(response.query);

});

});
</script>
</head>
<body>

<div id="viewDiv"></div>

<div id="nav">
<ul>

<li><a href="Visitors_Combined.html"style="text-decoration:none;"><b>قوقل مابس</b></a></li>

</ul>
</div>








</html>

0 Kudos
1 Reply
BlakeTerhune
MVP Regular Contributor

It looks like you're already getting your query parameters and setting an expression. However, it doesn't look like you're doing anything to query or highlight the features. Take a look at this sample.

0 Kudos