Create a custom buttons pane on side of map

Question

Hi, i want to create a pane with buttons on side of map like this, with height equal to map div

RobertScheitlin__GISP · Accepted Answer

Rajni, Look at a sample like this as a starting point to get a side panel. https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=widgets-feature-sidepanel Change it, something like this: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" /> <title>Side panel - 4.14</title> <link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css" /> <script src="https://js.arcgis.com/4.14/"></script> <style> html, body { padding: 0; margin: 0; height: 100%; width: 100%; } #viewDiv { float: left; padding: 0; margin: 0; height: 100%; width: 70%; } #side-node { float: left; width: 30%; height: 100%; padding: 1em; } </style> <script> require([ "esri/WebMap", "esri/layers/FeatureLayer", "esri/views/MapView" ], function(WebMap, FeatureLayer, MapView) { const fLayer = new FeatureLayer({ portalItem: { id: "f430d25bf03744edbb1579e18c4bf6b8" }, layerId: 2, outFields: ["*"] }); const map = new WebMap({ portalItem: { // autocasts as new PortalItem id: "372b7caa8fe340b0a6300df93ef18a7e" }, layers: [fLayer] }); const Btn1 = document.getElementById("btn1"); const Btn2 = document.getElementById("btn2"); const view = new MapView({ container: "viewDiv", map: map, center: [-74, 41.5], zoom: 11, popup: { autoOpenEnabled: false } }); view.when().then(function() { Btn1.addEventListener("click", function() { alert("Button 1 clicked") }); Btn2.addEventListener("click", function() { alert("Button 2 clicked") }); }); }); </script> </head> <body> <div id="side-node" class="esri-widget"> <button id="btn1" class="esri-button">Button 1</button><br /> <button id="btn2" class="esri-button">Button 2</button> </div> <div id="viewDiv"></div> </body> </html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍