|
BLOG
|
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: Electron-api-demos Electron Chrome DevTools Extension Electron: Cross-platform Desktop Apps Made Easy
... View more
05-04-2017
04:39 PM
|
3
|
0
|
4642
|
|
POST
|
Just making sure, is this is a JavaScript app? And, are you programmatically making your own ArcGIS REST API calls for editing attachments in a feature service? If so, then attachments are handled using addAttachment, updateAttachment and deleteAttachments. With respect to your attachments, when you do add an attachment I recommend using FormData to create your XMLHttpRequest: // Example when adding an attachment
var formData = new FormData();
formData.append("attachment",file);
// Example when updating an attachment
formData.append("attachmentId", attachment.id); You can see an example of working with attachments using the ArcGIS JavaScript API and the attachment widget here: SanFrancisco311 - Incidents Here's an example of the HTTP request when making an addAttachment. You can see this for yourself in the browser's developer tools under the network tab. ------WebKitFormBoundary1aQsyoAkAGZU7oKM Content-Disposition: form-data; name="attachment"; filename="Blue Lake.jpg" Content-Type: image/jpeg
------WebKitFormBoundary1aQsyoAkAGZU7oKM Content-Disposition: form-data; name="f" json
------WebKitFormBoundary1aQsyoAkAGZU7oKM-- If a request is successful you'll see a response in the network tab similar to this: {
"addAttachmentResult" : {
"objectId" : 7369,
"globalId" : null,
"success" : true
}
} -Andy
... View more
05-04-2017
10:23 AM
|
0
|
3
|
2877
|
|
POST
|
Logan, as Yue pointed out the quickstart-map-phonegap repo does have 4.x samples. You have to wait for Cordova's onDeviceReady to fire before loading the ArcGIS API for JavaScript.
... View more
04-11-2017
02:44 PM
|
0
|
0
|
1203
|
|
POST
|
I recommend checking out the ArcGIS DevLabs: Get Started with ArcGIS DevLabs | ArcGIS for Developers. They are designed to help walk you thru how the pieces fit together starting at working with geographic Data, learning about cartographic Design and then pulling it all together in an application that you Develop.
... View more
03-28-2017
05:00 PM
|
1
|
0
|
1386
|
|
POST
|
You might try loading jQuery before the ArcGIS API for JavaScript. Reference: quickstart-map-phonegap/jquery-gps.html at master · Esri/quickstart-map-phonegap · GitHub
... View more
03-28-2017
02:59 PM
|
2
|
2
|
6695
|
|
BLOG
|
Josh, the name pattern in the URL determines whether or not anonymous will work with ArcGIS Online. Only the anonymous access approach allows both HTTP and HTTPS. Here are a few examples to hopefully illustrate the point a bit better. Example 1: this uses the ArcGIS Online organization's name in the URL and it will prompt you for a log in. There is no anonymous access using this pattern and it requires HTTPS: https://hack4co.maps.arcgis.com/home/webmap/viewer.html?webmap=06a23f2572014ebcbbbb1953688d2724 Example 2: this uses, HTTP plus www.arcgis.com in the URL and is open for anonymous access, no log in required: http://www.arcgis.com/home/webmap/viewer.html?webmap=06a23f2572014ebcbbbb1953688d2724 Example 3: switch out HTTP in Example 2 with HTTPS and this webmap still works for anonymous access, no log in required: https://www.arcgis.com/home/webmap/viewer.html?webmap=06a23f2572014ebcbbbb1953688d2724
... View more
10-31-2016
11:45 AM
|
0
|
0
|
11357
|
|
BLOG
|
Hi Rachel, ArcGIS Online is already HTTPS-enabled. More details can be found here. Quoting from that article, here’s the relevant bits that I believe apply to your question: “If you've disabled anonymous access to your organization, you can share maps, apps, and groups by sharing the item with everyone (public) and changing the URL of the item from your organization's private URL to the public ArcGIS Online URL (www.arcgis.com). For example, you could share one of your organization's maps with anonymous users by changing the URL from https://samplegis.maps.arcgis.com/home/webmap/viewer.html?webmap=fb39737f95a74b009e94d2274d44fd55 to https://www.arcgis.com/home/webmap/viewer.html?webmap=fb39737f95a74b009e94d2274d44fd55.” Does that help?
... View more
10-27-2016
02:10 PM
|
0
|
0
|
11357
|
|
BLOG
|
Firefox is looking into similar functionality. You can read the details here under Bug 1072859 – Disable Geolocation on non-secure origins Not sure about IE. And, I haven't seen anything from the Microsoft Edge team yet. The status of Geolocation in Microsoft Edge is Shipped - Microsoft Edge Development
... View more
10-10-2016
10:35 AM
|
1
|
0
|
11357
|
|
BLOG
|
As of Safari 10, insecure geolocation is no longer allowed. Unfortunately, Safari 9.x didn't give any warning messages about the up coming change. The only place I had seen an official reference to this was in the Safari 10 Technology Preview Release Notes under Web APIs: "Started blocking Geolocation API calls on pages served over insecure connections". I'll make sure this info is passed onto the core JS API team. Additional references on StackOverflow: ios10 - Got an error when trying to get the geolocation in safari on iOS 10 - Stack Overflow
... View more
09-28-2016
09:22 AM
|
0
|
0
|
11357
|
|
BLOG
|
Gotcha. Right, two other options are migrate to another browser or go to a hybrid approach. PhoneGap/Cordova uses plug-ins that can bypass the browser's Geolocation API, for example: cordova-plugin-advanced-geolocation.
... View more
08-25-2016
11:29 AM
|
0
|
0
|
11357
|
|
BLOG
|
Hey Josh, sorry for the late reply. Not sure why, but I didn't get a notification of your post. Do you still have the problem or has it been resolved?
... View more
08-25-2016
10:39 AM
|
0
|
0
|
11357
|
|
BLOG
|
New information update for Mac OS users as of Feb 2016. If you are testing a geolocation-based web app on Chrome locally you will have to use 'localhost' or '127.0.0.1'. Virtual hosts on Apache will result in the Geolocation API throwing the following error: " Only secure origins are allowed" and you won't be able to get a location.
... View more
02-19-2016
02:47 PM
|
0
|
0
|
11357
|
|
BLOG
|
Mele, For now apps using the browser's Geolocation API will continue to work on Chrome with HTTP, but they will trigger a security indicator. At some point in the future that will change and geolocation-based apps will no longer work on HTTP. The best I can tell the Chromium team hasn't set a hard date, yet. You can read the implementation specifics in the latest working draft of the W3C Secure Contexts document. That's the document that applies to all browser vendors, not just Chrome. The web is moving in direction of making everything HTTPS, and it's a security best practice to use HTTPS whenever possible. If one map service is HTTPS-based then all services used by the app will have to be HTTPS, it's an all-or-nothing proposition.
... View more
02-18-2016
03:40 PM
|
0
|
0
|
11357
|
|
POST
|
This is a significantly delayed answered. However for the benefit of everyone asking similar questions, the answer is 'yes' there are shops world-wide using the ArcGIS API for JavaScript with Cordova and PhoneGap. PhoneGap is Adobe's port of Apache's open source Cordova project and PhoneGap comes with extra bells and whistles such as a cloud-builder tool. Applications built using Cordova/PhoneGap are often referred to as Hybrid applications - that is JavaScript applications wrapped in a native container. These applications run on a chrome-less browser within the native runtime. It's quite possible that a popular consumer app that you use is built on a hybrid platform. Here are some reference materials: DevSummit Presentation - ArcGIS API for JavaScript: Building Native Apps using PhoneGap and JQuery Github project demonstrating how to use an ArcGIS JS API app within the PhoneGap/Cordova life-cycle - quickstart-map-phonegap API-based github project that provides a scaffolding for JS shops that have offline requirements - offline-editor-js Blog - What all mobile developers should know about PhoneGap Blog - Does PhoneGap improve geolocation?
... View more
10-21-2015
10:20 AM
|
1
|
0
|
1390
|
|
POST
|
Seth, I'm not sure what the issue is, however if you have a geometry point you can always force the map to center on it using map.centerAt() or map.centerAndZoom().
... View more
10-21-2015
09:35 AM
|
1
|
3
|
1834
|
| Title | Kudos | Posted |
|---|---|---|
| 2 | 4 weeks ago | |
| 1 | 04-10-2026 08:29 AM | |
| 1 | 03-26-2026 03:12 PM | |
| 2 | 02-21-2026 10:23 AM | |
| 2 | 08-01-2025 06:20 AM |
| Online Status |
Offline
|
| Date Last Visited |
4 weeks ago
|