Latest Contributions by ReneRubalcava

Recently I talked a bit about some of the visualization tools in the ArcGIS API for JavaScript. Recent releases have introduced Smart Mapping, which takes some of the guesswork around generating renderers based on your data. They've also introduced some really cool features that deal with blending of colors based on the data in your map. It's getting to a point where devs aren't going to have many excuses for ugly maps. One thing I saw mentioned at the EsriUC last week was the idea about using Smart Mapping to generate your renderer, experiment with it a bit and use it to generate the JSON of the renderer that you can use later on without having to invoke the Smart Mapping tools. This is totally doable, but a little unclear on how you might do it. So let's take a look at a couple of techniques you might want to use. Save it locally So maybe your app allows the user to make some queries on the data and perform an update of the renderer based on that query. A sample straight from the docs on that could look this one. Well, you can add a couple of more functions to this sample and save the renderer to localStorage. similar to how you could with Features. Those helper functions could look something like this. function saveLocal(data, field) {   var key = location.pathname + '-' + field;   localStorage.setItem(key, JSON.stringify(data)); } function getLocal(field) {   var key = location.pathname + '-' + field;   var data = localStorage.getItem(key);   if (data) {     return JSON.parse(data);   } else {     return null;   } } Then when you set up Smart Mapping, you could check localStorage for an existing renderer and just use that saved renderer, bypassing Smart Mapping entirely. function createRenderer(field) {   //smart mapping functionality begins   var data = getLocal(field);   if (data) {     console.log('load renderer from localStorage');     layer.setRenderer(jsonUtils.fromJson(data));     layer.redraw();     createLegend(map, layer, field);   } else {     smartMapping.createClassedColorRenderer({       layer: layer,       field: field,       basemap: map.getBasemap(),       classificationMethod: "quantile"     }).then(function (response) {       console.log('save renderer to localStorage');       saveLocal(response.renderer.toJson(), field);       layer.setRenderer(response.renderer);       layer.redraw();       createLegend(map, layer, field);     });   } } Now, that's pretty cool. The data in this sample isn't too complicated, but you can imagine if you had a large dataset, it could take a second or so for Smart Mapping to generate the renderer and this method could a dose of optimization to your app. Here is a full demo of this application in action. Make a Test App Another cool thing you could do is create a test app similar to this sample.  Then you can add a <pre> tag to your page and update it with the renderers JSON when it gets updated. The code may look something like this. var data = colorRenderer.renderer.toJson(); var js = JSON.stringify(data, null, 2); document.getElementById('results').innerHTML = js; So now, you can copy paste this JSON directly from your web page and you could use it in a local configuration that might use the webmap spec. Now you don't have to worry about using Smart Mapping in a production app that may not need it, it just needs the cool looking renderers that it can generate. Here is a demo app showing how you might do this. Go home So there you go, you now have a couple of ways to generate your renderers, save them and use them in your apps to optimize performance when needed. The visualization tools in the ArcGIS API for JavaScript have come a long way over the years and I think it gives developers some pretty good resources to make cool looking maps for their apps. You're done, you can go home now. For more geodev tips and tricks, check out my blog. ... View more

So you're a developer at the EsriUC. Don't worry, sessions may not be as abundant as Developer Summit, but there are some things you may be interested in. Go to the agenda and use the search and type in something like JavaScript, .Net or Python. You'll hit plenty of results. Just yesterday I was able to announce in a session that the ArcGIS API for JavaScript will soon have a bower package. You didn't hear that at Developer Summit, now did you. You'll learn more about some of the really cool visualizations like Smart Mapping and Blend Renderer. There's a JavaScript Road Ahead session that will talk about some of the stuff in the JavaScript 4.0beta1. There's developer islands for JavaScript, Online, Windows, Analysis near the end of the hall downstairs by the Demo Theaters. Come by and ask any questions you have, get some insight to an issue you've been struggling with or just check out the links on some of the laptops with cool samples and documentation. There's no need to be a lost developer at the UC. There are some sessions you can check out, there are plenty of developers you can talk to, and you get to see how other users are using technology to solve their problems in the user sessions. And how do you think they solved those problems, GIS? Well yes, probably, but I'm willing to bet there was a developer or two driving the GIS development that helped solved some of these real-world issues and that is definitely something you may want to check out. So, if you're at the UC, stay connected, check some stuff out and if you see me around, just say hi and if you have a question, feel free to ask. I'll probably be at the JavaScript Developer island most of the next couple of days! For more geodev tips and tricks, check out my blog. ... View more

The 3.14 release for the ArcGIS API for JavaScript was released today. You can read the announcement here and of course the documentation is updated here. There's some really cool stuff in this release and lots of bug fixes. However, one thing I think is really cool is some of the new visualization capabilities being added to the API. Hot on the heels of Smart Mapping introduced in the 3.13, which I talked about here, they have now introduced a new renderer called Blend Renderer. What is is that makes the Blend Renderer so cool? That it doesn't work in IE8! I'm kidding, but thank goodness we could throw that crutch out the window for Blend Renderer, because it allows you to do some really cool stuff when making your maps. So what does the Blend Renderer do? As the name says, it blends your values together. But it does so based on the data. Look at the docs for examples. Let's say you have 2 values: Beer drinkers Wine drinkers Now let's assume you have a parcel with 20 people and 19 out of 20 are beer drinkers. The color would be a strongly blue. Then you have another parcel with 20 people, but 10 beer drinkers and 10 wine drinkers. So the color will be more purple. Or somewhere around there, I'm a developer not a color wheel. But you should get the idea. Ok, so you have that down. But you're like, yeah, that's like a color ramp type thing man. It's called a Blend Renderer for a reason. Take a closer look at the docs and you'll see that there's a blendMode. What does this blendMode do? It determines how these colors blend together. They aren't just making up their own blendModes, these are the standard available composition types in the Canvas API, which is linked in the docs. This gives you the ability to do some very cool visualizations of your data. Maybe you want a different blendMode based on your basemap or some other data you are going to display on your map. This gives you some creative control over how you want to display your data. The Blend Renderer is released in beta, so if you burn your eyeballs out from some funky combo of data and blendMode, remember, it's beta. Here's a little sample taking a demo from the docs and adding a pulldown to test out the different blendModes. Got out and make some cool maps to go with your cool apps. For more geodev tips and tricks, check out my blog. ... View more

I'm going to assume you are currently building apps with the ArcGIS API for JavaScript or you plan to. Maybe you've been doing stuff in Flex or Silverlight and you've put off the switch until now.  wanted to address a few things I've seen pop in the forums that aren't necessarily related to the ArcGIS APIs, but maybe more in how JavaScript itself works. I also wanted to give your some resources to up your JavaScript game. Learn the basics Closures. I can't emphasize this enough. Learn scope, learn closures and variable declarations. So many issues that pop up on these forums have to do with errors in scope, this will be a lifesaver. I've covered promises before, but I'm going to emphasize them again. Learn promises. Here's a cool blog post on promises. Learn how to chain your promises. Promises are used throughout the ArcGIS JS API. You may not need to use dojo/promise/all, or have nested callbacks, you may just need to chain your promises. Heck, don't even use callbacks, just use then and otherwise. Arrays. I'm going to go ahead and say that a better understanding of arrays and their methods will make your JavaScript life so much easier. You can do so much with arrays, I can't possibly mention them all. You can filter them, you can map them, you can reduce them. You can treat them as immutables by using concat and slice. If you can master arrays, you'll find that your JavaScript prowess will grow exponentially. The last basic thing I want to mention here is Object.prototype. Don't forget that JavaScript is a prototype language. You may think you are working with classes and classical inheritance, but part of the beauty of JavaScript is that you can treat it like that if you want, but it's simply not true. Here is good answer to this question on stackoverflow. If you ever want to up your game and play with a purely prototype language, check out io. Resources to up your game So if you are new to JavaScript or maybe looking for a refresher, I think Eloquent JavaScript is a good starting point. It covers a lot of ground, including canvas and Node. Here is a great document from Esri training on resources for the ArcGIS API for JavaScript. You Don't Know JavaScript. This is a free book on github, but you can purchase print copies. I've see one of Kyle Simpsons online training courses for JavaScript. Even if you think you know JavaScript, he'll show you something you don't know. This is very in depth stuff and highly recommended. MDN. The Mozilla Developer Network. This is like having the JavaScript specs laid out for you in a nice informative fashion. This is a must-have reference when doing JavaScript development, all the samples are easy to understand and it's easy to know which features are experimental. ES6/ES2015. The spec is final, it's done, it's coming. I expect we'll see more features roll out in browsers over the next couple of years. Things like import may take a while, but the future is now, stop fooling around. Functional Programming. Ok, this one is like a teachers pet. Do I think everyone should be doing functional JavaScript? Maybe("Yes"). I'm kidding. But I do think you could learn a lot about JavaScript development by learning how to use it in some functional programming manner. You don't need to know Monads, but you already know Functors. (Arrays are Functors, which are containers that can be mapped with functions to get their values). I'm not a pro, but an avid admirer and user. Reactive Programming This kind of ties right into Functional Programming. Reactive Programming is dealing with streams or asynchronous data over time. The link provided is a great resource. There are libraries like RxJS and Bacon to help you out here. I think that's enough to get you going for now. It's not totally related to the ArcGIS API for JavaScript, but trust me, master the basics, learn a little of the extras and you will definitely be rocking some higher level JavaScript. For more geodev tips and tricks, check out my blog. ... View more

Not too long ago, Jeff Jackson put up a blog post on using Ember with the ArcGIS API for JavaScript. This gives a pretty good rundown on how you can use EmberJS with the ArcGIS API for JavaScript. Ember itself has grown quite a bit recently, much of this growth could be said to with the popularity of ember-cli. What is ember-cli? I'm glad you asked. Ember-cli is a command line tool for scaffolding, testing and running applications built with Ember, the Ember way. You see, Ember is an extremely opinionated framework. You may be thinking, I don't need a framework telling me how to build apps! Yeah, that's kind of what a framework does. Some are a little more flexible than others. I'm not saying Ember isn't flexible, I'm sure you could write horrible apps in Ember like any other framework, but where it's opinionated way of doing things seems to shine is when you are working with teams of people. It's pretty nice to know that everything is being done the same way across the board. Ember-cli is a great tool to help speed this process along. Think of it as Yeoman, but super sleeked out and with tons more features. And with multiple developers working on the same app, using ember-cli, you have a lot more harmony. A few commands here and there, you have built in generators and tons of addons. Which is where the ArcGIS API for JavaScript comes in. You see, ember-cli utilizes a minimal AMD loader. What does minimal mean? It's not like RequireJS or Dojo loader, it's just a synchronous loader with a dictionary of modules. You can't just drop in a legit AMD loader to replace it. Your application will explode. Believe me, I have tried, many many variations of this scenario. It all ended in tears and flames. So what is someone to do? Build an addon! Add it all on! I went into more detail about the addon in a recent blog post, but what it essentially does is let you use RequireJS or Dojo AMD loader in parallel with the ember-cli loader. The AMD loader can be installed via bower or can be linked from a CDN. You can view the source code in the repo the ember-cli-amd addon here. The addon itself is not specific to the ArcGIS API for JavaScript, but by utilizing the CDN option for the AMD loader, you can use it to build Ember applications with the ArcGIS API for JavaScript. If you want to try this out, you can install ember-cli and check out this demo repo that shows how to use it. The application for this repo can be viewed here. What the addon does is look at the configuration for your application: var app = new EmberApp({   srcTag: 'https://js.arcgis.com/3.13/',   amdPackages: [ // user defined AMD packages     'esri','dojo','dojox','dijit',     'put-selector','xstyle','dbind','dgrid'   ] }); That amdPackages option is part of the key. The addon uses esprima to analyze the code in your Ember app, find all modules that have a root found in the amdPackages option and will preload those modules via AMD. There is some other black magic it does to run the AMD loader in parallel with the ember-cli loader for any modules that might need to be dynamically loaded, but that's the gist of it. You can now build ArcGIS API for JavaScript application using the ember-cli. I had lots of fun writing this addon and I learned a lot, I mean more than I really expected about Ember and ember-cli tooling. I have a pending PR to a dependency that fixes a couple of issues when your build the ember-cli app, but as of right now, it works. You can see notes in the README for details. I'd highly recommend you try your hand at using ember-cli to build your ArcGIS API for JavaScript apps using the ember-cli-amd addon. I'll admit, Ember in general may have an odd learning curve, but I think ember-cli helps greatly in putting everything into context. For more geodev tips and tricks, check out my blog. ... View more

Every once in a while you may get an odd request from your users on features they would like added to an application. They might want to integrate some wacky API or work completely offline, neither of these things might be construed as easy, but could be managed to an extent. Maybe they want to save the last map extent when they close and open their browser back up, you can do that! One thing I've done before is save selections, so that when a user closes the browser, they can come back to the app and the last items they selected are still selected. I don't know man, office people. But hey, you can do that! Storage I've shown how can use the localStorage API to save map locations and even use other tools like PouchDB to nearly take your application totally offline. We'll refer to this as mostly-offline, so don't get all uppity. Even the offline-editor takes advantage of locaStorage for some bits. Normally I would recommend sing IndexedDB or storing things like graphics locally, but if I'm just concerned about storing the most recently selected features, I would totally just keep it simple with localStorage. Key-value pairs for life. Step By Step The steps are pretty simple. Create a unique key to store selections When a selection is complete, store the selection When selection is cleared, clear storage When application starts, check storage or saved selections and reselect Easy-peasy! Generating a unique key is simple. Since localStorage is partitioned out per domains, I just take my latest location and add some unique identifier to it. Something like this: var key = location.href + '--id-selection'; Too easy. Then you just need to store the selection in when it's complete. easy enough. featureLayer   .selectFeatures(selectQuery, FeatureLayer.SELECTION_NEW)   .then(function(results) {     var data = results.map(function(x) { return x.toJson(); });     localStorage.setItem(key, JSON.stringify(data)); }); So what are we doing here? Well, every Graphic has a toJson method to output a vanilla object representation. As a matter of fact, this method is sprinkled all over the place in the API (hint hint, see what else you do with it).  So we can map over the results and run toJson on them to get the JSON data. They we can save it to localStorage after we stringify it. This is important, localStorage is a string-friendly environment. Plain objects will just look like "[object Object]", which is not useful. Then make sure if there is somewhere in your application where the selection is cleared, you remove the item from localStorage too. on(dom.byId("clearSelectionButton"), "click", function () {   featureLayer.clearSelection();   localStorage.removeItem(key); }); Simple enough. Now the cool part. When an application starts, we want to check the localStorage for saved selections. I like to have a simple helper method to do the actual parsing of graphics, so it could look something like this. var parseToGraphics = function (str) {   if (!str) { return undefined; }   return JSON.parse(str).map(function(x) {    return new Graphic(x);   }); }; So JSON.parse does the opposite of JSON.stringify. It will attempt to turn string data into vanilla JavaScript objects. Again, another cool feature in the ArcGIS API for JavaScript is that some constructors accept JSON representations of what you are trying to create. Just like the Graphic constructor. This let's you just churn out Graphics like a Graphic maniac. Then you can wait for your FeatureLayer to load and check localStorage. featureLayer.on('load', function() {   var items = parseToGraphics(ls.getItem(key));   if (items) {    var q = new Query();    q.objectIds = items.map(function(x) {      return x.attributes.OBJECTID;    });    featureLayer      .selectFeatures(q, FeatureLayer.SELECTION_NEW);   } }); And BOOM! You just saved selections and displayed the last selected items when an application loads. You can see a sample of this jsbin. I have to warn ya, jsbin seems a little wonky for this app sometimes, at least on my machine, but this works, trust me. Why even save whole Graphic if you're just using ObjectIds? Hey, I don't tell you how to stir your oatmeal. But good question. If you know for sure, you are only going to select by ObjectIds, then sure, just save the ObjectIds. I like to have the graphics, because then I have options. You may want to do some sort of separate analysis or selection using the saved selection. Or  maybe you want to show to the InfoWindow for the first selected item when the application starts. featureLayer.on('load', function() {   var items = parseToGraphics(ls.getItem(key));   if (items) {    var q = new Query();    q.objectIds = items.map(function(x) {      return x.attributes.OBJECTID;    });    featureLayer      .selectFeatures(q, FeatureLayer.SELECTION_NEW)      .then(function() {        items.map(function(x) {          x.setInfoTemplate(infoTemplate);        });        map.infoWindow.setFeatures(items);        map.infoWindow.show(items[0].geometry.getCentroid());    });   } }); You can see a demo of this on jsbin. This sample needs some work, but you get the idea. I normally use this to display Popup content in some other portion of the application sync it with the map. By saving the Graphic, you at least have some options of stuff you can play with. But if you know you don't need all this, then sure, optimize and only save the ObjectIds. Save The World So don't be afraid to play around with localStorage or other forms of storage to persist data in your application. Have some fun with it and make cool apps. For more geodev tips and tricks, check out my blog. ... View more