Custom PopupTemplate

Wade — Thu, 19 May 2022 08:40:08 GMT

If you want to customize the content of popup, you can use CSS, but if you want to change the outer frame, is there any other way to use it?

<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>Intro to PopupTemplate | Sample | ArcGIS API for JavaScript 4.23</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } .esri-popup__header { position: relative; font-size: 12px; align-items: flex-start; justify-content: space-between; flex: 0 0 auto; background-color: #336ba2; color: #FFF; } </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/layers/FeatureLayer", "esri/views/MapView", "esri/widgets/Legend" ], (Map, FeatureLayer, MapView, Legend) => { const map = new Map({ basemap: "gray-vector" }); const view = new MapView({ container: "viewDiv", map: map, center: [-73.95, 40.702], zoom: 10 }); const template = { title: "{NAME} in {COUNTY}", content: [ { type: "fields", fieldInfos: [ { fieldName: "B12001_calc_pctMarriedE", label: "Married %" }, { fieldName: "B12001_calc_numMarriedE", label: "People Married", format: { digitSeparator: true, places: 0 } }, { fieldName: "B12001_calc_numNeverE", label: "People that Never Married", format: { digitSeparator: true, places: 0 } }, { fieldName: "B12001_calc_numDivorcedE", label: "People Divorced", format: { digitSeparator: true, places: 0 } } ] } ] }; const featureLayer = new FeatureLayer({ url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/ACS_Marital_Status_Boundaries/FeatureServer/2", popupTemplate: template }); map.add(featureLayer); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>

topic Custom PopupTemplate in ArcGIS JavaScript Maps SDK Questions

Custom PopupTemplate