11import Map from "https://js.arcgis.com/4.29/@arcgis/core/Map.js" ;
22import MapView from "https://js.arcgis.com/4.29/@arcgis/core/views/MapView.js" ;
33import CoordinateConversion from "https://js.arcgis.com/4.29/@arcgis/core/widgets/CoordinateConversion.js" ;
4+ import Conversion from "https://js.arcgis.com/4.29/@arcgis/core/widgets/CoordinateConversion/support/Conversion.js" ;
45import { watch } from "https://js.arcgis.com/4.29/@arcgis/core/core/reactiveUtils.js" ;
56
67// -----------------
@@ -24,7 +25,7 @@ const view = new MapView({
2425 zoom : 10 ,
2526} ) ;
2627
27- const ccWidget = new CoordinateConversion ( { view, multipleConversions : false } ) ;
28+ const ccWidget = new CoordinateConversion ( { view, multipleConversions : true } ) ;
2829
2930view . ui . add ( ccWidget , "bottom-left" ) ;
3031
@@ -55,35 +56,38 @@ const coordinateEditable = document.getElementById(
5556 "custom-coordinate-editable"
5657) ;
5758
58- updateFormats ( ) ;
59- updateCoordinates ( ) ;
60- 6159watch (
6260 ( ) => [ vm . formats . length , vm . conversions . getItemAt ( 0 ) ?. displayCoordinate ] ,
6361 ( ) => {
6462 updateFormats ( ) ;
6563 updateCoordinates ( ) ;
66- }
64+ } ,
65+ { initial : true }
6766) ;
6867
6968coordinateSelect . addEventListener ( "calciteSelectChange" , ( event ) => {
70- vm . activeFormat = event . target . selectedOption . value ;
69+ const value = event . target . value ;
70+ const format = vm . formats . find ( ( format ) => format . name === value ) ;
71+ const newConversion = new Conversion ( { format } ) ;
72+ vm . conversions . removeAt ( 0 ) ;
73+ vm . conversions . add ( newConversion , 0 ) ;
7174} ) ;
7275
7376coordinateMode . addEventListener ( "calciteSegmentedControlChange" , ( event ) => {
7477 const value = event . target . value ;
7578 vm . mode = value ;
76- console . log ( vm . mode ) ;
7779} ) ;
7880
81+ function findFormatIndex ( name ) {
82+ return vm . formats . findIndex ( ( format ) => format . name === name ) ?? - 1 ;
83+ }
84+ 7985async function reverseConvert ( ) {
8086 const value = coordinateInput . value ;
8187 const selectFormat = vm . conversions . at ( 0 ) ?. format ;
82- const selectIndex =
83- vm . formats . findIndex ( ( format ) => format . name === selectFormat ?. name ) ?? - 1 ;
88+ const selectIndex = findFormatIndex ( selectFormat ?. name ) ;
8489 const format = vm . formats . getItemAt ( selectIndex ) ;
85- console . log ( { format } ) ;
86- const point = await vm . reverseConvert ( value , format ) ;
90+ const point = await vm . reverseConvert ( value , format ) ; // todo: catch this, add status
8791 view . goTo ( point ) ;
8892}
8993
@@ -98,18 +102,10 @@ coordinateInput.addEventListener("keydown", (event) => {
98102} ) ;
99103
100104function updateFormats ( ) {
101- // const conversionNames = vm.conversions?.map(
102- // (conversion) => conversion.format?.name
103- // );
104- 105105 const selectFormat = vm . conversions . at ( 0 ) ?. format ;
106- const selectIndex =
107- vm . formats . findIndex ( ( format ) => format . name === selectFormat ?. name ) ?? - 1 ;
108- 109- console . log ( { selectIndex } ) ;
106+ const selectIndex = findFormatIndex ( selectFormat ?. name ) ;
110107
111108 const formatsTemplate = vm . formats
112- //?.filter((format) => !conversionNames.includes(format.name))
113109 . toArray ( )
114110 . map (
115111 ( format , index ) =>
@@ -123,6 +119,5 @@ function updateFormats() {
123119}
124120
125121function updateCoordinates ( ) {
126- console . log ( { vm } ) ;
127122 coordinateInput . value = vm . conversions . getItemAt ( 0 ) ?. displayCoordinate ?? "" ;
128123}
0 commit comments