Skip to content

Commit d61b8b2

Browse files
authored
Merge pull request #7 from gis-tools/develop
Develop
2 parents 782bdad + 018bb6a commit d61b8b2

File tree

8 files changed

+76
-144
lines changed

8 files changed

+76
-144
lines changed

README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ Goal of Create ESRI React App is to connect ESRI and React application with mini
44
A prerequisite for this application is Create React App already installed in your development environment. If Create React App is not installed on your system run:
55

66
```
7-
npm install -g create-react-app
7+
npm install create-react-app -g
88
```
99

1010

@@ -50,7 +50,7 @@ You can specify version of ESRI ArcGIS JS api during creation process. If you do
5050
```
5151
$ create-esri-react-app esri_app_v4
5252
- or -
53-
$ create-esri-react-app esri_app_v3 -v 3
53+
$ create-esri-react-app esri_app_v3 -a 3
5454
```
5555

5656
### Information's related to Create React App

build/index.js

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,19 @@ var fs = require('fs');
77
var path = require('path');
88
var program = require('commander');
99

10+
var colorGreen = '\x1b[32m';
11+
var colorReset = '\x1b[0m';
12+
1013
var bootstrapAppJs3 = __dirname + '/resources/App3.js';
11-
var bootstrapAppJs4 = __dirname + '/resources/App4.js';
12-
var bootstrapAppHtml3 = __dirname + '/resources/index-api-3.html';
13-
var bootstrapAppHtml4 = __dirname + '/resources/index-api-4.html';
1414
var bootstrapAppCss3 = __dirname + '/resources/App3.css';
15+
16+
var bootstrapAppJs4 = __dirname + '/resources/App4.js';
1517
var bootstrapAppCss4 = __dirname + '/resources/App4.css';
16-
var colorGreen = '\x1b[32m';
17-
var colorReset = '\x1b[0m';
18+
19+
var bootstrapAppHtml = __dirname + '/resources/index.html';
20+
1821
var currentWorkingDirectory = path.resolve('./');
1922
var bootstrapAppJs;
20-
var bootstrapAppHtml;
2123
var bootstrapAppCss;
2224

2325
program.version('0.1.0').option('-a, --api [number]', 'Add API version ' + colorGreen + '-v 3' + colorReset + ' or ' + colorGreen + '-v 4' + colorReset + '. Default version of ESRI API is v4', 4).parse(process.argv);
@@ -27,11 +29,9 @@ var appName = program.args[0];
2729

2830
if (program.api === '3') {
2931
bootstrapAppJs = bootstrapAppJs3;
30-
bootstrapAppHtml = bootstrapAppHtml3;
3132
bootstrapAppCss = bootstrapAppCss3;
3233
} else {
3334
bootstrapAppJs = bootstrapAppJs4;
34-
bootstrapAppHtml = bootstrapAppHtml4;
3535
bootstrapAppCss = bootstrapAppCss4;
3636
}
3737

@@ -96,7 +96,7 @@ if (process.argv.length <= 2) {
9696
console.log(' - ESRI api v%s', program.api);
9797
var createEsriApp = 'create-react-app ' + appName;
9898
exec(createEsriApp, function (error, stdout, stderr) {
99-
var addModule = 'cd ' + appName + ' && npm install esri-loader';
99+
var addModule = 'cd ' + appName + ' && npm install esri-loader --save';
100100
exec(addModule, function (error, stdout, stderr) {
101101
console.log('');
102102
console.log('Success! ESRI React App ' + colorGreen + appName + colorReset + ' is created at ' + colorGreen + currentWorkingDirectory + colorReset + ' ');

build/resources/App3.js

Lines changed: 24 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,35 @@
11
import React, {Component} from 'react';
2+
import esriLoader from 'esri-loader';
23
import './App.css';
3-
import * as esriLoader from 'esri-loader';
44

5-
class App extends Component {
5+
const options = {
6+
url: `https://js.arcgis.com/3.22/`
7+
};
8+
9+
export default class App extends Component {
610
constructor() {
711
super();
812

9-
if (!esriLoader.isLoaded()) {
10-
esriLoader.bootstrap((err) => {
11-
if (err) {
12-
console.error(err);
13-
} else {
14-
this.createMap();
15-
}
16-
}, {
17-
url: 'https://js.arcgis.com/3.22/' // Here you can change API version
18-
});
19-
} else {
20-
this.createMap();
21-
}
22-
23-
this.state = {
24-
map: null
25-
}
26-
}
27-
28-
createMap = () => {
29-
esriLoader.dojoRequire([
13+
esriLoader.loadModules([
3014
'esri/map'
31-
], (Map) => {
32-
let map = new Map('mapContainer', {
33-
center: [-100, 30],
34-
zoom: 3,
35-
basemap: 'gray-vector'
36-
});
37-
window.map = map;
15+
], options)
16+
.then(([Map]) => {
17+
let map = new Map('mapContainer', {
18+
basemap: 'gray-vector',
19+
center: [-100, 30],
20+
zoom: 3
21+
});
3822

39-
this.setState({
40-
map
41-
})
42-
});
43-
};
23+
window.map = map;
24+
25+
this.setState({
26+
map
27+
})
28+
})
29+
.catch(err => {
30+
console.error(err);
31+
});
32+
}
4433

4534
render() {
4635
return (
@@ -53,5 +42,3 @@ class App extends Component {
5342
);
5443
}
5544
}
56-
57-
export default App;

build/resources/App4.js

Lines changed: 31 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,50 @@
11
import React, {Component} from 'react';
2-
import * as esriLoader from 'esri-loader';
2+
import esriLoader from 'esri-loader';
33
import './App.css';
44

5-
class App extends Component {
5+
const options = {
6+
url: 'https://js.arcgis.com/4.5'
7+
};
8+
9+
export default class App extends Component {
610
constructor() {
711
super();
812

9-
if (!esriLoader.isLoaded()) {
10-
esriLoader.bootstrap((err) => {
11-
if (err) {
12-
console.error(err);
13-
} else {
14-
this.createMap();
15-
}
16-
}, {
17-
// url: 'https://js.arcgis.com/4.4/' // Here you can change API version
18-
});
19-
} else {
20-
this.createMap();
21-
}
22-
23-
this.state = {
24-
map: null,
25-
view: null
26-
}
27-
}
13+
esriLoader.loadModules([
14+
'esri/Map',
15+
'esri/views/MapView'
16+
], options)
17+
.then(([Map, MapView]) => {
18+
let map = new Map({
19+
basemap: "gray-vector"
20+
});
2821

29-
createMap = () => {
30-
esriLoader.dojoRequire([
31-
"esri/Map",
32-
"esri/views/MapView"
33-
], (Map, MapView) => {
34-
let map = new Map({
35-
basemap: "gray-vector"
36-
});
37-
window.map = map;
38-
let view = new MapView({
39-
map: map,
40-
container: "mapContainer",
41-
basemap: 'gray-vector',
42-
center: [-100, 30],
43-
zoom: 3
44-
});
22+
let view = new MapView({
23+
map: map,
24+
container: "mapContainer",
25+
basemap: 'gray-vector',
26+
center: [-100, 30],
27+
zoom: 5
28+
});
4529

46-
this.setState({
47-
map,
48-
view
49-
})
50-
});
51-
};
30+
this.setState({
31+
map,
32+
view
33+
})
34+
})
35+
.catch(err => {
36+
console.error(err);
37+
});
38+
}
5239

5340
render() {
5441
return (
5542
<div className="App">
5643
<div className="App-header">
5744
<h1>Welcome to ESRI React App</h1>
5845
</div>
59-
<div id="mapContainer" />
46+
<div id="mapContainer"/>
6047
</div>
6148
);
6249
}
6350
}
64-
65-
export default App;

build/resources/index-api-4.html

Lines changed: 0 additions & 40 deletions
This file was deleted.
File renamed without changes.

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "create-esri-react-app",
3-
"version": "0.2.1",
3+
"version": "0.2.4",
44
"description": "Creating ESRI applications with React included",
55
"main": "./src/index.js",
66
"bin": {

src/index.js

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,19 @@ var fs = require('fs');
66
var path = require('path');
77
var program = require('commander');
88

9+
var colorGreen = '\x1b[32m';
10+
var colorReset = '\x1b[0m';
11+
912
var bootstrapAppJs3 = __dirname + '/resources/App3.js';
10-
var bootstrapAppJs4 = __dirname + '/resources/App4.js';
11-
var bootstrapAppHtml3 = __dirname + '/resources/index-api-3.html';
12-
var bootstrapAppHtml4 = __dirname + '/resources/index-api-4.html';
1313
var bootstrapAppCss3 = __dirname + '/resources/App3.css';
14+
15+
var bootstrapAppJs4 = __dirname + '/resources/App4.js';
1416
var bootstrapAppCss4 = __dirname + '/resources/App4.css';
15-
var colorGreen = '\x1b[32m';
16-
var colorReset = '\x1b[0m';
17+
18+
var bootstrapAppHtml = __dirname + '/resources/index.html';
19+
1720
var currentWorkingDirectory = path.resolve('./');
1821
var bootstrapAppJs;
19-
var bootstrapAppHtml;
2022
var bootstrapAppCss;
2123

2224
program
@@ -29,11 +31,9 @@ var appName = program.args[0];
2931

3032
if (program.api === '3') {
3133
bootstrapAppJs = bootstrapAppJs3;
32-
bootstrapAppHtml = bootstrapAppHtml3;
3334
bootstrapAppCss = bootstrapAppCss3;
3435
} else {
3536
bootstrapAppJs = bootstrapAppJs4;
36-
bootstrapAppHtml = bootstrapAppHtml4;
3737
bootstrapAppCss = bootstrapAppCss4;
3838
}
3939

@@ -98,7 +98,7 @@ if (process.argv.length <= 2) {
9898
console.log(' - ESRI api v%s', program.api);
9999
var createEsriApp = 'create-react-app ' + appName;
100100
exec(createEsriApp, function (error, stdout, stderr) {
101-
var addModule = 'cd ' + appName + ' && npm install esri-loader';
101+
var addModule = 'cd ' + appName + ' && npm install esri-loader --save';
102102
exec(addModule, function (error, stdout, stderr) {
103103
console.log('');
104104
console.log('Success! ESRI React App ' + colorGreen + appName + colorReset + ' is created at ' + colorGreen + currentWorkingDirectory + colorReset + ' ');

0 commit comments

Comments
 (0)