Changing Compass Widget icon in ArcGIS Maps SDK for JavaScript 4.28

Wittawat · ‎11-17-2023

Hi,

I have attempted to modify the compass widget (2D map view) using the 'icon' property, but unfortunately, it did not yield the expected results. Could you please provide idea how to change icon for Compass default widget? Sample code here: https://codepen.io/aonwittawat/pen/gOqoMex

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>Compass widget | Sample | ArcGIS Maps SDK for JavaScript 4.28</title>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.28/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.28/"></script>

    <script>
      require(["esri/Map", "esri/views/MapView", "esri/widgets/Compass"], (
        Map,
        MapView,
        Compass
      ) => {
        const map = new Map({
          basemap: "streets-vector"
        });

        const view = new MapView({
          container: "viewDiv",
          scale: 500000,
          center: [26.26, 39.17],
          map: map
        });

        /********************************
         * Create a compass widget object.
         *********************************/
        // https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Compass.html#icon
        const compassWidget = new Compass({
          view: view,
          icon: "compass" // https://developers.arcgis.com/calcite-design-system/icons/?icon=globe&library=Calcite%20UI&query=north
        });

        // Add the Compass widget to the top left corner of the view
        view.ui.add(compassWidget, "top-left");
      });
    </script>
  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>

Also, is there a way to use custom image for widget?

Thank you!

AndyGup · ‎11-30-2023

@Wittawatwe fixed the Compass widget's icon property, and it can now be overridden as expected. The fix is available on the 'next' build, if you want to try it out.

This pattern is now valid:

        const compassWidget = new Compass({
          view: view,
          icon: "arrow-up" // Calcite icon
        });

View solution in original post

Justin_Greco · ‎11-17-2023

I'm able to set the icon for the Locate widget at 4.28, so it might be a bug with the Compass widget. Wondering if it is due to the fact that the SDK will display a different icon depending on the spatial reference.

AndyGup · ‎11-20-2023

Hi @Wittawat thanks for reporting, I've opened an issue for us to take a closer look. As @Justin_Greco mentions, the Compass widget does take into account spatial references. It's different from the Track and Locate widgets because it has two default icons, one for Web Mercator/WGS 84 (compass needle) and one for all other spatial references (arrow).

Wittawat · ‎11-20-2023

Thank you for your reply @AndyGup. Will look forward for the solution.

AndyGup · ‎11-30-2023

@Wittawatwe fixed the Compass widget's icon property, and it can now be overridden as expected. The fix is available on the 'next' build, if you want to try it out.

This pattern is now valid:

        const compassWidget = new Compass({
          view: view,
          icon: "arrow-up" // Calcite icon
        });

Wittawat · ‎12-02-2023

Dear @AndyGup ,

Thank you! This is what I love to hear 🙂