Latest Contributions by ReneRubalcava

So yeah, I have something of an affinity for Accessors in the ArcGIS JS API 4.0 beta. I've written about them a lot. Their incredibly versatile, allowing you to do things you couldn't do with regular event watching in the 3.x API. You can play with the camera, save the state of your application and much much more. Lately I've been thinking about possible editing and drawing scenarios you can get out of Accessors. Lots of times, you aren't just editing geometry, you are editing attributes. I've been toying around with how you as a developer can leverage Accessors to get this done. I won't go into details here, you can get the details for fields from the layer data returned from the ArcGIS REST API. This will tell you what fields are available, what's editable, what the field type is, which is really powerful information used for editing. You can leverage this information to dynamically create your edit forms for your application. We'll simplify this scenario a bit. Let's just assume, you want to do the following: Display inputs for each attribute field Bind changes in the input to the attributes Display those changes Accessors can let us do this. Let's look at creating an input that binds changes to the input to the Accessor.   function createInput(/*Accessor*/target, /*FieldName*/name) {     var node = document.createElement('div');     node.setAttribute('class', 'form-group');     var lbl = document.createElement('label');     lbl.innerText = name;     var input = document.createElement('input');     input.setAttribute('class', 'form-control');     input.setAttribute('type', 'text');     input.setAttribute('name', name);     input.setAttribute('value', inputValue(target, name));     node.appendChild(lbl);     node.appendChild(input);     on(input, 'keyup', function(e) {       // update the accessor       target[e.target.name] = e.target.value;     });     return node;   } In this sample, we listen for the keyup event of the input and update the Accessor. Pretty simple. Now you can watch for changes done to the accessor and do something with that. You would probably want to send an update to a FeatureService and simply sync every update to the service. To demonstrate this binding, I'll bind the dynamically generated form to another form that is disabled to show the updates.   qTask.execute(query).then(function (results) {     var feature = results.features[0];     var attr = new Accessor(feature.attributes);     Object.keys(attr).sort().map(function(key) {       // only display certain fields       if (key !== 'OBJECTID' && key !== '_accessorProps') {         var node = createInput(attr, key);         var elem = document.getElementById(key);         elem.value = inputValue(attr, key);         // watch for updates and update the disabled form         attr.watch(key, function(val) {           elem.value = val;         });         entryForm.appendChild(node);       }     });   }); This method does the query of the service and turns attributes into an Accessor. It also creates the dynamic form, but notice that it watches for changes to the Accessor and updates the disabled form. This is where you could pass updates to a FeatureService as well if you wanted to, maybe using the edit tools here. You can see this in action in this JSBIN. Here is a bit of an optimized version of this sample.   qTask.execute(query).then(function (results) {     var feature = results.features[0];     var attr = new Accessor(feature.attributes);     var props = Object.keys(attr).filter(function(key) {       return key !== 'OBJECTID' && key !== '_accessorProps';     }).sort();     var nodeCache = {};     attr.watch(props, function(val, _, name) {       var elem;       if (nodeCache[name]) {         elem = nodeCache[name];       } else {         elem = document.getElementById(name);         nodeCache[name] = elem;       }       elem.value = val;     });     props.map(function(prop) {       var node = createInput(attr, prop);       var elem = document.getElementById(prop);       elem.value = inputValue(attr, prop);       entryForm.appendChild(node);     });   }); That really isn't too difficult when you look at. You can basically delegate the updates to the Accessor to some other methods and simply watch for when changes take place on it. Play around with this, get your hands deep in the Accessors and let it sink in, you won't be disappointed. For more geodev tips and tricks, check out my blog. ... View more

Earlier this week, Esri announced the release of a developer support repository on github. This is a really interesting repo, as it covers the gamut of APIs and SDKs that Esri provides. It covers stuff from Python and Java to SQL and JavaScript. It's well worth going through here to find some examples for stuff you might be working on. There's some solid ArcObjects stuff in there if you're getting hardcore. I notice MapObjects is missing (I kid, I kid). But don't worry, Flex and Silverlight are represented (still kidding). Seriously though, there's some R goodness in there, which if you didn't know, is a thing. Python folks should check it out, as there are some good scripts in here. There are tons of really great resources for Esri devs on github. If you are a JavaScript developer, we've covered specifically how you can increase your JavaScript skills. Last month I attended the TC Disrupt Hackathon in San Francisco. I was there to help out devs on their hacks using Esri APIs and SDKs. This was a lot of fun and I prepared the JS and Framework Integration resources repo to help developers get up and running with the ArcGIS API for JavaScript. The goal here is to show developers how to use the ArcGIS JS API with multiple frameworks. There are resources for React, Angular, Ember and Polymer. You can even use the JS API with other JS utility libraries like Ramda and RxJS. It's not just other libraries you can use with the JS API, but there are resources to write your apps in TypeScript. I haven't really delved into using PureScript or ClojureScript with the JS API, although there might be a path with ClojureScript, and some post-processing that could be done with PureScript... maybe. The point of all this is that there are lots of resources out there for Esri devs to learn from. Whether you're a novice or a pro, I'm sure you'll find something out there that can help you out. For more geodev tips and tricks, check out my blog. ... View more

Pretty recently, there was a cool blog series on using the GeometryEngine in the ArcGIS JS API. If you haven't read it, I highly suggest you do. But before we had the GeometryEngine, we had to do stuff the old fashioned way, manually checking geometries on our own. I pulled this from a use case I found in an old repo of mine. The use-case is that I have a point, and before I can do anything with this point, I need to know if the point is contained in any other features. For example, I have data being streamed real-time into my app, say service requests, but I only care about seeing the ones that are in some predefined service areas. A simple utility could look something like this: define([], function () {   var geomUtil = {};   geomUtil.graphicsContain = function (graphics, pt) {     var len = graphics.length;     while (len--) {       var graphic = graphics[len];       if (graphic.geometry.contains && graphic.geometry.contains(pt)) {         return pt;       }     }     return null;   };   return geomUtil; }); So basically, you iterate over the graphics and as soon as you find a graphic that contains the point, you return it. This saves some time as it doesn't need to iterate all the graphics to finish. You could even tweak this a bit by finding the graphic in the graphics array that contains the point and instead of returning the point, return the graphic. To do it right, you'd need to iterate over all graphics though, which depending on your application could be expensive. Here's a sample of what this might look like in action: JS Bin - Collaborative JavaScript Debugging To test it, draw some rectangles and polygons on the map and then try to add points. You should only be able to add points inside the polygons. You could even get pretty function and start filtering out geometries that you can throw into the GeometryEngine and now you have a party! For more geodev tips and tricks, check out my blog! ... View more

Photo: pin points | Flickr - Photo Sharing! So I've seen this come up a couple of times. You have some FeatureLayers on your map. You set up a listener for clicks on the map. You click on the map. You have maybe six layers, but you only get back one graphic. What's up with that? Ok, so yeah, this just has to do with what layers are where. Graphics on you map probably SVG. It just so happens that if an SVG has no fill, you can't get a click event from it. You can however set the opacity to clear and still get a click event, so keep that in mind. But it's also a web thing. The way SVG graphics work (all DOM elements really), the click event just comes up from the top element. It doesn't click through to other elements. So you're screwed right? Not so fast. You have a couple of options here. The first is to use a QueryTask. You can simply query all the layers and get results for features at the location you clicked. This is a nice clean solution and works great for polygons. Points and Lines are a little trickier. If you don't click exactly where the point or line is, you won't get a result. So you could make a little buffer of the location you clicked on using the GeometryEngine if you like to try and get a better result. I'll leave that up to you. You can also use the IdentifyTask. This takes a little more work to set up when using FeatureLayers and experimenting with a tolerance, which is similar to the buffer we talked about earlier. I personally think the QueryTask with a buffered geometry is a better solution, but at least you have some options. Here's what this might look like: require([   "esri/map",   "esri/layers/FeatureLayer",   "esri/tasks/query",   "esri/tasks/IdentifyTask",   "esri/tasks/IdentifyParameters",   "dojo/promise/all",   "dojo/domReady!" ], function(Map, FeatureLayer, Query, IdTask, IdParams, all) {   var map = new Map("mapDiv", {     center: [-118.182, 33.913],     zoom: 14,     basemap: "topo"   });     var layer0 = new FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/0");     var layer1 = new FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/1");     map.addLayers([layer0, layer1]);     // conventional method   map.on('click', function(e) {     // only one graphic     console.log(e.graphic);     // let's get freaky *_*     var q = new Query();     q.returnGeometry = true;     q.outFields = ["*"];     q.geometry = e.mapPoint;     // distance and units are for Hosted Feature Services Only     q.units = "feet";     q.distance = 50;     // Query all the FeautreLayers     var defs = [layer0, layer1].map(function(x) {       return x.queryFeatures(q);     });     all(defs).then(function(results) {       console.log("all query results", results);     });         // Or use IdentifyTask, super freaky! #_#     var idParams = new IdParams();     idParams.geometry = e.mapPoint;     idParams.mapExtent = map.extent;     // You'll need to experiment with tolerance     // to get the desired results     idParams.tolerance = 10;     idParams.layerOption = IdParams.LAYER_OPTION_ALL;     var url = layer0.url.substr(0, layer0.url.lastIndexOf("/"));     idParams.layerIds = [layer0, layer1].map(function(x) {       return x.url.substr(x.url.lastIndexOf("/") + 1, x.length);     });     console.log(idParams);     var idTask = new IdTask(url);     idTask.execute(idParams).then(function(results) {       console.log("id results", results);     });   });   }); You can find a live demo here. So  don't let little limitations get you down. You can get just about anything done with a little elbow grease. For more geodev tips and tricks, check out my blog. ... View more

https://www.flickr.com/photos/paloetic/4795592340/ Have you ever been working on a mapping application and maybe you're listing some data somewhere that corresponds to the data on your map? We've seen samples in the past that show how to highlight features on the map when you hover over a related item in a list or a table. That's cool. But haven't you ever wanted to quickly see in your list what that item corresponds to on the map? Maybe using the matching symbology that is used in the map? I bet you have? It turns out, that's not incredibly difficult to do. The renderer (in both v3.x and v4beta) has a method called getSymbol. This method takes a graphic. But if I had a graphic, I'd have the symbol, what are you trying to pull here man?! Chillax. Let's assume you are using the QueryTask to query your data. The results of a QueryTask return Features, which are Graphics, but they have no symbols. So you can iterate these results and get the symbol from the renderer. That could look something like this sample. require([   'esri/layers/FeatureLayer',   'esri/tasks/QueryTask',   'esri/tasks/support/Query' ], function(   FeatureLayer, QueryTask, Query ) {   var featureLayer = new FeatureLayer({     id: 'myLayer',     outFields: ['*'],     url: 'http://services2.arcgis.com/LMBdfutQCnDGYUyc/arcgis/rest/services/Los_Angeles_County_Homeless_Programs_Services/FeatureServer/0'   });   featureLayer.then(function() {     var node = document.getElementById('my-list');     var q = new Query({       where: '1=1',       outFields: ['*'],       returnGeometry: false     });     var qTask = new QueryTask(featureLayer.url);     var promise = qTask.execute(q).then(function(results) {       return results.features.map(function(a) {         var sym = featureLayer.renderer.getSymbol(a);         a.symbol = sym;         return a;       });     });     promise.then(function(features) {       features.map(function(feature) {         var attr = feature.attributes;         var sym = feature.symbol;         var item = document.createElement('li');         var img = document.createElement('img');         img.setAttribute('src', sym.source.url);         img.setAttribute('height', 25);         img.setAttribute('width', 25);         var span = document.createElement('span');         span.innerHTML = attr.ProgName;         item.appendChild(img);         item.appendChild(span);         node.appendChild(item);       });     });   }); }); There's no map in this sample, as it's not the focus here. We're just creating a FeatureLayer so that we can leech off it's renderer. Then when we do the Query of the layer, we use the renderer to get the symbol and create an list element with an image and some text. You can see a demo of this here. You can not take this sample and hook it up so that when you click on an item, it can zoom to the location on the map and maybe display some detailed data in another part of the page or in the popup, that's totally up to you. I just wanted to show how easy it is to get access to the symbology of features to use them in your actual user-interface. So go forth and hack away! For more geodev tips and tricks, check out my blog. ... View more

It occurred to me recently that developers can be somewhat confused about how they can use ArcGIS Online for their development needs. I even wrote up an intro for developers earlier this week. So I just wanted to cover a few resources that are good staring off points for users. Developer Site The key entry point for developers is probably going to be the developer site. The developer site is a gateway to a wealth of information on how you can leverage ArcGIS Online for your applications. It covers the details of the premium services from the ever popular geocoding and routing to the powerful geoenrichment and geotrigger services and more. It also links out to all the various APIs and SDKs that Esri provides that you can use to access these services. And as I have said before and I'll keep saying it, it links to the core to it all, the REST API documentation. But how does all this tie into ArcGIS Online? ArcGIS as a Platform I was a confused ArcGIS Online user at one point. When it was released I wasn't quite sure what to make of it. Then it became a platform. What does that even mean? Basically, all the resources and tools discussed on the developer site are gathered in ArcGIS Online, along with tons of data that others have created and are sharing. This lets you tie into multiple resources for your applications. But how does a developer get started? I covered this a bit more in this blog post and in my book, but here are the main points. Create a Feature Service via your Developer Account. You can also upload data directly into your ArcGIS Online Account (same account used for developer site). Prepare a map with supporting data Edit or collect data, via your own application or one of the ready to use apps. Blow it up in ArcGIS Online Let's talk about that last one a bit, which is where the cool stuff is for developers who want to do something with their data. There are a ton of tools for you to use in ArcGIS Online, you can aggregate your data, perform some spatial analysis and even use demographic data to enrich your own sad little datasets and give them meaning. You can take the results of your spatial analysis and use the visualization tools to really drive home the point of the analysis in your application. You may have collected some data for available retail locations that your client plans on opening a new store. You can use the tools to create a drive-time analysis of each location, say within 10 minutes, and you can take that result and use the geoenrichment tools to determine the demographic makeup of people that live with ten minutes of each location. You can even find out where their entertainment preferences are and use this information to narrow the down the best candidates for a new store location. You can then save these results and your clients can share this new map with other stakeholders. Learning Resources Esri has been offering a series of free online courses you can take. Learn What Spatial Analysis Can Do for You Give Yourself the Location Advantage Although these courses are not specifically targeted at developers, I think they would prove useful to anyone that wants to take their applications to a new level. There are some introductory lessons online in this Get Started with ArcGIS Online page. Don't forget, when you sign up for a free ArcGIS Developer account, you have access to all the features in ArcGIS Online. With the amount of data available to you and the ability to perform analysis on your own data that can further enrich your own applications, I think any developer should at least see how they can incorporate it into their workflow. For more geodev tips and tricks, check out my blog. ... View more

I did a blog post recently on using Polymer with the ArcGIS API for JavaScript 4.0 beta. You can read more about Web Components here and here. Web components are awesome, because you could do something like this in your HTML. <body>   <my-awesome-component></my-awesome-component> </body> And you could have <my-awesome-component> be some awesome user-interface element! Sounds great right? Yeah, web-components aren't quite supported in all browsers yet. But no fear, while browser vendors duke out the spec and details, we can just use awesome libraries like Polymer. Most libraries like Angular, Ember, React and even Dojo Djits provide components of some sort. So what's so great about Polymer? Let's look at a simple component that we want to use to display the current extent of the map. <dom-module id="extent-info">   <template>     <div class="extent-details well">       xmin: <span>{{xminc}}</span><br>       ymin: <span>{{yminc}}</span><br>       xmax: <span>{{xmaxc}}</span><br>       ymax: <span>{{ymaxc}}</span><br>     </div>   </template>   <style>     .extent-details {       margin: 1em;     }   </style>   <script>     var ExtentInfo = Polymer({       is: 'extent-info',       properties: {         xmin: Number,         ymin: Number,         xmax: Number,         ymax: Number,         xminc: {           type: Number,           computed: 'toFixed(2, xmin)'         },         yminc: {           type: Number,           computed: 'toFixed(2, ymin)'         },         xmaxc: {           type: Number,           computed: 'toFixed(2, xmax)'         },         ymaxc: {           type: Number,           computed: 'toFixed(2, ymax)'         }       },       toFixed: function(n, x) {         return x.toFixed(n);       }     });   </script> </dom-module> So let's check this out. The root of your component is a dom-module with an id that corresponds to the id given to the Polymer constructor. Then we have a template section. The template section contains the actual DOM elements of your component. This is where you can bind attributes to your Polymer component by using mustache syntax {{bindingVariable}}. These bound variables are defined in the Polymer constructor as properties. In these properties, you can define computed properties. Meaning these are properties that are computed based on other properties, in this case simplifying the precision of the extent numbers. The beauty of these components is that to update them, you simply update the attributes o the DOM element and the computed properties will handle the rest. class Component {   constructor(data) {     // add import link     var href = require.toUrl('app/views/PolymerView/components/ExtentInfo.html');     var node = document.querySelector('.esriTop.esriRight');     var link = document.createElement('link');     link.setAttribute('href', href);     link.setAttribute('rel', 'import');     document.body.appendChild(link);     var el = document.createElement('extent-info');     node.appendChild(el);     el.setAttribute('xmin', data.xmin)     el.setAttribute('ymin', data.ymin)     el.setAttribute('xmax', data.xmax)     el.setAttribute('ymax', data.ymax)     this.element = el;   }   update(data) {     var el = this.element;     el.setAttribute('xmin', data.xmin)     el.setAttribute('ymin', data.ymin)     el.setAttribute('xmax', data.xmax)     el.setAttribute('ymax', data.ymax)   } }; export default Component; Now the easy way to use this with the ArcGIS API for JavaScript 4.0 beta is using Accessors. You can create a Model the extends Accessor and defines the Extent. import Accessor from 'esri/core/Accessor'; import Extent from 'esri/geometry/Extent'; class Model extends Accessor {   classMetadata: {     properties: {       extent: {         type: Extent       }     }   } }; export default Model; Since it's an Accessor, you can watch for changes on the Model and update the values of the component with the changes. import Model from './Model'; import Component from './components/ViewProxy'; // Controller links Model and view class Controller {   constructor(extent) {     this.model = new Model({ extent: extent });     this.view = new Component({       position: 'topright',       xmin: this.model.extent.xmin,       ymin: this.model.extent.ymin,       xmax: this.model.extent.xmax,       ymax: this.model.extent.ymax     });     this.model.watch('extent', (val) => {       this.view.update({         xmin: val.xmin,         ymin: val.ymin,         xmax: val.xmax,         ymax: val.ymax       });     });   } }; export default Controller; That's it. You can start building out a bunch of reusable components that can be composed together to create an entire application if you want. There's currently a project called esri-polymer on github from James Milner of Esri UK that's really cool. It's based on the current ArcGIS API for JavaScript 3.x, so no Accessors, but it has enough components that it allows to put an application together without writing any JavaScript. This is the future of what's to come in web development, but screw the future, you can do this stuff now. For more geodev tips and tricks, check out my blog. ... View more

In the past few weeks I've talked about testing for your ArcGIS API for JavaScript applications, and how you might structure your ArcGIS JS Apps. Most recently on my blog I talked about a new tool I've been working on to simplify all this work for you. You can find the tool on github. This tool is based on yeoman, which is a scaffolding tool for web apps. It's a node based command line tool that let's you quickly build an ArcGIS JS app, with testing and build tools included. All the code is written in ES6/ES2015. So what do you get with this tool? Glad you asked. You get a generator that scaffolds your entire application structure for you. You get testing built in with intern. You get preconfigured easy to use Dojo build scripts. Best of all, you get a simple development workflow. What do I need? You'll need at minimum: node & npm yeoman grunt bower The Dojo build uses the Google Closure compiler, so you'll also need Java, sorry. But you'll also need Java for functional tests with intern, which uses a local Selenium driver. What do I do? Once you have everything, you can install the generator with npm install -g generator-arcgis-js-app Once you do that, create a folder that you want to use for your application. Run a terminal/command line inside the folder and use yo arcgis-js-app to use the generator to scaffold your application. The initial process takes a little while to install all the dependencies and do an initial build. Once this is done, you can npm start to start a local server on your machine and navigate to http://localhost:8282/dist to see the default application. You should also probably open another browser tab or window to view the tests page at http://localhost:8282/node_modules/intern/client.html?config=tests/intern . The scaffold will automatically inject a script in the page that will automatically activate livereload if you have the extension installed in your browser. It's also set up so that any changes you make to your code in the src directory will get updated to the dist directory and reload your web app and test page. This makes it very easy for you to develop your application and see the results right away. When you are ready to deploy your application you can run grunt release --force. This will run the Dojo build system on your app. You need to use --force for now because of a weird error in the build. It's not really broken, but something doesn't play nice, I'll be fixing this as soon as I can. This will take a while, so you go watch some cat videos or something. The release script is set up to scan your CSS file and copy all resources into a release/resources folder and update the references in your CSS file and places it in the release/app.css file. The built JavaScript app is copied into the release/app.js file. The index.html file is copied over with the new references and stripped of the livereload script. And that's it. You get 3 files and a folder of resources that you can easily deploy for your application. You're welcome. What are you talking about? You can read more details about this generator on my blog and check out the github repo as updates are done and fixes are applied. If you run into problems, let me know. I'll talk about how you might tweak the application structure at a later time. For more geodev tips and tricks, check out my blog. ... View more