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.
Solved! Go to Solution.
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>
Gregory,
Can you share your code that displays this issue?
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.
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>
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).
This works great. The button element is good. It has that 3d-ish click style. Thank you.