Latest Contributions by AndyGup

The ArcGIS API 4.x for JavaScript offers developers a set of capabilities, that when combined, can give you mapping visualization super powers: symbols, renderers, Arcade, and definition expressions. This blog post provides a quick introduction into how these can be used together to create amazing maps.   For our demos, we’ll be using a point-based feature service that represents a single day’s pickup and delivery data for a New York City taxi service.   Symbols. Symbols are the bread and butter of mapping. Every map has some type of symbology on it such as roads, cities, parks, boundaries, bodies of water, labels, and more. They come in 2D, 3D, as well as endless colors, shapes and sizes. The ArcGIS API for JavaScript offers many different types of symbols including SimpleMarkerSymbol, SimpleFillSymbol, SimpleLineSymbol, PointSymbol3D, LineSymbol3D and more. Here is an example showing a SimpleMarkerSymbol, which will display a small black circle:     const sms = new SimpleMarkerSymbol({         size: 6,         color: "black"     })‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   Renderers. Renderers tell your application how to visually represent each feature on a FeatureLayer, SceneLayer, MapImageLayer, CSVLayer or StreamLayer. Renderers iterate through all features and apply their logic through the use of…you guessed it, symbols!   Here’s an example of an aptly named SimpleRenderer. This example of a SimpleRenderer loops thru all features in a FeatureLayer and assigns to each one a small black circle defined by a SimpleMarkerSymbol.     const pointRenderer = new SimpleRenderer({       symbol: new SimpleMarkerSymbol({         size: 6,         color: "black",         outline: {           width: 0.5,           color: "white"         }       })     });     // Get FeatureLayer url from ArcGIS Online     let featureLayer = new FeatureLayer({       url: "https://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/NYC_Taxi_Data_Snapshot/FeatureServer/0",       renderer: pointRenderer     });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   RENDERER DEMO   Arcade. Arcade turns already powerful mapping renderers into super renderers. Arcade lets you use expressions, written in JavaScript, to apply additional calculations against the attributes from each feature in a layer. Those calculation results can then be used within a renderer to directly manipulate symbology. So, just a quick recap: we are talking about Renderers + Arcade + Symbology! As a renderer loops thru each feature in a layer, it applies the Arcade expression. Arcade can access each feature's attributes using the pattern $feature.FIELD_NAME. You can use Arcade's built in functions and also plain old JavaScript to work with the values. Field names are located in the REST endpoint directory of your service. Here's an example using our New York City Taxi feature service: // Return fare value per distance traveled renderer.valueExpression = "$feature.Fare_amount / $feature.Trip_distance";‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   Let’s look at a live demo. This app uses Arcade to do simple date/time calculations on each feature and then applies them using the valueExpression property inside a UniqueValueRenderer. The UniqueValueRenderer takes the Boolean string values returned from the Arcade expression and then applies the appropriate symbol.   ARCADE DEMO You can learn more about Arcade here.    Definition Expressions. And, last but not least, definition expressions. These are a SQL where clause that filters features in the layer. Only features that match the definition expression will be displayed, and you can combine these with symbols, renderers and Arcade. To illustrate this final concept, let’s take our Arcade demo app from above, pull all the concepts together that we have talked about so far, and apply a simple definition expression so that the map will now only show taxi fares that totaled over $50. definitionExpression: "Total_amount > 50"‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   PUTTING IT ALL TOGETHER DEMO   Wrap-up That concludes our whirlwind tour, and this post barely touches the surface of the visualization capabilities in the ArcGIS API 4.x for JavaScript. By themselves, these built-in capabilities are powerful, and when you combine them, you can create some amazing visualizations. If you have a few more minutes, definitely check out the API samples for more ideas. We encourage you to try out these concepts and let us know about the great work you are doing. ... View more

Contributed by Andy Gup and Nicholas Furness On August 16th, Esri and PubNub joined forces in a webinar on realtime mapping and asset tracking. On-demand services are a hot topic, so Nick Furness and I wanted to create a demo application to explore some of the concepts involved. We covered the basics of combining ArcGIS Online with PubNub Functions to build a realtime, completely serverless proof of concept using an ArcGIS for Developer and PubNub trail account. Check out the video below. You can find the source code and setup instructions at github.com/esri. We used a variety of ArcGIS Online components to bring it all together including Feature Services, Optimized Routing, Service Areas (which are used as geofences), and the ArcGIS API for JavaScript. And, of course, there's a PubNub Function for handling the realtime aspects of communicating between drivers, customers, and dispatcher dashboards. How it works The demo consists of a Delivery Management App for monitoring delivery routes and a PubNub Function for handling realtime updates. This app is built using the ArcGIS API for JavaScript and makes use of Calcite Maps. Skip to about 18:35 in the video to see the demo in action. The app assigns a set of deliveries to a driver and the optimized order is calculated using ArcGIS Online's RouteTask. For each delivery, a geofence is calculated using the ServiceAreaTask. These are used to alert a customer when the driver is five minutes away with their delivery. The route geometry and geofences are stored in ArcGIS Online Feature Services, and the driver is dispatched. As the driver progresses, their updated location is posted to the PubNub Function. PubNub uses the geofences stored in ArcGIS Online to determine when the driver enters the geofence for the next delivery (e.g., is five minutes away), and the customer is notified that their delivery is about to arrive. Simulating the Driver For the purposes of this demo, the app picks five random customers from a list of thirty. One driver is used for a route, and the driver's location is simulated (sped up significantly, of course). However, the driver simulator app posts updates to PubNub, in lieu of a real driver using a GPS-enabled app, and the PubNub Function handles the rest. The driver's location is simulated by following the route that is returned from the Esri Route Service. In a real-world implementation, the driver might use a custom app to post location updates, capture customer signatures, and mark deliveries as completed. In addition, depending on the use-case, the driver might choose to take alternate routes, which might require a re-ordering of deliveries, but in this simple prototype use-case, we don't dig in that deep. Voucher Code Since this prototype uses optimized routing and service areas, both of which consume credits, we handed out a voucher for 1,000 credits during the webinar (it's mentioned in the video). These can be applied to your ArcGIS Developer account. If you use this voucher, be sure to redeem it before August 29th at 8am Pacific Time and the credits are good until March 1, 2018. References ArcGIS for Developers Program (Free) PubNub Free Trail ... View more

Traditionally, popups in mapping apps have always pointed to a feature or location, even if that caused issues with other parts of the user interface. In the ArcGIS API for JavaScript v4.x, docking allows for a better user experience in that you can decouple the popup and place it in a corner, top, or bottom of the map. Even better, these popups are responsive to different screen sizes and orientation, so they offer you quite a bit of flexibility when building apps especially for mobile deployments.   These capabilities are available thru a MapView or SceneView’s default Popup instance: view.popup.dockOptions. The dockOptions Object allows you to directly configure the breakpoint dimension, height, width, and position without having to directly access CSS or needing to figure out and set up CSS media queries. view.popup.dockOptions = {   // Set a custom breakpoint   // Dock popup when view is less than or equal to 600x1000 pixels   breakpoint: {     width: 600,     height: 1000   } };‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   Our recommendation is to simply go play with it in a live app. A picture is worth a thousand words. Go to the Dock Positions with Popup sample, then use Device Mode in Chrome, or your favorite browser, and start playing with different configurations and orientations.   Here's a few screenshots of Chrome Device Mode approximating an iPhone 6 using the default popup settings. Note that in portrait mode, the default popup is docked on the bottom 100%, and when we rotate the phone to landscape, the popup automatically docks in the top-right position. References:  Popup Class - Popup | API Reference | ArcGIS API for JavaScript 4.3  Get Started With Popups - Get started with popups | ArcGIS API for JavaScript 4.3  Dock Positions with Popup Sample App with Source Code - ArcGIS API for JavaScript Sandbox Enhanced dock position sample showing where user clicks - Jsbin.com ... View more

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