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

Browse files
committed
WIP
1 parent 2d96a96 commit 7aa644a

File tree

10 files changed

+114
-69
lines changed

10 files changed

+114
-69
lines changed
File renamed without changes.

‎coordinate-calcite/map.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ 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";
44

55
// custom UI
6-
import { createCustomCoordinateConversion } from "./custom-coordinate.js";
6+
import { createCustomCoordinateConversion } from "./calcite-coordinate.js";
77

88
// Create the map
99
const map = new Map({

‎coordinate/src/App.css

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
html,
22
body,
33
#root,
4-
.App,
5-
#viewDiv {
4+
.App {
65
padding: 0;
76
margin: 0;
87
height: 100%;

‎coordinate/src/App.js

Lines changed: 17 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,28 @@
11
import "./App.css";
2-
import {useRef}from"react";
2+
import "@arcgis/core/assets/esri/themes/light/main.css";
33

4-
import Map from "@arcgis/core/Map.js";
5-
import MapView from "@arcgis/core/views/MapView.js";
6-
import CoordinateConversion from "@arcgis/core/widgets/CoordinateConversion.js";
7-
import CoordinateVM from "@arcgis/core/widgets/CoordinateConversion/CoordinateConversionViewModel.js";
4+
// import CoordinateVM from "@arcgis/core/widgets/CoordinateConversion/CoordinateConversionViewModel.js";
5+
import { useMapView } from "./hooks/useMapView";
6+
import { useCoordinateConversion } from "./hooks/useCoordinateConversion";
87

98
function App() {
10-
const myRef = useRef(null);
11-
12-
componentDidMount() {
13-
this.setupMap();
14-
}
15-
16-
// Create the map
17-
const map = new Map({
18-
basemap: {
19-
portalItem: {
20-
id: "826498a48bd0424f9c9315214f2165d4", // Colored Pencil basemap,
9+
const { ref, mapView } = useMapView(
10+
{
11+
basemap: {
12+
portalItem: {
13+
id: "826498a48bd0424f9c9315214f2165d4", // Colored Pencil basemap,
14+
},
2115
},
2216
},
23-
});
24-
25-
// Create the MapView
26-
const view = new MapView({
27-
container: document.createElement("div"),
28-
map,
29-
center: [-159.5043512937587, 22.049447588962245],
30-
zoom: 10,
31-
});
32-
33-
const ccWidget = new CoordinateConversion({ view });
34-
35-
view.ui.add(ccWidget, "bottom-left");
36-
37-
console.log({ CoordinateVM });
17+
{
18+
center: [-159.5043512937587, 22.049447588962245],
19+
zoom: 10,
20+
}
21+
);
3822

39-
view.container = myRef.current;
40-
console.log(view.container);
23+
useCoordinateConversion(mapView);
4124

42-
return (
43-
<div className="App">
44-
<div id="viewDiv" ref={myRef}></div>
45-
</div>
46-
);
25+
return <div className="App" ref={ref} />;
4726
}
4827

4928
export default App;

‎coordinate/src/App.test.js

Lines changed: 0 additions & 8 deletions
This file was deleted.
Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { useRef, useEffect, useState } from "react";
2+
import CoordinateConversion from "@arcgis/core/widgets/CoordinateConversion.js";
3+
4+
const destroyCoordinateConversion = (coordinateConversion) => {
5+
if (!coordinateConversion) {
6+
return;
7+
}
8+
9+
coordinateConversion.destroy();
10+
};
11+
12+
export function useCoordinateConversion(mapView) {
13+
const ref = useRef(null);
14+
15+
const [coordinateConversion, setCoordinateConversion] = useState();
16+
17+
useEffect(() => {
18+
const widget = new CoordinateConversion({ view: mapView });
19+
20+
if (mapView?.ui) {
21+
mapView.ui.add(widget, "bottom-left");
22+
}
23+
24+
setCoordinateConversion(widget);
25+
26+
return function cleanUp() {
27+
if (mapView?.ui) {
28+
mapView.ui.remove(widget);
29+
}
30+
destroyCoordinateConversion(widget);
31+
};
32+
}, [mapView]);
33+
34+
return { ref, coordinateConversion };
35+
}

‎coordinate/src/hooks/useMapView.js

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { useRef, useEffect, useState } from "react";
2+
import MapView from "@arcgis/core/views/MapView.js";
3+
import WebMap from "@arcgis/core/WebMap.js";
4+
5+
const loadMapView = (mapProperties, mapViewProperties = {}) => {
6+
const map = new WebMap({ ...mapProperties });
7+
8+
return new MapView({
9+
...mapViewProperties,
10+
map,
11+
});
12+
};
13+
14+
const destroyMapView = (view) => {
15+
if (!view) {
16+
return;
17+
}
18+
19+
view.container = null;
20+
};
21+
22+
export function useMapView(mapProperties, mapViewProperties) {
23+
const ref = useRef(null);
24+
25+
const [mapView, setMapView] = useState();
26+
27+
const initialArguments = useRef({ mapProperties, mapViewProperties });
28+
29+
useEffect(() => {
30+
let cancelled = false;
31+
let mapView;
32+
33+
async function load() {
34+
const { mapProperties, mapViewProperties } = initialArguments.current;
35+
mapView = loadMapView(mapProperties, mapViewProperties);
36+
if (cancelled) {
37+
return;
38+
}
39+
40+
mapView.container = ref.current;
41+
42+
setMapView(mapView);
43+
}
44+
45+
load();
46+
47+
return function cleanUp() {
48+
cancelled = true;
49+
50+
destroyMapView(mapView);
51+
};
52+
}, []);
53+
54+
return { ref, mapView };
55+
}

‎coordinate/src/index.css

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎coordinate/src/index.js

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
import React from 'react';
2-
import ReactDOM from 'react-dom/client';
3-
import './index.css';
4-
import App from './App';
5-
import reportWebVitals from './reportWebVitals';
1+
import React from "react";
2+
import ReactDOM from "react-dom/client";
3+
import App from "./App";
4+
import reportWebVitals from "./reportWebVitals";
65

7-
const root = ReactDOM.createRoot(document.getElementById('root'));
6+
const root = ReactDOM.createRoot(document.getElementById("root"));
87
root.render(
98
<React.StrictMode>
109
<App />

‎coordinate/src/logo.svg

Lines changed: 0 additions & 1 deletion
This file was deleted.

0 commit comments

Comments
(0)

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