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

02-02-2023 02:47 PM
MVP Regular Contributor


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 buttonArcGIS 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?



TWIAV | ArcGIS JavaScript example - custom button


<!DOCTYPE html>
  <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="">
  <script src=""></script>
    html, body {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
      font-family: sans-serif;
    #header {	
    	width: 100%;
        height: 70px;
        background-color: #154273;
        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;
      ], function(Map, Point, MapView) {

      const map = new Map({
        basemap: { portalItem: { id: "7aea6fa913a94176a1074edb40690318" } } // Topo RD -->

      const view = new MapView({
        spatialReference: 28992, 
        container: "viewDiv",
        map: map,
        center: new Point({ x: 145430, y: 427100, spatialReference: 28992 }),
        zoom: 10
      view.when(() => {
        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>
        document.getElementById("zoomEntireCountryBtn").addEventListener("click", zoomEntireCountry);
      function zoomEntireCountry() {
          center: new Point({ x: 155000, y: 463000, spatialReference: 28992 }),
          zoom: 3
       * End zoom to entire country
  <div id="header">
      <div id="headertext" class="stretch">ArcGIS Maps SDK for JavaScript example: custom button</div>
  <div id="viewDiv"></div>



Tags (2)
0 Replies