Getting started with Electron and the ArcGIS API for JavaScript
Ever wondered about using your HTML, CSS and JavaScript skills to build a desktop mapping app? Electron gives you the power to do just that. The really sweet part is that Electron, similar to hybrid web applications such Cordova, gives you access to the underlying operating system in ways that pure web apps can't.
Below I've provided a fun, 5 minute lab that shows you one way to build a bare-bones prototype. I've taken the simplest approach I could think of and used plain-old vanilla JavaScript without any framework. At the end of the post there are a few links to several other approaches that you should also check out. You can definitely use the modern JavaScript framework of your choice once you get going such as Angular, Vue.js, etc.
Pre-reqs - I'm assuming you already have git and node.js installed.
Step 1 - Run the following commands in console, Once you run all the commands the electron-quick-start app should launch and you should have a Hello World app, booyah! If it does launch then control-c in the console to exit the app.
git clone https://github.com/electron/electron-quick-start cd electron-quick-start npm install && npm start
Step 2 - Overwrite the index.html file by using this code instead. This is were we start bolting in the ArcGIS API for JavaScript mapping bits.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World Map!</title>
<!-- We are adding some new CSS -->
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<!-- Add the ArcGIS API for JavaScript and CSS -->
<link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css">
<script src="https://js.arcgis.com/4.3/"></script>
</head>
<body>
<h1>Hello World Map!</h1>
<!-- All of the Node.js APIs are available in this renderer process. -->
We are using Node.js <script>document.write(process.versions.node)</script>,
Chromium <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
<!-- We are adding a div to hold the map -->
<div id="viewDiv"></div>
<!-- We are adding a script tag to reference a new index.js file -->
<script src="index.js"></script>
<script>
// You can also require other files to run in this process
require('./renderer.js')
</script>
</body>
</html>
Step 3 - Create index.js in the root directory and copy the following code.
require([
"esri/Map",
"esri/views/MapView",
"dojo/domReady!"
], function(Map, MapView) {
console.log("ArcGIS require() loaded.");
var map = new Map({
basemap: "streets"
});
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 4,
center: [15, 65]
});
});Step 4 - The last step is to run npm start again and you should see a map:
A few other examples using the ArcGIS API for JavaScript:
Angular CLI example - GitHub - TheKeithStewart/ng-cli-electron-esri
Drop Shapefiles into Electron Map - Electron with ArcGIS API for JavaScript - odoenet
And, a few more resources for good measure: