Latest Contributions by ReneRubalcava

I write a lot. I write a lot of code, I've started making regular posts on this GeoNet blog, and I also maintain my own blog. In addition to all this, I wrote a book called ArcGIS Web Development that focuses on using the ArcGIS API for JavaScript. Why do I do all this? I enjoy sharing what I know and learn to hopefully help others learn something new. So I wanted to share with you five things I think you could learn from the ArcGIS Web Development book. 1. ArcGIS Server REST API This may seem odd, after all the focus of the book is the ArcGIS API for JavaScript, but at it's core, it's about developing ArcGIS Web applications and all ArcGIS Web applications revolve around the REST API. The book doesn't replace the docs, but it does introduce you to how you can get started with the REST API and even how you could use it to make a Legend widget using the legend endpoint of a service. 2. How a FeatureLayer works I thought this was a nice addition early on in the book, because FeatureLayers are so heavily used in the ArcGIS API for JavaScript. There is an overview of all the different layers and how they work, including on when you might use one over the other, but FeatureLayers have some distinct advantages in how they are optimized to deliver large amounts of data efficiently, such as generalization and vector-tiles. 3. Using an ArcGIS Developer account When I first started writing this book, there was no such things as ArcGIS for Developers. I was a little worried as to how I was going to teach people how to build ArcGIS JavaScript applications that may not have access to a full-blown ArcGIS Server license. So when developer accounts became available, it was the perfect opportunity to provide a walkthrough on signing up, creating layers and publishing them for applications. This includes how to use OAuth 2.0 and saving credentials. 4. Dojo and custom widgets The main sample in the book is on how to build a mobile-friendly web application. So there is a lot of Dojo in here on how to build a custom editing widget that simplifies the editing process. There is even an appendix on Dojo basics. There is an example on how you can modify the editing process using other datasets, such as from a web service that pulls in more detailed information than is available in the FeatureService. 5. Some advanced fun This book is mainly geared as an introduction to using the ArcGIS API for JavaScript, but I knew there were some advanced features that some readers would be interested in. So included in the advanced chapter is a guide on how to dynamically load your entire application from a single configuration file that takes advantage of the ArcGIS WebMap spec to allow you to customize your map. This chapter also covers some techniques on how to do offline-editing using various web storage resources and PouchDB. This is just an overview of things you can learn from ArcGIS Web Development as I am sure every level of user could find some gems in there. If you have any questions, please feel free to ask or if you have any topics you would like to see covered in this blog, let me know. ... View more

Let’s keep this one short and sweet. How many times have you been working with the ArcGIS API for JavaScript and had to zoom to a feature. Have you scratched your head at some of the odd behavior of using map#centerAndZoom? Maybe you found yourself writing some switch/case or if/else statements to zoom the map based on whether or not you were zooming to a point or a polygon or a polyline. Read the docs Before we look at how to easily zoom to features, let’s look at why the centerAndZoom method the map hates you. The method signature of centerAndZoom is centerAndZoom(mapPoint, levelOrFactor). What does levelOrFactor mean? Let’s look at the definition. "When using an ArcGISTiledMapServiceLayer, the map is zoomed to the level specified. When using a DynamicMapServiceLayer, the map is zoomed in or out by the specified factor. For example, use 0.5 to zoom in twice as far and 2.0 to zoom out twice as far." That’s much better. No? Still confused? Ok, basically if you are using an ArcGISTiledMapServiceLayer you can zoom the map in to a specific level of detail. Think the zoom slider on a map. However, if you are using a DynamicMapServiceLayer then it gets wonky. Now you can zoom in by a twice as much or out twice as much, but you need to specify the factor in decimal, so think percentages. I’m guessing you want to zoom in twice as much, so 0.5 seems like a safe bet, but if you did 0.25, that would be what, zoom in 4 times as much. Do the work Ok, with that in mind, you pretty much know what to do. I put together this little module a while ago when I got tired of writing the same thing over and over again and checking for geometry types and different scenarios. I’m willing to bet this will handle 90% of the situations you run into (I have no hard numbers to back this up, but trust me). define([   'dojox/lang/functional/curry' ], function(curry) {   var zoom = curry(function(map, geometry) {     if (geometry.type === 'point') {       var mz = map.getMaxZoom() ;       if (mz > -1) {         map.centerAndZoom(geometry, mz - 2);       } else {         map.centerAndZoom(geometry, 0.25);       }     } else {       map.setExtent(geometry.getExtent());     }   });   return zoom; }); Here is a live demo. So you basically check if the geometry is a point. If it’s a point, you get the maximum zoom level of the map. At this point, you have two choices: If it’s greated than -1, zoom to that level and subtract 2 so you don’t zoom too close. Or not, that’s up to you. Zoom in at a factor of 0.25, meaning zoom in 4 times the current zoom level. If the geometry is not a point, it’s easy, polygons, polylines and multipoints can return an extent, so you can just the maps current extent to the extent of the geometry. Kick it up a notch This works pretty good, but let's say you want a more flexible solution. The above version works fine when passed a geometry, but how about a graphic or an array of graphics? These are all valid objects that you may want to zoom to. So for that, let's build up a module that could handle just about anything you throw at it.   define([     'dojox/lang/functional/curry',     'esri/graphic',     'esri/graphicsUtils'   ], function(curry, Graphic, gUtils) {     var zoomToPoint = function(m, geometry) {       var mz = m.getMaxZoom();       if (mz > -1) {         return m.centerAndZoom(geometry, mz - 2);       } else {         return m.centerAndZoom(geometry, 0.25);       }     };     var zoomToGeom = function(m, geometry) {       if (geometry.type === 'point') {         return zoomToPoint(m, geometry);       } else {         return m.setExtent(geometry.getExtent());       }     };     var zoomToGraphics = function(m, graphics) {       if (!graphics.length) return;       if (graphics.length > 1) {         return gUtils.graphicsExtent(graphics);       } else {         var g = graphics[0];         var geometry = g.geometry;         if (geometry.type === 'point') {           return zoomToPoint(m, geometry);         } else {           return m.setExtent(gUtils.graphicsExtent(graphics));         }       }     };     var zoomToGraphic = function(m, graphic) {       return zoomToGeom(m, graphic.geometry);     };     var zoom = curry(function(m, gs) {       if (gs.type) {         return zoomToGeom(m, gs);       }       if (gs instanceof Array) {         return zoomToGraphics(m, gs);       }       if (gs instanceof Graphic) {         return zoomToGraphic(m, gs);       }     });     return zoom;   }); This module utilizes the esri/graphicsUtils module to handle arrays of Graphics, it can handle a single Graphic or Geometry. Click here to view a demo of this module in action. Bam done! Woah woah. What’s this curry nonsense? Ok, so I snuck this one in. Using curry basically allows you to partially evaluate functions. Which means, you pass the map to the function before you need to pass the geometry. Here is an explanation of curry in JavaScript. This isn’t a hard requirement, but it does spice things up a bit. Play with it, modify it, abuse it and code. ... View more

Previously I had talked about how you can extend dojo/on to do some neat event listener tricks. This time, I'd like to talk about dojo/topic. You can think of the topic module as an EventBus. Here is a good (non-JavaScript) explanation of an EventBus when it comes to Java. It’s basically a singleton or global messaging system for your application. What you may be doing now Let's say for example you had two widgets that you wanted to use in your application and you wanted to pass information between the two of them. You could try and pass each widget into each other and try listening for events, but that would get sloppy pretty quickly. You could just have a single module listen for events in each widget similar to something like this. on(widget1, 'load', function() {   widget2.doSomething(); }); on(widget2, 'load', function() {   widget1.doSomething(); }); That's not so bad, but if your application has to grow, you're going to find this can get plain ugly and difficult to debug after a while. What you could be doing This is where dojo/topic comes in. Each widget can use dojo/topic to subscribe to certain messages. This is similar to events, but is not dependent on individual dijits. topic.subscribe('dijit-message', function(payload) { /** do something **/ }); Then any dijit or other part of you application can publish to that channel. topic.publish('dijit-message', { message: 'hello' }); Notice the subscibe/publish methods? That's right, dojo/topic is a pubsub.‌ BOOM! Demo Here is a really simple demo of how you might use this in your application. require([   'esri/map',   'dojo/_base/declare',   'dojo/on',   'dojo/topic',   'put-selector',   'dijit/_WidgetBase',   'dojo/domReady!' ], function(Map, declare, on, topic, put, _WidgetBase) {     var Dijit1 = declare([_WidgetBase], {     postCreate: function() {       this.btnNode = put(this.domNode, 'button', 'Click me!');       this.own(on(this.btnNode, 'click', this.onClick.bind(this)),         topic.subscribe('dijit2-click', function(data) {         var oldValue = this.btnNode.innerHTML;         this.btnNode.innerHTML = data.value;         setTimeout(function() {           this.btnNode.innerHTML = oldValue;         }.bind(this), 1000);       }.bind(this)));     },     onClick: function() {       topic.publish('dijit1-click', { value: 'Hello from dijit1!' });     }   });     var Dijit2 = declare([_WidgetBase], {     postCreate: function() {       this.btnNode = put(this.domNode, 'button', 'Click me!');       this.own(on(this.btnNode, 'click', this.onClick.bind(this)),         topic.subscribe('dijit1-click', function(data) {         var oldValue = this.btnNode.innerHTML;         this.btnNode.innerHTML = data.value;         setTimeout(function() {           this.btnNode.innerHTML = oldValue;         }.bind(this), 1000);       }.bind(this)));     },     onClick: function() {       topic.publish('dijit2-click', { value: 'Hello from dijit2!' });     }   });     var d1 = new Dijit1(null, document.getElementById('dijit1'));   var d2 = new Dijit2(null, document.getElementById('dijit2'));     var map = new Map('map', {     center: [-118, 34.5],     zoom: 8,     basemap: 'topo'   }); }); Can you see the light? Hopefully, you can see how this might be a powerful way of passing data between your custom widgets in your application. I use this quite a bit for managing what widgets are visible in an application. Say, click a button, show widget1, click another button, close widget1 and open widget2. I also use it to pass around a feature that maybe other widgets depend on. There are a lot of creative ways you could use dojo/topic in your application. This was just a quick intro to a module that I find useful on a daily basis. ... View more