Create a custom buttons pane on side of map

rsharma — Fri, 06 Mar 2020 07:09:07 GMT

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

Re: Create a custom buttons pane on side of map

RobertScheitlin__GISP — Fri, 10 Dec 2021 22:40:01 GMT

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

topic Create a custom buttons pane on side of map in ArcGIS JavaScript Maps SDK Questions

Create a custom buttons pane on side of map

Re: Create a custom buttons pane on side of map