topic Re: Custom buttons in ArcGIS JavaScript Maps SDK Questions

Custom buttons

GregoryBologna — Tue, 01 Oct 2019 18:39:01 GMT

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.

Re: Custom buttons

RobertScheitlin__GISP — Tue, 01 Oct 2019 18:58:49 GMT

Gregory,

Can you share your code that displays this issue?

Re: Custom buttons

GregoryBologna — Wed, 02 Oct 2019 19:04:13 GMT

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");

Re: Custom buttons

RobertScheitlin__GISP — Fri, 10 Dec 2021 20:48:00 GMT

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

Re: Custom buttons

KellyHutchins — Thu, 03 Oct 2019 22:20:59 GMT

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).

Re: Custom buttons

GregoryBologna — Wed, 09 Oct 2019 17:19:39 GMT

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