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 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?

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

How to modify Conversion Options in the Coordinate Conversion Widget?

rhughes522

<SPAN class="keyword token">const</SPAN> ccWidget <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">CoordinateConversion</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
 view<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>view<SPAN class="punctuation token">,</SPAN>
 container<SPAN class="punctuation token">:</SPAN> element
 <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 <SPAN class="keyword token">const</SPAN> filt_formats <SPAN class="operator token">=</SPAN> ccWidget<SPAN class="punctuation token">.</SPAN>viewModel<SPAN class="punctuation token">.</SPAN>formats<SPAN class="punctuation token">.</SPAN><SPAN class="token function">filter</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">(</SPAN>format<SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="punctuation token">{</SPAN>
 <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="string token">"basemap"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"dms"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">indexOf</SPAN><SPAN class="punctuation token">(</SPAN>format<SPAN class="punctuation token">.</SPAN>name<SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">===</SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">1</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
 <SPAN class="keyword token">return</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">;</SPAN>
 <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
 <SPAN class="keyword token">return</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">;</SPAN>
 <SPAN class="punctuation token">}</SPAN>
 <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 filt_formats<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">(</SPAN>format<SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="punctuation token">{</SPAN>
 ccWidget<SPAN class="punctuation token">.</SPAN>formats<SPAN class="punctuation token">.</SPAN><SPAN class="token function">remove</SPAN><SPAN class="punctuation token">(</SPAN>format<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 ccWidget<SPAN class="punctuation token">.</SPAN><SPAN class="token function">render</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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<SPAN class="punctuation token">.</SPAN>viewModel<SPAN class="punctuation token">.</SPAN>formats<SPAN class="punctuation token">.</SPAN><SPAN class="token function">remove</SPAN><SPAN class="punctuation token">(</SPAN>format<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

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

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

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

Vind meer berichten getagd met

Accepted answers

Flookfinders

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

All comments

Flookfinders

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

Flookfinders

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?

nadja

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.

Noah Sager

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

rogenjh

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!

Noah Sager

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

rogenjh

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

JanupriyaSankar

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

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.