topic Re: Changing Compass Widget icon in ArcGIS Maps SDK for JavaScript 4.28 in ArcGIS JavaScript Maps SDK Questions

Changing Compass Widget icon in ArcGIS Maps SDK for JavaScript 4.28

Wittawat — Fri, 17 Nov 2023 08:56:56 GMT

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!

Re: Changing Compass Widget icon in ArcGIS Maps SDK for JavaScript 4.28

Justin_Greco — Fri, 17 Nov 2023 18:26:14 GMT

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.

Re: Changing Compass Widget icon in ArcGIS Maps SDK for JavaScript 4.28

AndyGup — Mon, 20 Nov 2023 19:13:59 GMT

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

Re: Changing Compass Widget icon in ArcGIS Maps SDK for JavaScript 4.28

Wittawat — Tue, 21 Nov 2023 07:00:13 GMT

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

Re: Changing Compass Widget icon in ArcGIS Maps SDK for JavaScript 4.28

AndyGup — Thu, 30 Nov 2023 16:23:03 GMT

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

Re: Changing Compass Widget icon in ArcGIS Maps SDK for JavaScript 4.28

Wittawat — Sat, 02 Dec 2023 14:54:12 GMT

Dear @AndyGup ,

Thank you! This is what I love to hear 🙂