Custimizing Popup Widget Template

Den-GIS — Fri, 25 Jan 2019 08:49:25 GMT

I'm trying to set the "Layer List" button on the popup widget open as the default setting.The goal is when the user clicks on the map it should immediately display the identifiable layers.

Is there any possibility to get such setting?

Thanks in advance

Re: Custimizing Popup Widget Template

RobertScheitlin__GISP — Sat, 11 Dec 2021 20:38:00 GMT

Denis,

There is no why to set the menu to be open by default for the popup. When you programatically open the popup using the open method then you can set the property called featureMenuOpen to true.

Here is a workaround though that works:

watchUtils.when(view.popup, "selectedFeature", function(evt){
  setTimeout(function(){
    var menu = query(".esri-popup__feature-menu-button")[0];
    menu.click();
  }, 300);
});‍‍‍‍‍‍

Re: Custimizing Popup Widget Template

Den-GIS — Fri, 25 Jan 2019 16:49:25 GMT

Robert,

I've also seen the open method and property featureMenuOpen. I've tried something with it, unfortunately It didn't work I'm not in the Office right now. I will try to integrate your Code. I'll give you a Feedback as soon as I've tested. greetings

Re: Custimizing Popup Widget Template

Den-GIS — Sat, 26 Jan 2019 00:11:48 GMT

Robert,

I added your code, unfortunately it did not work. Here is my entire code example.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Custom popup</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">
<script src="https://js.arcgis.com/4.6/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/MapImageLayer",
"esri/layers/FeatureLayer",
"esri/widgets/Home",
"esri/widgets/Search",
"esri/widgets/BasemapToggle",
"esri/PopupTemplate",
"esri/tasks/Locator",
"esri/tasks/IdentifyTask",
"esri/tasks/QueryTask",
"esri/tasks/support/Query",
"esri/core/watchUtils",
"dojo/dom-construct",
"dojo/dom",
"dojo/on",
"dojo/domReady!"
], function(
Map,
MapView,
MapImageLayer,
FeatureLayer,
Home,
Search,
BasemapToggle,
PopupTemplate,
Locator,
IdentifyTask,
QueryTask,
Query,
watchUtils,
domConstruct,
dom,
on) {
/*****************************************************************
// * Create a FeatureLayer instance pointing to a Map Service
*****************************************************************/
var Lyr1 = new FeatureLayer({
url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/MontgomeryQuarters/MapServer/0",
id: "Layer1",
opacity: 1.0,
visible: true,
});
var Lyr2 = new FeatureLayer({
url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/MontgomeryQuarters/MapServer/0",
id: "Layer2",
opacity: 1.0,
visible: true,
});
var Lyr3 = new FeatureLayer({
url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/MontgomeryQuarters/MapServer/0",
id: "Layer3",
opacity: 1.0,
visible: true,
});
var Lyr4 = new FeatureLayer({
url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/MontgomeryQuarters/MapServer/0",
id: "Layer4",
opacity: 1.0,
visible: true,
});

/*****************************************************************
// * Create a Popups Template
*****************************************************************/

var Lyr1PopupTemplate = {
title: "Layer1",
content: "This is a Layer 1!"
};
Lyr1.popupTemplate = Lyr1PopupTemplate;

var Lyr2PopupTemplate = {
title: "Layer2",
content: "This is a Layer 2!"
};
Lyr2.popupTemplate = Lyr2PopupTemplate;

var Lyr3PopupTemplate = {
title: "Layer3",
content: "This is a Layer 3!"
};
Lyr3.popupTemplate = Lyr3PopupTemplate;

var Lyr4PopupTemplate = {
title: "Layer4",
content: "This is a Layer 4!"
};
Lyr4.popupTemplate = Lyr4PopupTemplate;

var map = new Map({
basemap: "gray",
layers: [Lyr1, Lyr2, Lyr3, Lyr4]
});

var view = new MapView({
container: "viewDiv",
map: map,
center: [-85.816269, 32.378512], // lon, lat
scale: 40000
});
view.popup.dockOptions = {
buttonEnabled: false,
breakpoint: false,
};
watchUtils.when(view.popup, "selectedFeature", function(evt){
setTimeout(function(){
var menu = query(".esri-popup__feature-menu-button")[0];
menu.click();
}, 300);
});

/****************************************************************/
/* Creating widgets*/
/****************************************************************/
var homeWidget = new Home({
view: view
});
view.ui.add(homeWidget, "top-left");

var searchWidget = new Search({
view: view,
});

view.ui.add(searchWidget, {
position: "top-right"
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>

Re: Custimizing Popup Widget Template

RobertScheitlin__GISP — Sat, 26 Jan 2019 01:17:09 GMT

Denis,

You forgot to add "dojo/query", to your require array.

Re: Custimizing Popup Widget Template

Den-GIS — Sat, 26 Jan 2019 16:49:59 GMT

Robert,

Great, it worked.

Thank you very much for your help!

topic Custimizing Popup Widget Template in ArcGIS JavaScript Maps SDK Questions

Custimizing Popup Widget Template

Re: Custimizing Popup Widget Template

Re: Custimizing Popup Widget Template

Re: Custimizing Popup Widget Template

Re: Custimizing Popup Widget Template

Re: Custimizing Popup Widget Template