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

652
0
02-02-2023 02:47 PM
Egge-Jan_Pollé
MVP Regular Contributor

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

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

 

 

Tags (2)
0 Replies