Custom buttons

1545
5
Jump to solution
10-01-2019 11:39 AM
GregoryBologna
Occasional Contributor

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. 

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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

5 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Gregory,

   Can you share your code that displays this issue?

0 Kudos
GregoryBologna
Occasional Contributor

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: [lnglat],
          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");
0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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

KellyHutchins
Esri Frequent Contributor

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
Occasional Contributor

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

0 Kudos