topic Re: How to modify Conversion Options in the Coordinate Conversion Widget? in ArcGIS JavaScript Maps SDK Questions

How to modify Conversion Options in the Coordinate Conversion Widget?

RichardHughes2 — Sat, 11 Dec 2021 10:52:02 GMT

const ccWidget = new CoordinateConversion({
 view: this.view,
 container: element
 });
 const filt_formats = ccWidget.viewModel.formats.filter((format) => {
 if (["basemap", "dms"].indexOf(format.name) === -1) {
 return true;
 } else {
 return false;
 }
 });
 filt_formats.forEach((format) => {
 ccWidget.formats.remove(format);
 });
 ccWidget.render();‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

In the above code I am trying to limit the conversion options in the Coordinate Conversion widget. The formats are limited, and the conversions when the widget loads is a Collection of 1. The issues is that the <Select> element in the widget still contains all of the original format options. Updating the viewModel should trigger the Widget to render() so I have tried updating that as well, and I am calling render() to be sure.

ccWidget.viewModel.formats.remove(format);‍

The error I get in the browser states, "Uncaught Error: select had a option child removed, but there is now more than one. You must add unique key properties to make them distinguishable."

<select aria-controls="ccNode__list-item-0" aria-label="Select format" class="esri-select esri-coordinate-conversion__select-row" title="Select format"><option aria-label="xy" title="xy">XY</option><option aria-label="basemap" value="basemap">BASEMAP</option><option aria-label="dms" value="dms">DMS</option><option aria-label="dms" value="dms">DMS</option><option aria-label="mgrs" value="mgrs">MGRS</option><option aria-label="usng" value="usng">USNG</option><option aria-label="utm" value="utm">UTM</option></select>‍‍

I don't think I should modify the domNode, but the widget render() should update it. What am I missing here?

Re: How to modify Conversion Options in the Coordinate Conversion Widget?

JanupriyaSankar — Tue, 26 Nov 2019 05:40:37 GMT

This will work

var ccWidget = new CoordinateConversion();
var format = ccWidget.formats.filter(function (format) {
return format.name === "xy";
});
var coordinateConversionWidget = new CoordinateConversion({
view: view,
formats: format,
multipleConversions: false
});

Re: How to modify Conversion Options in the Coordinate Conversion Widget?

rogenjh — Mon, 10 May 2021 15:23:03 GMT

Has anyone gotten this to work? It does not for me.

Re: How to modify Conversion Options in the Coordinate Conversion Widget?

Noah-Sager — Mon, 10 May 2021 18:17:11 GMT

Hi @rogenjh, this is a good question. It looks like we can use watchUtils to wait until the formats are ready, since formats now starts empty.

Code snippet with just BASEMAP and XY:

watchUtils.whenOnce(ccWidget, "formats.length", () => { ccWidget.formats = ccWidget.formats.filter(f => { return f.name === "xy" || f.name === "basemap" }); });

test-app with just BASEMAP and XY:
https://codepen.io/noash/pen/XWMmmza?editors=1000

Re: How to modify Conversion Options in the Coordinate Conversion Widget?

rogenjh — Mon, 10 May 2021 20:00:58 GMT

Wow. That worked perfect for me. What was screwing up the initial solution was that formats begin empty now, I suppose. Thanks for your help!

Re: How to modify Conversion Options in the Coordinate Conversion Widget?

Noah-Sager — Mon, 10 May 2021 20:42:24 GMT

Glad to hear it, and you're quite welcome. Feel free to mark the solution so other users know the question has been answered.

Re: How to modify Conversion Options in the Coordinate Conversion Widget?

nadja — Tue, 19 Jul 2022 05:03:32 GMT

Hi @Noah-Sager

Thanks for this solution. This worked for me as long as I only used the default formats.

As fas as I see in this thread, the names of the default format cannot be changed. Unfortunately, I need names which are easy to understand. Thus I added my own format, according to this sample code.

My own format works and can bee added and removed to the collection of formats:
coordinateConversionWidget.formats.add(crs2056);
coordinateConversionWidget.formats.add(crs2056);

But I cannot remove the default formats using this command:
coordinateConversionWidget.formats.remove(xy);

Nor can I filter the formatsusing above solution. How can I display ONLY my custom format? (later on, I'll add a second one (epsg:3857)

Here you find my test: https://codepen.io/nwp_nadja_bernhard/pen/OJvWeMP?editors=0010
If you comment line 193, it works fine. But as soon as the custom format is added, it doesnot work any more.

Re: How to modify Conversion Options in the Coordinate Conversion Widget?

Flookfinders — Thu, 21 Jul 2022 07:14:14 GMT

Hi @Noah-Sager I was using the above code, which was working fine, but when I try and change it to use the newer reactiveUtils rather than watchUtils this no longer works. How do you achieve the same result using the new reactiveUtils?

Re: How to modify Conversion Options in the Coordinate Conversion Widget?

Flookfinders — Mon, 25 Jul 2022 10:06:08 GMT

After a lot of playing around I finally managed to get this to work using the reactiveUtils in v4.24 by using the following code:

reactiveUtils .whenOnce(() => ccWidget.formats.length > 0) .then(() => { let filteredFormats = ccWidget.formats.items.filter( (f) => f.name === "basemap" || f.name === "xy" ); filteredFormats[ filteredFormats.findIndex((f) => f.name === "basemap") ].label = "BNG"; filteredFormats[ filteredFormats.findIndex((f) => f.name === "xy") ].label = "Long/Lat"; ccWidget.formats.items = filteredFormats; }); reactiveUtils .whenOnce(() => ccWidget.conversions) .then(() => { ccWidget.conversions.removeAll(); const f = ccWidget.formats.items.find( (f) => f.name === "basemap" ); ccWidget.conversions.add( new Conversion({ format: f }) ); });