Custom buttons

GregoryBologna · ‎10-01-2019

I am using JS API 4.12. What options are available to create custom buttons with events to a MapView? Do I create a custom widget or use dojo? I'm not sure if this is valid, but I tried using dojo by adding "dijit/form/Button" but the rendered dojo button appears to add a toggle button and other stuff.

RobertScheitlin__GISP · ‎10-02-2019

Gregory,

I think you are looking for 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>Intro to MapView - Create a 2D map - 4.12</title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

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

    <script>
      require(["esri/Map", "esri/views/MapView"], function(Map, MapView) {
        var map = new Map({
          basemap: "streets"
        });

        var view = new MapView({
          container: "viewDiv",
          map: map,
          zoom: 12,
          //padding: 12
          center: [15, 65], // longitude, latitude
          constraints: {
            maxScale: 285
          },
          autoResize: true,
          popup: {
            viewModel: {
              actions: {
                zoom: false
              },
              actionsMenuEnabled: false
            },
            dockEnabled: false,
            dockOptions: {
              breakpoint: false,
            },
            featureNavigationEnabled: true
          }
        });
        
        var element = document.createElement('div');
        element.className = "esri-icon-collection esri-widget--button esri-widget esri-interactive";
        element.addEventListener('click', function(evt){
          console.log("clicked"); 
        })
        view.ui.add(element, "top-right");
      });
    </script>
  </head>

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

View solution in original post

RobertScheitlin__GISP · ‎10-01-2019

Gregory,

Can you share your code that displays this issue?

GregoryBologna · ‎10-02-2019

Thanks. This may not work out afterall because the map takes longer to load when adding "dijit/form/Button". I am looking into building a widget using React.

add to require

"dijit/form/Button"

var view = new MapView({

map: map,

container: "viewDiv",

center: [lng, lat],

zoom: 12,

padding: padding,

constraints: {

maxScale: 285

},

autoResize: true,

popup: {

viewModel: {

actions: {

zoom: false

},

actionsMenuEnabled: false

},

dockEnabled: false,

dockOptions: {

breakpoint: false,

},

featureNavigationEnabled: true

}

});

create button

var button = new Button({

type: "button",

iconClass: "esri-icon-collection esri-widget--button esri-widget esri-interactive",

showLabel: false,

label: "",

onClick: function(){

console.log("clicked");

}

});

then add to view

view.ui.add(button, "top-right");

RobertScheitlin__GISP · ‎10-02-2019

Gregory,

I think you are looking for 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>Intro to MapView - Create a 2D map - 4.12</title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

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

    <script>
      require(["esri/Map", "esri/views/MapView"], function(Map, MapView) {
        var map = new Map({
          basemap: "streets"
        });

        var view = new MapView({
          container: "viewDiv",
          map: map,
          zoom: 12,
          //padding: 12
          center: [15, 65], // longitude, latitude
          constraints: {
            maxScale: 285
          },
          autoResize: true,
          popup: {
            viewModel: {
              actions: {
                zoom: false
              },
              actionsMenuEnabled: false
            },
            dockEnabled: false,
            dockOptions: {
              breakpoint: false,
            },
            featureNavigationEnabled: true
          }
        });
        
        var element = document.createElement('div');
        element.className = "esri-icon-collection esri-widget--button esri-widget esri-interactive";
        element.addEventListener('click', function(evt){
          console.log("clicked"); 
        })
        view.ui.add(element, "top-right");
      });
    </script>
  </head>

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

KellyHutchins · ‎10-03-2019

Robert's reply is correct but a I'd modify the line where you create the element to use document.createElement("button") instead of document.createElement("div").

     var element = document.createElement('button');‍

The reason for using a button instead of a div since button's have keyboard accessibility built-in by default so you can navigate to the button using the tab keys and activate it using return or enter. This is important when building web sites to ensure they meet accessibility standards (508 and WCAG).

GregoryBologna · ‎10-09-2019

This works great. The button element is good. It has that 3d-ish click style. Thank you.