Changing Compass Widget icon in ArcGIS Maps SDK for JavaScript 4.28

1704
5
Jump to solution
11-17-2023 12:52 AM
Wittawat
New Contributor II

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!

0 Kudos
1 Solution

Accepted Solutions
AndyGup
Esri Regular Contributor

@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

0 Kudos
5 Replies
Justin_Greco
Occasional Contributor II

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
Esri Regular Contributor

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). 

0 Kudos
Wittawat
New Contributor II

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

0 Kudos
AndyGup
Esri Regular Contributor

@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
        });

 

0 Kudos
Wittawat
New Contributor II

Dear @AndyGup ,

Thank you! This is what I love to hear 🙂

0 Kudos