Skip to content

Commit 9f82262

Browse files
vannizhangvannizhang
committed
refactor: use @arcgis/core instead of esri-loader
1 parent a47c80d commit 9f82262

File tree

8 files changed

+1223
-368
lines changed

8 files changed

+1223
-368
lines changed

‎package-lock.json‎

Lines changed: 1132 additions & 231 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@
2929
"@babel/preset-react": "^7.14.5",
3030
"@babel/preset-typescript": "^7.14.5",
3131
"@babel/runtime": "^7.14.6",
32-
"@types/arcgis-js-api": "4.15",
3332
"@types/classnames": "^2.2.10",
3433
"@types/jest": "^26.0.15",
3534
"@types/react-dom": "^18.2.7",
@@ -74,13 +73,13 @@
7473
"webpack-dev-server": "^4.9.3"
7574
},
7675
"dependencies": {
76+
"@arcgis/core": "^4.29.7",
7777
"@types/d3": "^5.7.2",
7878
"axios": "^1.4.0",
7979
"calcite-web": "github:Esri/calcite-web#v1.2.5",
8080
"classnames": "^2.2.6",
8181
"d3": "5.15",
8282
"date-fns": "^2.16.1",
83-
"esri-loader": "3.7",
8483
"helper-toolkit-ts": "^1.1.13",
8584
"react": "^18.1.0",
8685
"react-dom": "^18.1.0",

‎src/components/MapView/MapView.tsx‎

Lines changed: 43 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,13 @@ import React, {
22
useContext
33
} from 'react';
44

5-
import { loadModules, loadCss } from 'esri-loader';
6-
import IMapView from 'esri/views/MapView';
7-
import IWebMap from "esri/WebMap";
8-
import ILocateWidget from "esri/widgets/Locate";
9-
import IHomeWidget from "esri/widgets/Home";
10-
import IwatchUtils from 'esri/core/watchUtils';
5+
// import { loadModules, loadCss } from 'esri-loader';
6+
import ArcGISMapView from '@arcgis/core/views/MapView';
7+
import WebMap from "@arcgis/core/WebMap";
8+
import Locate from "@arcgis/core/widgets/Locate";
9+
import Home from "@arcgis/core/widgets/Home";
10+
// import IwatchUtils from 'esri/core/watchUtils';
11+
import { watch } from '@arcgis/core/core/reactiveUtils';
1112

1213
import { AppContext } from '../../contexts/AppContextProvider';
1314

@@ -23,7 +24,7 @@ import {
2324
MapCenterLocation
2425
} from '../../utils/UrlHashParams';
2526

26-
loadCss();
27+
// loadCss();
2728

2829
type Props = {
2930
webmapId: string;
@@ -40,44 +41,30 @@ const MapView:React.FC<Props> = ({
4041

4142
const mapDivRef = React.useRef<HTMLDivElement>();
4243

43-
const [ mapView, setMapView] = React.useState<IMapView>(null);
44+
const [ mapView, setMapView] = React.useState<ArcGISMapView>(null);
4445

4546
const initMapView = async()=>{
4647

47-
type Modules = [typeof IMapView, typeof IWebMap];
48-
49-
try {
50-
const [
51-
MapView,
52-
WebMap
53-
] = await (loadModules([
54-
'esri/views/MapView',
55-
'esri/WebMap',
56-
]) as Promise<Modules>);
57-
58-
const defaultMapLocation = getMapLocationFromUrlHashParams();
59-
60-
const view = new MapView({
61-
container: mapDivRef.current,
62-
map: new WebMap({
63-
portalItem: {
64-
id: webmapId
65-
}
66-
}),
67-
padding: {
68-
right: !isMobile ? UIConfig["sidebar-width"] : 0
69-
},
70-
zoom: defaultMapLocation ? defaultMapLocation.zoom : undefined,
71-
center: defaultMapLocation ? [ defaultMapLocation.lon, defaultMapLocation.lat ] : undefined
72-
});
48+
const defaultMapLocation = getMapLocationFromUrlHashParams();
49+
50+
const view = new ArcGISMapView({
51+
container: mapDivRef.current,
52+
map: new WebMap({
53+
portalItem: {
54+
id: webmapId
55+
}
56+
}),
57+
padding: {
58+
right: !isMobile ? UIConfig["sidebar-width"] : 0
59+
},
60+
zoom: defaultMapLocation ? defaultMapLocation.zoom : undefined,
61+
center: defaultMapLocation ? [ defaultMapLocation.lon, defaultMapLocation.lat ] : undefined
62+
});
7363

74-
view.when(()=>{
75-
setMapView(view);
76-
});
64+
view.when(()=>{
65+
setMapView(view);
66+
});
7767

78-
} catch(err){
79-
console.error(err);
80-
}
8168
};
8269

8370
const initEventListeners = async() => {
@@ -103,16 +90,17 @@ const MapView:React.FC<Props> = ({
10390
onClickHandler(mapPoint);
10491
});
10592

106-
type Modules = [typeof IwatchUtils];
93+
// type Modules = [typeof IwatchUtils];
10794

108-
try {
109-
const [watchUtils] = await (loadModules([
110-
'esri/core/watchUtils',
111-
]) as Promise<Modules>);
112-
113-
watchUtils.whenTrue(mapView, 'stationary', () => {
95+
watch(
96+
() => mapView.stationary,
97+
(stationary) => {
11498
// console.log('mapview is stationary', mapView.center, mapView.zoom);
11599

100+
if(!stationary){
101+
return;
102+
}
103+
116104
if (mapView.zoom === -1) {
117105
return;
118106
}
@@ -131,39 +119,21 @@ const MapView:React.FC<Props> = ({
131119

132120
saveMapLocationInUrlHashParams(centerLocation);
133121
});
134-
} catch (err) {
135-
console.error(err);
136-
}
137122
};
138123

139124
const initWidgets = async()=>{
140125

141-
type Modules = [typeof ILocateWidget, typeof IHomeWidget];
142-
143-
try {
144-
const [
145-
Locate,
146-
Home
147-
] = await (loadModules([
148-
'esri/widgets/Locate',
149-
"esri/widgets/Home",
150-
]) as Promise<Modules>);
151-
152-
const locateWidget = new Locate({
153-
view: mapView, // Attaches the Locate button to the view
154-
});
155-
156-
const homeWidget = new Home({
157-
view: mapView
158-
});
126+
const locateWidget = new Locate({
127+
view: mapView, // Attaches the Locate button to the view
128+
});
159129

160-
mapView.ui.add(locateWidget, "top-left");
130+
const homeWidget = new Home({
131+
view: mapView
132+
});
161133

162-
mapView.ui.add(homeWidget, "top-left");
134+
mapView.ui.add(locateWidget, "top-left");
163135

164-
} catch(err){
165-
console.error(err);
166-
}
136+
mapView.ui.add(homeWidget, "top-left");
167137
};
168138

169139
React.useEffect(()=>{

‎src/components/QueryLocationPoint/QueryLocationPoint.tsx‎

Lines changed: 22 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -3,56 +3,47 @@ import React, {
33
useEffect
44
} from 'react'
55

6-
import { loadModules } from 'esri-loader';
7-
import IMapView from 'esri/views/MapView';
8-
import IGraphic from 'esri/Graphic';
9-
import IGraphicsLayer from 'esri/layers/GraphicsLayer';
10-
import IPoint from 'esri/geometry/Point'
11-
import ISimpleMarkerSymbol from "esri/symbols/SimpleMarkerSymbol"
6+
// import { loadModules } from 'esri-loader';
7+
import MapView from '@arcgis/core/views/MapView';
8+
import Graphic from '@arcgis/core/Graphic';
9+
import GraphicsLayer from '@arcgis/core/layers/GraphicsLayer';
10+
import Point from '@arcgis/core/geometry/Point'
11+
import SimpleMarkerSymbol from "@arcgis/core/symbols/SimpleMarkerSymbol"
1212
import { QueryLocation } from 'air-quality-aware';
1313
import { UIConfig } from '../../AppConfig';
1414

1515
type Props = {
1616
queryResult: QueryLocation;
17-
mapView?: IMapView;
17+
mapView?: MapView;
1818
};
1919

2020
const QueryLocationPoint: React.FC<Props> = ({
2121
queryResult,
2222
mapView
2323
}) => {
24-
const [graphicLayer, setGraphicLayer] = useState<IGraphicsLayer>();
24+
const [graphicLayer, setGraphicLayer] = useState<GraphicsLayer>();
2525

2626
const init = async () => {
27-
type Modules = [typeof IGraphicsLayer];
2827

29-
try {
30-
const [GraphicsLayer] = await (loadModules([
31-
'esri/layers/GraphicsLayer',
32-
]) as Promise<Modules>);
28+
const layer = new GraphicsLayer();
3329

34-
const layer = new GraphicsLayer();
30+
mapView.map.add(layer);
3531

36-
mapView.map.add(layer);
37-
38-
setGraphicLayer(layer);
39-
} catch (err) {
40-
console.error(err);
41-
}
32+
setGraphicLayer(layer);
4233
};
4334

4435
const showQueryResult = async () => {
45-
type Modules = [
46-
typeof IGraphic,
47-
typeof IPoint,
48-
typeof ISimpleMarkerSymbol
49-
];
50-
51-
const [Graphic, Point, SimpleMarkerSymbol ] = await (loadModules([
52-
'esri/Graphic',
53-
'esri/geometry/Point',
54-
'esri/symbols/SimpleMarkerSymbol',
55-
]) as Promise<Modules>);
36+
// type Modules = [
37+
// typeof IGraphic,
38+
// typeof IPoint,
39+
// typeof ISimpleMarkerSymbol
40+
// ];
41+
42+
// const [Graphic, Point, SimpleMarkerSymbol ] = await (loadModules([
43+
// 'esri/Graphic',
44+
// 'esri/geometry/Point',
45+
// 'esri/symbols/SimpleMarkerSymbol',
46+
// ]) as Promise<Modules>);
5647

5748
const graphic = new Graphic({
5849
geometry: new Point(queryResult),

‎src/components/SearchWidget/SearchWidget.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import './style.scss';
22
import React from 'react'
33

4-
import { loadModules } from 'esri-loader';
5-
import IMapView from 'esri/views/MapView';
6-
import IPoint from 'esri/geometry/Point';
7-
import ISearchWidget from 'esri/widgets/Search';
4+
// import { loadModules } from 'esri-loader';
5+
import MapView from '@arcgis/core/views/MapView';
6+
import Point from '@arcgis/core/geometry/Point';
7+
import Search from '@arcgis/core/widgets/Search';
88
import { QueryLocation } from 'air-quality-aware';
99

1010
type Props = {
11-
mapView?: IMapView,
11+
mapView?: MapView,
1212
containerRef: React.MutableRefObject<HTMLDivElement>
1313
searchCompletedHandler: (data:QueryLocation)=>void;
1414
}
@@ -21,14 +21,14 @@ const SearchWidget:React.FC<Props> = ({
2121

2222
const init = async()=>{
2323

24-
type Modules = [typeof ISearchWidget];
24+
// type Modules = [typeof ISearchWidget];
2525

2626
try {
27-
const [
28-
Search,
29-
] = await (loadModules([
30-
'esri/widgets/Search',
31-
]) as Promise<Modules>);
27+
// const [
28+
// Search,
29+
// ] = await (loadModules([
30+
// 'esri/widgets/Search',
31+
// ]) as Promise<Modules>);
3232

3333
const searchWidget = new Search({
3434
view: mapView,
@@ -39,7 +39,7 @@ const SearchWidget:React.FC<Props> = ({
3939

4040
searchWidget.on('search-complete', evt=>{
4141
if(searchWidget.results[0] && searchWidget.results[0].results[0]){
42-
const searchResultGeom:IPoint = searchWidget.results[0].results[0].feature.geometry;
42+
const searchResultGeom:Point = searchWidget.results[0].results[0].feature.geometry;
4343
// console.log(searchResultGeom);
4444
searchCompletedHandler(searchResultGeom.toJSON())
4545
}

‎src/index.tsx‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,6 @@ import { createRoot } from 'react-dom/client';
66
import AppContextProvider from './contexts/AppContextProvider';
77
import App from './components/App/App';
88

9-
import { setDefaultOptions } from 'esri-loader';
10-
11-
setDefaultOptions({
12-
// url: 'https://js.arcgis.com/next/'
13-
version: '4.28'
14-
});
15-
169
const root = createRoot(document.getElementById('root'));
1710

1811
root.render(

‎src/styles/index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@import '~calcite-web/dist/css/calcite-web.min.css';
2+
@import 'https://js.arcgis.com/4.29/@arcgis/core/assets/esri/themes/dark/main.css';
23

34
.cursor-pointer{
45
cursor: pointer;

‎webpack.config.js‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -121,18 +121,18 @@ module.exports = (env, options)=> {
121121
// !devMode ? new BundleAnalyzerPlugin() : false
122122
].filter(Boolean),
123123
optimization: {
124-
splitChunks: {
125-
cacheGroups: {
126-
// vendor chunk
127-
vendor: {
128-
// sync + async chunks
129-
chunks: 'all',
130-
name: 'vendor',
131-
// import file path containing node_modules
132-
test: /node_modules/
133-
}
134-
}
135-
},
124+
// splitChunks: {
125+
// cacheGroups: {
126+
// // vendor chunk
127+
// vendor: {
128+
// // sync + async chunks
129+
// chunks: 'all',
130+
// name: 'vendor',
131+
// // import file path containing node_modules
132+
// test: /node_modules/
133+
// }
134+
// }
135+
// },
136136
minimizer: [
137137
new TerserPlugin({
138138
extractComments: true,

0 commit comments

Comments
 (0)