JSAPI 4.x - Listen to change of current selected format of CoordinateConversion

[JonasDePelsmaeker]

In the current implementation of the CoordinateConversion widget, the developer has no out-of-the-box way to see if the selected coordinate format has changed.

In my opinion, there should be a way to watch this property so the developer can implement custom change handlers.

[Noah-Sager]

Hi @JonasDePelsmaeker, thanks for posting here. Can you describe the use case for this functionality? How would this help your workflow or app?

[JonasDePelsmaeker]

Hi @Noah-Sager, thank you for your reply.
Our users requested the functionality to remember the selected format.
When they open the application, the format which was last selected should be applied to the CoordinateConversion widget.
Some users prefer to work with XY, others prefer DMS. They don't like setting their preferred format every time they open the application.
Typically, this can be done by watching the 'conversionFormat' property, but the widget does not expose this property (it is private at the moment).
There should also be a way to set the current format of the widget, ideally by setting the conversionFormat property of the widget.

Another use case would be to automatically convert the coordinates displayed in our application to the format the user selected in the widget.

[Noah-Sager]

Thanks @JonasDePelsmaeker, that helps. So if there was such an event, how would that work for your users? The current format is saved for each session, even upon refresh, as long as the app is not closed. You also can set the current format upon load, like in this sample where a custom format is added to the first two options:

https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=widgets-coordinateconver...

If you're offering multiple apps to users, you could define a different starting format in the CC widget for each app, which is how I assume the event would work, because if you close the app and then reopen it, there isn't an event that would help with that. Am I understanding the scenario correctly?

[JonasDePelsmaeker]

Hi @Noah-Sager ,

In our case, the format should be saved to the browser's localStorage when the user changes the current format of the widget. The most suitable solution, in my opinion, would be watching for a change event on the current format. 

this.coordinateConversionWidget.watch("currentFormat", (newValue) => {
  window.localStorage.setItem("coordinateFormatName", newValue);
});

Afterwards, when re-opening the app in a new browser session (not refreshing in the same session), we could read the value which was stored in the localStorage and set it as the selected format automatically. Setting the property can be done as specified in the sample you provided, or by simply setting property 'currentFormat' of the widget.

...
const coordinateConversionWidget = new CoordinateConversion({
  view: view
});
view.ui.add(coordinateConversionWidget, "top-right");
const preferredFormatName = window.localStorage.getItem("coordinateFormatName");
const preferredFormat = coordinateConversionWidget.formats.find((format) =>
format.name === preferredFormatName);
if (preferredFormat) {
  coordinateConversionWidget.currentFormat = preferredFormat;
}

If this property was to be made as a public Accessor property, we could easily watch for changes on the property and also easily set the property, as shown in the code snippets above.

I haven't thought of setting this for multiple apps. That's not a bad idea actually. This could work in our case because our apps run on the same domain (you can't read the localStorage of other domains), but let's not digress!

[Noah-Sager]

Hi @JonasDePelsmaeker, we may have a way to accomplish what you want by watching for conversion property changes. This was not obvious, but let me know if this helps you with your use case:

https://codepen.io/noash/pen/MWEZExa?editors=1000

Check the console when changing conversion formats.

We are still investigating to see if there's an easier way to accomplish this by enhancing the CC widget at a future release.

[JonasDePelsmaeker]

hi @Noah-Sager ,

That works perfectly.
This was indeed not obvious when I was looking for the solution.

The following is what I currently have implemented:

this.coordinateConversion = new CoordinateConversion({...});
this.coordinateConversion.when(() => {
    // set the preferred coordinate conversion
    const preferredFormatName = window.localStorage.getItem("preferredCoordinateConversionFormatName");
    if (preferredFormatName) {
        const preferredFormat = this.coordinateConversion.formats.find((format) => format.name === preferredFormatName);
        this.coordinateConversion.conversions.splice(0, 1, new Conversion({ format: preferredFormat }));
    }

    // save the preferred coordinate conversion
    this.coordinateConversion.conversions.on("change", (event) => {
        window.localStorage.setItem("preferredCoordinateConversionFormatName", event.added[0].format.name);
    });
});
this.view.ui.add(this.coordinateConversion, "bottom-right");

Thank you for your support Noah! If you do find an easier way to do this, let me know.