select feature by url parameters

soma3 · ‎01-15-2021

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>

BlakeTerhune · ‎01-15-2021

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.