Skip to content

Commit 1f75004

Browse files
ziveoziveo
authored
Merge pull request #5 from gis-tools/develop
Develop
2 parents 7479f8d + db481a0 commit 1f75004

File tree

9 files changed

+153
-85
lines changed

9 files changed

+153
-85
lines changed

‎build/index.js‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
#!/usr/bin/env node
22

3+
34
'use strict';
45

56
var fs = require('fs');
@@ -10,30 +11,33 @@ var bootstrapAppJs3 = __dirname + '/resources/App3.js';
1011
var bootstrapAppJs4 = __dirname + '/resources/App4.js';
1112
var bootstrapAppHtml3 = __dirname + '/resources/index-api-3.html';
1213
var bootstrapAppHtml4 = __dirname + '/resources/index-api-4.html';
13-
var bootstrapAppCss = __dirname + '/resources/App.css';
14-
var greenColor = '\x1b[32m';
15-
var resetColor = '\x1b[0m';
14+
var bootstrapAppCss3 = __dirname + '/resources/App3.css';
15+
var bootstrapAppCss4 = __dirname + '/resources/App4.css';
16+
var colorGreen = '\x1b[32m';
17+
var colorReset = '\x1b[0m';
1618
var currentWorkingDirectory = path.resolve('./');
1719
var bootstrapAppJs;
1820
var bootstrapAppHtml;
21+
var bootstrapAppCss;
1922

20-
program.version('0.1.0').option('-a, --api [number]', 'Add API version', 4).parse(process.argv);
23+
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);
2124

2225
// Input app name from command line
2326
var appName = program.args[0];
2427

2528
if (program.api === '3') {
2629
bootstrapAppJs = bootstrapAppJs3;
2730
bootstrapAppHtml = bootstrapAppHtml3;
31+
bootstrapAppCss = bootstrapAppCss3;
2832
} else {
2933
bootstrapAppJs = bootstrapAppJs4;
3034
bootstrapAppHtml = bootstrapAppHtml4;
35+
bootstrapAppCss = bootstrapAppCss4;
3136
}
3237

3338
if (process.argv.length <= 2) {
34-
console.log('Run' + greenColor + ' create-esri-react-app app_name' + resetColor);
39+
console.log('Run' + colorGreen + ' create-esri-react-app app_name' + colorReset);
3540
} else {
36-
3741
/**
3842
* Move to App.js
3943
*/
@@ -88,20 +92,20 @@ if (process.argv.length <= 2) {
8892
var exec = require('child_process').exec;
8993

9094
// Create react App
91-
console.log('Creating a new ESRI React App in ' + greenColor + currentWorkingDirectory + '/' + appName + resetColor + '.');
95+
console.log('Creating a new ESRI React App in ' + colorGreen + currentWorkingDirectory + '/' + appName + colorReset + '.');
9296
console.log(' - ESRI api v%s', program.api);
9397
var createEsriApp = 'create-react-app ' + appName;
9498
exec(createEsriApp, function (error, stdout, stderr) {
95-
var addModule = 'cd ' + appName + ' && yarn add esri-loader';
99+
var addModule = 'cd ' + appName + ' && npm install esri-loader';
96100
exec(addModule, function (error, stdout, stderr) {
97101
console.log('');
98-
console.log('Success! ESRI React App ' + greenColor + appName + resetColor + ' is created at ' + greenColor + currentWorkingDirectory + resetColor + ' ');
102+
console.log('Success! ESRI React App ' + colorGreen + appName + colorReset + ' is created at ' + colorGreen + currentWorkingDirectory + colorReset + ' ');
99103
console.log('Inside that directory, you can run several commands:');
100104
console.log('');
101105
console.log('We suggest that you begin by typing:');
102106
console.log('');
103-
console.log(' ' + greenColor + 'cd' + resetColor + ' ' + appName);
104-
console.log(' ' + greenColor + 'yarn start' + resetColor);
107+
console.log(' ' + colorGreen + 'cd' + colorReset + ' ' + appName);
108+
console.log(' ' + colorGreen + 'npm start' + colorReset + ' or ' + colorGreen + 'yarn start' + colorReset);
105109
moveAppJS(bootstrapAppJs, appName);
106110
moveAppHTML(bootstrapAppHtml, appName);
107111
moveAppCSS(bootstrapAppCss, appName);

‎build/resources/App3.css‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
@import "https://js.arcgis.com/3.22/esri/css/esri.css";
2+
3+
html, body, #root, .App {
4+
height: 100%;
5+
width: 100%;
6+
background-color: #cfcfd4;
7+
}
8+
9+
.App {
10+
text-align: center;
11+
}
12+
13+
.App-header {
14+
background-color: #222;
15+
height: 80px;
16+
padding: 20px;
17+
color: white;
18+
box-sizing: border-box;
19+
}
20+
21+
h1 {
22+
margin: 0.25em;
23+
}
24+
25+
/* Map view */
26+
#mapContainer {
27+
height: calc(100% - 80px);
28+
}

‎build/resources/App3.js‎

Lines changed: 36 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,41 +2,53 @@ import React, {Component} from 'react';
22
import './App.css';
33
import * as esriLoader from 'esri-loader';
44

5-
if (!esriLoader.isLoaded()) {
6-
esriLoader.bootstrap((err) => {
7-
if (err) {
8-
console.error(err);
5+
class App extends Component {
6+
constructor() {
7+
super();
8+
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+
});
919
} else {
10-
createMap();
20+
this.createMap();
1121
}
12-
}, {
13-
url: 'https://js.arcgis.com/3.21/' // Here you can change API version
14-
});
15-
} else {
16-
createMap();
17-
}
1822

19-
function createMap() {
20-
esriLoader.dojoRequire([
21-
'esri/map'
22-
], (Map) => {
23-
let map = new Map('mapNode', {
24-
center: [-100, 30],
25-
zoom: 3,
26-
basemap: 'gray-vector'
23+
this.state = {
24+
map: null
25+
}
26+
}
27+
28+
createMap = () => {
29+
esriLoader.dojoRequire([
30+
'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;
38+
39+
this.setState({
40+
map
41+
})
2742
});
28-
window.map = map;
29-
});
30-
}
43+
};
3144

32-
class App extends Component {
3345
render() {
3446
return (
3547
<div className="App">
3648
<div className="App-header">
3749
<h1>Welcome to ESRI React App</h1>
3850
</div>
39-
<div id="mapNode"/>
51+
<div id="mapContainer"/>
4052
</div>
4153
);
4254
}

‎build/resources/App.css‎ renamed to ‎build/resources/App4.css‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
1+
@import "https://js.arcgis.com/4.5/esri/css/main.css";
2+
13
html, body, #root, .App {
24
height: 100%;
3-
font: menu;
5+
width: 100%;
6+
background-color: #cfcfd4;
47
}
58

69
.App {
@@ -20,6 +23,6 @@ h1 {
2023
}
2124

2225
/* Map view */
23-
#mapNode {
26+
#mapContainer {
2427
height: calc(100% - 80px);
2528
}

‎build/resources/App4.js‎

Lines changed: 45 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,62 @@
11
import React, {Component} from 'react';
2-
import './App.css';
32
import * as esriLoader from 'esri-loader';
3+
import './App.css';
4+
5+
class App extends Component {
6+
constructor() {
7+
super();
48

5-
if (!esriLoader.isLoaded()) {
6-
esriLoader.bootstrap((err) => {
7-
if (err) {
8-
console.error(err);
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+
});
919
} else {
10-
createMap();
20+
this.createMap();
1121
}
12-
}, {
13-
// url: 'https://js.arcgis.com/4.4/' // Here you can change API version
14-
});
15-
} else {
16-
createMap();
17-
}
1822

19-
function createMap() {
20-
esriLoader.dojoRequire([
21-
"esri/Map",
22-
"esri/views/MapView"
23-
], function(Map, MapView){
24-
let map = new Map({
25-
basemap: "gray-vector"
26-
});
27-
window.map = map;
28-
let view = new MapView({
29-
map: map,
30-
container: "mapNode",
31-
basemap: 'gray-vector',
32-
center: [-100, 30],
33-
zoom: 3
23+
this.state = {
24+
map: null,
25+
view: null
26+
}
27+
}
28+
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+
});
45+
46+
this.setState({
47+
map,
48+
view
49+
})
3450
});
35-
});
36-
}
51+
};
3752

38-
class App extends Component {
3953
render() {
4054
return (
4155
<div className="App">
4256
<div className="App-header">
4357
<h1>Welcome to ESRI React App</h1>
4458
</div>
45-
<div id="mapNode" />
59+
<div id="mapContainer" />
4660
</div>
4761
);
4862
}

‎build/resources/index-api-3.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
55
<meta name="theme-color" content="#000000">
66
<meta name="author" content="Bojan Zivkovic">
7-
<link rel="preload stylesheet" href="https://js.arcgis.com/3.21/esri/css/main.css">
87
<!--
98
manifest.json provides metadata used when your web app is added to the
109
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/

‎build/resources/index-api-4.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
55
<meta name="theme-color" content="#000000">
66
<meta name="author" content="Bojan Zivkovic">
7-
<link rel="preload stylesheet" href="https://js.arcgis.com/4.4/esri/css/main.css">
87
<!--
98
manifest.json provides metadata used when your web app is added to the
109
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/

‎package.json‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
"scripts": {
1010
"build": "babel src -d build",
1111
"prepublish": "npm run build",
12+
"publish": "npm publish",
1213
"release": "np"
1314
},
1415
"babel": {
@@ -21,12 +22,16 @@
2122
"url": "git+https://github.com/gis-tools/create-esri-react-app.git"
2223
},
2324
"keywords": [
25+
"ArcGIS",
26+
"ArcGIS JS",
27+
"ArcGIS loader",
28+
"dojo",
2429
"ESRI",
30+
"loader",
31+
"esri-loader",
2532
"React",
2633
"ReactJS",
27-
"esri-loader",
28-
"loader",
29-
"dojo"
34+
"React JS"
3035
],
3136
"author": "Bojan Zivkovic",
3237
"license": "MIT",

0 commit comments

Comments
 (0)