Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit e5f8ab6

Browse files
committed
refactoring
1 parent d896e07 commit e5f8ab6

File tree

2 files changed

+121
-99
lines changed

2 files changed

+121
-99
lines changed

‎coordinate-calcite/custom-coordinate.js

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
import CoordinateVM from "https://js.arcgis.com/4.29/@arcgis/core/widgets/CoordinateConversion/CoordinateConversionViewModel.js";
2+
import Conversion from "https://js.arcgis.com/4.29/@arcgis/core/widgets/CoordinateConversion/support/Conversion.js";
3+
import { watch } from "https://js.arcgis.com/4.29/@arcgis/core/core/reactiveUtils.js";
4+
5+
export function createCustomCoordinateConversion(view) {
6+
const vm = new CoordinateVM({ view, multipleConversions: false });
7+
8+
const customWidget = document.createElement("div");
9+
customWidget.innerHTML = `
10+
<div class="custom-coordinate-conversion">
11+
12+
<calcite-segmented-control id="custom-coordinate-mode">
13+
<calcite-segmented-control-item icon-start="cursor" value="live" checked>Live</calcite-segmented-control-item>
14+
<calcite-segmented-control-item icon-start="pin" value="capture">Capture</calcite-segmented-control-item>
15+
</calcite-segmented-control>
16+
17+
<calcite-select id="custom-coordinate-select"></calcite-select>
18+
19+
<calcite-inline-editable id="custom-coordinate-editable" controls>
20+
<calcite-input id="custom-coordinate-input" placeholder="Enter coordinates"></calcite-input>
21+
</calcite-inline-editable>
22+
23+
</div>
24+
`;
25+
26+
view.ui.add(customWidget, "bottom-right");
27+
28+
const coordinateSelect = document.getElementById("custom-coordinate-select");
29+
const coordinateInput = document.getElementById("custom-coordinate-input");
30+
const coordinateMode = document.getElementById("custom-coordinate-mode");
31+
const coordinateEditable = document.getElementById(
32+
"custom-coordinate-editable"
33+
);
34+
35+
let activeFormat = null;
36+
37+
watch(
38+
() => vm.conversions.getItemAt(0)?.format,
39+
(format) => updateFormats(format),
40+
{ initial: true }
41+
);
42+
watch(
43+
() => vm.conversions.getItemAt(0)?.displayCoordinate,
44+
(displayCoordinate) => updateCoordinates(displayCoordinate ?? ""),
45+
{ initial: true }
46+
);
47+
48+
coordinateSelect.addEventListener("calciteSelectChange", (event) => {
49+
const value = event.target.value;
50+
const format = vm.formats.find((format) => format.name === value);
51+
const newConversion = new Conversion({ format });
52+
vm.conversions.removeAt(0);
53+
vm.conversions.add(newConversion, 0);
54+
});
55+
56+
coordinateMode.addEventListener("calciteSegmentedControlChange", (event) => {
57+
const value = event.target.value;
58+
vm.mode = value;
59+
});
60+
61+
async function reverseConvert() {
62+
coordinateEditable.editingEnabled = false;
63+
const value = coordinateInput.value;
64+
try {
65+
const point = await vm.reverseConvert(value, activeFormat);
66+
view.goTo(point);
67+
} catch (e) {
68+
coordinateInput.status = "invalid";
69+
}
70+
}
71+
72+
coordinateEditable.addEventListener(
73+
"calciteInlineEditableEditConfirm",
74+
() => {
75+
reverseConvert();
76+
}
77+
);
78+
79+
coordinateInput.addEventListener("keydown", (event) => {
80+
if (event.key === "Enter") {
81+
reverseConvert();
82+
}
83+
});
84+
85+
function updateFormats(currentFormat) {
86+
activeFormat = currentFormat;
87+
88+
const formatLookup = {
89+
basemap: "Basemap (XY)",
90+
xy: "Longitude, Latitude (WGS84)",
91+
mgrs: "Military Grid Reference System (MGRS)",
92+
usng: "United States National Grid (USNG)",
93+
utm: "Universal Transverse Mercator (UTM)",
94+
dd: "Decimal Degrees (DD)",
95+
ddm: "Degrees Decimal Minutes (DDS)",
96+
dms: "Degrees Minutes Seconds (DMS)",
97+
};
98+
99+
const options = vm.formats
100+
.toArray()
101+
.map(
102+
(format) =>
103+
`<calcite-option ${
104+
format === currentFormat ? "selected" : ""
105+
} value="${format.name}">${
106+
formatLookup[format.name.toLowerCase()]
107+
}</calcite-option>`
108+
)
109+
.join("");
110+
111+
coordinateSelect.innerHTML = options;
112+
}
113+
114+
function updateCoordinates(activeDisplayCoordinate) {
115+
coordinateInput.value = activeDisplayCoordinate;
116+
coordinateInput.status = "valid";
117+
}
118+
}

‎coordinate-calcite/map.js

Lines changed: 3 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
11
import Map from "https://js.arcgis.com/4.29/@arcgis/core/Map.js";
22
import MapView from "https://js.arcgis.com/4.29/@arcgis/core/views/MapView.js";
33
import 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";
5-
import { watch } from "https://js.arcgis.com/4.29/@arcgis/core/core/reactiveUtils.js";
64

7-
// -----------------
8-
9-
import CoordinateVM from "https://js.arcgis.com/4.29/@arcgis/core/widgets/CoordinateConversion/CoordinateConversionViewModel.js";
5+
// custom UI
6+
import { createCustomCoordinateConversion } from "./custom-coordinate.js";
107

118
// Create the map
129
const map = new Map({
@@ -29,97 +26,4 @@ const ccWidget = new CoordinateConversion({ view, multipleConversions: true });
2926

3027
view.ui.add(ccWidget, "bottom-left");
3128

32-
// -----------------
33-
34-
const vm = new CoordinateVM({ view, multipleConversions: false });
35-
36-
const customWidget = document.createElement("div");
37-
customWidget.innerHTML = `
38-
<div class="custom-coordinate-conversion">
39-
<calcite-segmented-control id="custom-coordinate-mode">
40-
<calcite-segmented-control-item icon-start="cursor" value="live" checked>Live</calcite-segmented-control-item>
41-
<calcite-segmented-control-item icon-start="pin" value="capture">Capture</calcite-segmented-control-item>
42-
</calcite-segmented-control>
43-
<calcite-select id="custom-coordinate-select"></calcite-select>
44-
<calcite-inline-editable id="custom-coordinate-editable" controls>
45-
<calcite-input id="custom-coordinate-input" placeholder="Enter coordinates"></calcite-input>
46-
</calcite-inline-editable>
47-
</div>
48-
`;
49-
50-
view.ui.add(customWidget, "bottom-right");
51-
52-
const coordinateSelect = document.getElementById("custom-coordinate-select");
53-
const coordinateInput = document.getElementById("custom-coordinate-input");
54-
const coordinateMode = document.getElementById("custom-coordinate-mode");
55-
const coordinateEditable = document.getElementById(
56-
"custom-coordinate-editable"
57-
);
58-
59-
let activeFormat = null;
60-
61-
watch(
62-
() => vm.conversions.getItemAt(0)?.format,
63-
(format) => updateFormats(format),
64-
{ initial: true }
65-
);
66-
watch(
67-
() => vm.conversions.getItemAt(0)?.displayCoordinate,
68-
(displayCoordinate) => updateCoordinates(displayCoordinate ?? ""),
69-
{ initial: true }
70-
);
71-
72-
coordinateSelect.addEventListener("calciteSelectChange", (event) => {
73-
const value = event.target.value;
74-
const format = vm.formats.find((format) => format.name === value);
75-
const newConversion = new Conversion({ format });
76-
vm.conversions.removeAt(0);
77-
vm.conversions.add(newConversion, 0);
78-
});
79-
80-
coordinateMode.addEventListener("calciteSegmentedControlChange", (event) => {
81-
const value = event.target.value;
82-
vm.mode = value;
83-
});
84-
85-
async function reverseConvert() {
86-
coordinateEditable.editingEnabled = false;
87-
const value = coordinateInput.value;
88-
try {
89-
const point = await vm.reverseConvert(value, activeFormat);
90-
view.goTo(point);
91-
} catch (e) {
92-
coordinateInput.status = "invalid";
93-
}
94-
}
95-
96-
coordinateEditable.addEventListener("calciteInlineEditableEditConfirm", () => {
97-
reverseConvert();
98-
});
99-
100-
coordinateInput.addEventListener("keydown", (event) => {
101-
if (event.key === "Enter") {
102-
reverseConvert();
103-
}
104-
});
105-
106-
function updateFormats(currentFormat) {
107-
activeFormat = currentFormat;
108-
109-
const options = vm.formats
110-
.toArray()
111-
.map(
112-
(format) =>
113-
`<calcite-option ${format === currentFormat ? "selected" : ""} value="${
114-
format.name
115-
}">${format.label.toUpperCase()}</calcite-option>`
116-
)
117-
.join("");
118-
119-
coordinateSelect.innerHTML = options;
120-
}
121-
122-
function updateCoordinates(activeDisplayCoordinate) {
123-
coordinateInput.value = activeDisplayCoordinate;
124-
coordinateInput.status = "valid";
125-
}
29+
createCustomCoordinateConversion(view);

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /