ArcGIS Maps SDK for JavaScript example: custom button (calcite-action with SVG)

Egge-Jan_Pollé — Thu, 02 Feb 2023 22:59:17 GMT

Hi,

Can you add your own custom buttons to an ArcGIS JavaScript application, one with your own picture, I mean? ArcGIS Maps SDK for JavaScript example: custom button

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

topic ArcGIS Maps SDK for JavaScript example: custom button (calcite-action with SVG) in ArcGIS JavaScript Maps SDK Questions

ArcGIS Maps SDK for JavaScript example: custom button (calcite-action with SVG)