Latest Contributions by ReneRubalcava

The ArcGIS JS API 4.0 Beta is still getting some love. Lots of updates with each beta release. Updated features, new features, updated docs and all that good stuff. But there are still some dark corners of the API that are yet be completed...or doc'd! This is where I live. When the 4.0 beta first came out, I did a cool blog post on using Accessors to record the camera of a view and play it back. It works pretty well, but I always felt it could be a little better. You'll notice the sample in that post, I'm using this odd module called esri/core/Scheduler. What is that? That is some low-level API goodness is what that is. The Scheduler is a modified version of the Scheduler found in Dojo2. It's basically a way to work with requestAnimationFrame. It's not doc'd yet, because beta, things could change. So what you can do is schedule for stuff to happen during the next frame of your application. This is used for ... can you guess ... animations! Here is a cool little tutorial on requestAnimationFrame. When you're working with 3D maps, you're working with animations. You don't need to concern yourself about the details, but if you want to do something to stay in sync with a 3D map, you should get familiar with requestAnimationFrame. Scheduler can help with this. In my old sample, I was still crutching on setInterval, so here's how I would do it all with Scheduler. require([   "esri/Map",   "esri/views/SceneView",   "esri/core/watchUtils",   "esri/core/Scheduler",   "dojo/on",   // Widget items   'dojo/_base/declare',   'dojo/dom-class',   'dijit/_WidgetBase',   'dijit/_TemplatedMixin',   "dojo/domReady!" ], function (Map, SceneView, watchUtils, Scheduler, on, declare, domClass, _WidgetBase, _TemplatedMixin){   var template = '' +   '<div>'+     '  <input class="camera-slider" data-dojo-attach-point="slider"'+     '  type="range" min="1" max="1" step="1" value="1">'+     '  <a href="javascript:void(0)" data-dojo-attach-point="reverseBtn"'+     '    data-dojo-attach-event="click:playReverse"'+     '    title="Play views in reverse"'+     '    class="btn btn-info btn-fab btn-raised mdi-av-fast-rewind"></a>'+     '  <a href="javascript:void(0)" data-dojo-attach-point="playBtn"'+     '    data-dojo-attach-event="click:play"'+     '    title="Play views"'+     '    class="btn btn-info btn-fab btn-raised mdi-av-play-arrow"></a>'+     '  <a href="javascript:void(0)" data-dojo-attach-point="stopBtn"'+     '    data-dojo-attach-event="click:stop"'+     '    title="Pause recording view"'+     '    class="btn btn-info btn-fab btn-raised mdi-av-pause"></a>'+     '</div>';   var CameraRecorder = declare([_WidgetBase, _TemplatedMixin], {     templateString: template,     constructor: function() {       this.cameras = [null];       this.timer = null;       this.watcher = null;       this.handler = null;       this.isPlaying = false;     },     clear: function() {       if (this.watcher) {         this.watcher.remove();       }       if (this.handler) {         this.handler.remove();       }       if (this.timer) {         this.timer.remove();       }       this.recordStart();     },     recordStart: function() {       if (this.isPlaying || this.isPaused) {         return;       }       this.timer = Scheduler.schedule(function() {         this._cameraWatch();         this._sliderWatch();       }.bind(this));     },     play: function() {       if (this.isPlaying) {         return;       }       domClass.toggle(this.playBtn, 'btn-info btn-success');       this._play(false);     },     stop: function() {       this.isPaused = !this.isPaused;       domClass.toggle(this.stopBtn, 'btn-info btn-danger');       if (!this.isPaused) {         this.recordStart();       }     },     playReverse: function() {       if (this.isPlaying) {         return;       }       domClass.toggle(this.reverseBtn, 'btn-info btn-success');       this._play(true);     },     _cameraWatch: function() {       var view = this.get('view');       var cameras = this.cameras;       var slider = this.slider;       this.watcher = view.watch('camera', function(val) {         cameras.push(val.clone());         slider.max = slider.value = cameras.length;         this.clear();       }.bind(this));     },     _sliderWatch: function() {       var view = this.get('view');       var cameras = this.cameras;       this.handler = on(this.slider, 'input', function(e) {         var val = parseInt(e.target.value);         view.camera = cameras[val] || view.camera.clone();         this.clear();       }.bind(this));     },     _play: function(inReverse) {       this.isPlaying = true;       var slider = this.slider;       var view = this.view;       var cameras = this.cameras;       var len = cameras.length;       var i = 0;       var task = Scheduler.addFrameTask({ update: function() {         if (!inReverse) {           slider.value = i;           view.camera = cameras[i++] || view.camera.clone();           if (i === len) {             task.remove();             task = null;             domClass.toggle(this.playBtn, 'btn-info btn-success');             this.isPlaying = false;             this.recordStart();           }         } else {           slider.value = len;           view.camera = cameras[len--] || view.camera.clone();           if (len < 1) {             task.remove();             task = null;             domClass.toggle(this.reverseBtn, 'btn-info btn-success');             this.isPlaying = false;             this.recordStart();           }         }       }.bind(this)});     }   });     var map = new Map({     basemap: "dark-gray"   });   var view = new SceneView({     container: "viewDiv",     map: map,     scale: 240000000   });   var camRecorder = new CameraRecorder(     { view: view }, document.getElementById('recorder')   );   view.then(function() {     camRecorder.recordStart();   }); }); What I'm doing here is two things. I'm using Scheduler.schedule() here to schedule some methods to occur on the next frame. These are the methods that store the camera or slider changes to record the view. Then when you play the recorded camera views in sequence, I use Scheduler.addFrameTask({update: function(){}}) to add a function when the view is updated, basically rendered. There is some internal lifecycle stuff at work here in the addFrameTask, but I'm just shooting at the hip here, so let's go with update as the one to hook into. If you don't sync operations like this that have to do with animation, you'll end up with a stuttering map. My first draft of this app was strictly working on watching for property changes, but it jacked up my app. Now it is much smoother. You can see this updated example here. So if you are interested with playing around with animating the view, playing with the camera or working in sync with animateTo to enrich your app, play around with Scheduler or just requestAnimationFrame if you like. For more geodev tips and tricks, check out my blog. ... View more

The ArcGIS 4.0 Beta 2 is out and it's another step forward in what you can expect in the next generation of the ArcGIS JavaScript API. I talked about the general updates in this release here and a bit more about Vector Tiles here. So if you haven't been paying attention, a big new feature in the 4.0 version of the API is 3D support. The 4.0 beta doesn't currently support Web Maps,(it will) but it does now support Web Scenes. You can create a Web Scene in the ArcGIS Online SceneViewer. Now you can take those scenes create in the SceneViewer and use them in your 4.0 beta application. Once you have a Scene created, just use the item id like you would use for any ArcGIS Online item and pass it into the WebScene. Here is a demo pretty much just like the Esri sample. require([   "esri/views/SceneView",   "esri/portal/PortalItem",   "esri/WebScene",   "dojo/domReady!" ], function(SceneView, PortalItem, WebScene) {   var scene = new WebScene({     portalItem: new PortalItem({       id: "94b0da9f133947089773a681523882e7"     })   });   var view = new SceneView({     map: scene,     container: "viewDiv"   }); }); Notice that you technically create a PortalItem with your item id and you pass that PortalItem into the WebScene. That WebScene can then be used as the map to power the SceneView. To get a refresher on how the Map and View relationship works in the ArcGIS JS API 4.0 beta, you can take a look at this blog post. Here is a sample of this scene. 3D Scene Sample on jsbin.com Not only do you get Web Scenes, you get Local Scenes. Here is a sample of a local scene. Soak that in folks. I know you oil and gas people are salivating. You can basically clip a 3D scene to localize an area and view underground data. You can then load this data into your application view the WebScene module. Who needs 2D maps. So take a crack at the SceneViewer and turn some of your stale old 2D data into a 3D masterpiece! For more geodev tips and tricks, check out my blog. ... View more

Earlier this week, Esri announced the release of a Bower package for the ArcGIS API for JavaScript. This opens up another channel by which users can leverage to create custom builds of their applications. Currently, you can use the JavaScript Optimizer to create and host a custom build of the ArcGIS JS API. If you wanted to take it a bit further and try to create a custom build of your entire application, there has been esri_slurp that let you download a version of the API from the CDN that was meant for testing purposes, but allowed users to create local custom builds of their applications. The Bower package is a perfect drop-in tool you can use to create local builds. I go in to a lot more detail in this blog post and video about how to use the Bower package to create your custom builds. You can simply do: bower --save arcgis-js-api You can find more detailed samples in the guide. These samples demonstrate how to use the Bower package to install directly into your working directory, set up your development environment and do a local build of your application in both Dojo and RequireJS. In many cases, you may not need to create a custom build of the application using the Bower package. If you're development has been working fine using the CDN, there is probably no need for you to use the Bower package. The JavaScript Optimizer makes it pretty easy to create custom builds of the ArcGIS JS API and even to get that specific build hosted in a CDN. If however, your applications need to sit inside a sandboxed environment where you can't use a CDN or maybe your applications are quite extensive and could benefit from a custom build, then the Bower package may be for you. Whatever you decide, you are still building awesome apps! For more geodev tips and tricks, check out my blog. ... View more

https://www.flickr.com/photos/thewavingcat/218583023 So this isn't a new feature at all, it's been around almost as long as the API has, but I figured it was one of those things that may have been lost among all the other cool features of the ArcGIS API for JavaScript... Changing the map cursor. It's such a simple task, yet can add so much to your users experience when working with your application. There is a method specifically for this. setMapCursor​. It's not difficult to do, you just pass the type or cursor you want into your app. Maybe you've added the ability to click on the map open a Google Street View in a new window. Well, hey, make a cursor that can specifically show that you are in the middle of a picking a spot on the map to do this. Here is a demo of what this might look like. Just do it! Like I said, this isn't a new fancy functionality of the API and setting cursors in web apps is typically done via CSS. But, when you are performing certain actions within your application it would be nice to provide your users with some form of feedback that something is happening and one way to do this is via the map cursor. For more geodev tips and tricks, check out my blog. ... View more