ArcGIS Maps SDK for JavaScript example: custom button (calcite-action with SVG)
Hi,
Can you add your own custom buttons to an ArcGIS JavaScript application, one with your own picture, I mean? 
The SDK comes with a load of widgets, all with their own icons, and for your custom buttons there is a whole set of Esri Icon Fonts (Calcite theme) available.
But now I want to add my own icon, is that possible? I stumbled into this post use of custom icon, where it was suggested to use calcite-action.
And yeah, with this information I managed to use my own SVG image in a button - see code below.
It is a huge image - 924 by 924 pixels! - but because it is a fully Scalable Vector Graphic I can squeeze it down to 25x25px. And to stick with the Esri branded theme I use a fill color of #6e6e6e. In this way it fits in nicely with the rest of the UI.
What do you think?
Cheers,
Egge-Jan
TWIAV | ArcGIS JavaScript example - custom button
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>TWIAV | ArcGIS JavaScript example - custom button</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.25/esri/css/main.css">
<script src="https://js.arcgis.com/4.25/"></script>
<style>
html, body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
font-family: sans-serif;
}
#header {
width: 100%;
height: 70px;
background-color: #154273;
color:#FFFFFF;
margin: 0;
}
#headertext {
float: left;
font-size: 35px;
color: white;
line-height: 70px;
padding-left: 15px;
}
#viewDiv {
position: absolute;
top: 70px;
bottom: 0;
right: 0;
left: 0;
padding: 0;
margin: 0;
}
</style>
<script>
require([
"esri/Map",
"esri/geometry/Point",
"esri/views/MapView"
], function(Map, Point, MapView) {
const map = new Map({
basemap: { portalItem: { id: "7aea6fa913a94176a1074edb40690318" } } // Topo RD --> https://www.arcgis.com/home/item.html?id=7aea6fa913a94176a1074edb40690318
});
const view = new MapView({
spatialReference: 28992,
container: "viewDiv",
map: map,
center: new Point({ x: 145430, y: 427100, spatialReference: 28992 }),
zoom: 10
});
view.when(() => {
createZoomEntireCountryBtn();
view.ui.add(["zoomEntireCountryBtn"], "top-left")
});
/*******************************************************************************
* Start zoom to entire country
*******************************************************************************/
function createZoomEntireCountryBtn() {
const zoomEntireCountryBtnDiv = document.createElement('div');
zoomEntireCountryBtnDiv.innerHTML = `
<div id="zoomEntireCountryBtn" class="esri-component esri-widget--button esri-widget" role="button">
<span title="Zoom uit op heel Nederland"><calcite-action><img src="nederland.svg" style="width:25px;height:25px;" alt="nederland"></calcite-action></span>
</div>`;
document.body.appendChild(zoomEntireCountryBtnDiv);
document.getElementById("zoomEntireCountryBtn").addEventListener("click", zoomEntireCountry);
}
function zoomEntireCountry() {
view.goTo({
center: new Point({ x: 155000, y: 463000, spatialReference: 28992 }),
zoom: 3
});
}
/*******************************************************************************
* End zoom to entire country
*******************************************************************************/
});
</script>
</head>
<body>
<div id="header">
<div id="headertext" class="stretch">ArcGIS Maps SDK for JavaScript example: custom button</div>
</div>
<div id="viewDiv"></div>
</body>
</html>
