Select to view content in your preferred language

Radio Button inside Pup Window

477
1
Jump to solution
05-22-2022 01:57 AM
NadirHussain
Frequent Contributor

<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>Identify | Sample | ArcGIS API for JavaScript 4.23</title>

<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}

.esri-popup .esri-popup-header .esri-title {
font-size: 18px;
font-weight: bolder;
}

.esri-popup .esri-popup-body .esri-popup-content {
font-size: 14px;
}
</style>

<link
rel="stylesheet"
href="https://js.arcgis.com/4.23/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.23/"></script>

<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/MapImageLayer",
"esri/rest/identify",
"esri/rest/support/IdentifyParameters"
], function (Map, MapView, MapImageLayer, identify, IdentifyParameters) {
var params;

// URL to the map service where the identify will be performed
var identifyURL =
"https://sampleserver6.arcgisonline.com/arcgis/rest/services/MtBaldy_BaseMap/MapServer";

// Add the map service as a MapImageLayer
// use identify to query the service to add interactivity to the app
var identifyLayer = new MapImageLayer({
url: identifyURL,
opacity: 0.5
});

var map = new Map({
basemap: "osm"
});
map.add(identifyLayer);

var view = new MapView({
map: map,
container: "viewDiv",
center: [-117.23502, 34.23911],
zoom: 13
});

view.when(function () {
// executeIdentify() is called each time the view is clicked
view.on("click", executeIdentify);

// Set the parameters for the identify
params = new IdentifyParameters();
params.tolerance = 3;
params.layerIds = [0, 1, 2, 3, 4];
params.layerOption = "All";
params.width = view.width;
params.height = view.height;
});

// Executes each time the view is clicked
function executeIdentify(event) {
// Set the geometry to the location of the view click
params.geometry = event.mapPoint;
params.mapExtent = view.extent;
document.getElementById("viewDiv").style.cursor = "wait";

// This function returns a promise that resolves to an array of features
// A custom popupTemplate is set for each feature based on the layer it
// originates from
identify
.identify(identifyURL, params)
.then(function (response) {
var results = response.results;

return results.map(function (result) {
var feature = result.feature;
var layerName = result.layerName;

feature.attributes.layerName = layerName;
 if (layerName === "Landuse") {
feature.popupTemplate = {
// autocasts as new PopupTemplate()
title: layerName,
content:
"<b>Block ID:</b> {BLOCK_ID} " +
"<br><b>Geometry Type:</b> {Shape}" +
"<br><b>Landuse Area:</b> {Shape_Area}"+
"<br><label for=rdComp >اسم الشركة</label><input type=radio id= rdComp name=rdGroup value=Comp checked=checked></><br>"
};

}
return feature;
});
})
.then(showPopup); // Send the array of features to showPopup()

// Shows the results of the identify in a popup once the promise is resolved
function showPopup(response) {
if (response.length > 0) {
view.popup.open({
features: response,
location: event.mapPoint
});
}
document.getElementById("viewDiv").style.cursor = "auto";
}
}
});
</script>
</head>

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

 

Dear All i want to add radio button inside a popup.i have successfully add this button in 3.4.But i cant add this in 4.23.Please help me to solve this issue.When i run the identify tool i just see label but no radio button.please help.

 

Thanks in advance.

0 Kudos
1 Solution

Accepted Solutions
NadirHussain
Frequent Contributor

i have solved this issue.

if you return div not string the readio button will be display.

like fallowing script

var div= document.createElement("div");

div.innerHTML=HTML String;

 

 

View solution in original post

0 Kudos
1 Reply
NadirHussain
Frequent Contributor

i have solved this issue.

if you return div not string the readio button will be display.

like fallowing script

var div= document.createElement("div");

div.innerHTML=HTML String;

 

 

0 Kudos