Latest Contributions by ReneRubalcava

Ok, let's talk the ToC. Adding a Table of Contents/Legend widget to ArcGIS web maps is one of those things that unfortunately is a necessary evil. I really think you should strive to design your map and your application in such a way that a ToC isn't needed. But sometimes, in those worst times, you have to do what you have to do. I'm guilty of it. I'm aware that users may want it and developers have to deal with it. I even added an example in a chapter to my ArcGIS WebDev book. Questions in the forum always seem to pop up about it. This ToC Widget from nilu appears to be pretty popular. It's a neat widget, tons of features, generally good stuff. Learn to walk the ToC But you as a developer should have an idea of how a ToC widget is built. I explain the concepts in the above linked sample chapter from my book. But here are the basic steps. Make a request to the legend endpoint of the MapService. Parse the legend response into a sweet looking list of the layers Wire up click events to turn layers on/off Bonus - Wire up click events to sub layers on/off Do the happy dance! That's all there is to it. Simple right? There is probably a dozen different ways you could accomplish this. You could use the dijit/Menu, you could a dijit/Tree, you could just use regular DOM elements, take your pick. Here is some code that does just this. define([   'dojo/_base/declare',   'dojo/Deferred',   'dojo/on',   'dojo/topic',   'dojo/query',   'dojo/dom',   'dojo/dom-attr',   'put-selector',   'dojo/dom-class',   'dojo/Evented',   'esri/lang',   './layerservice',   'dojox/lang/functional/curry',   'dijit/_WidgetBase',   'dijit/_TemplatedMixin',   'dojo/text!./templates/layertoc.tpl.html' ], function(   declare, Deferred, on, topic,   query, dom, domAttr, put, domClass,   Evented, esriLang,   getLayers, curry,   _WidgetBase, _TemplatedMixin,   template ) {   var labelName = curry(function(a, b) {     if (b.label && b.label.length > 1) {       return b.label;     } else if (a.layerName && a.layerName.length) {       return a.layerName;     } else {       return 'Layer Item';     }   });   var sub = esriLang.substitute;   var layertitle = '<span class="pull-right">${title}</span>';   return declare([_WidgetBase, _TemplatedMixin, Evented], {     templateString: template,     postCreate: function() {       var node = dom.byId('map_root');       put(node, this.domNode);       var map = this.get('map');       var layerIds = this.get('layerIds');       // map over the layer ids and pull       // the layers designated as part of legend       this.tocLayers = map.layerIds.map(function(x) {         if (layerIds.indexOf(x) > -1) {           return map.getLayer(x);         } else {           return false;         }       }).filter(function(a) { return a; });       // map over those layers and create some DOM element containers       this.tocLayers.map(function(x) {         var visible = x.visible ? 'glyphicon-ok' : 'glyphicon-ban-circle';         var panel = put(this.tocInfo, 'div.panel.panel-default');         var pheading = put(panel, 'div.panel-heading');         var ptitle = put(pheading, 'h4.panel-title');         put(           ptitle,           'span.glyphicon.' + visible +             '.layer-item[data-layer-id=' + x.id + ']'         );         var node =           put(ptitle,               'span',               { innerHTML: sub(x, layertitle) }              );         this._getDetails(x, node, panel);       }.bind(this));       // this will handle turning the whole service on/off       var layerHandle = on(this.tocInfo, '.layer-item:click', function(e) {         e.preventDefault();         e.stopPropagation();         domClass.toggle(e.target, 'glyphicon-ok glyphicon-ban-circle');         var id = domAttr.get(e.target, 'data-layer-id');         var lyr = map.getLayer(id);         lyr.setVisibility(!lyr.visible);       });       // this will turn individual layers on/off       var itemHandle = on(this.tocInfo, '.sublayer-item:click', function(e) {         e.preventDefault();         e.stopPropagation();         domClass.toggle(e.target, 'glyphicon-ok glyphicon-ban-circle');         var id = domAttr.get(e.target, 'data-layer-id');         var subid = parseInt(domAttr.get(e.target, 'data-sublayer-id'));         var lyr = map.getLayer(id);         var lyrs = lyr.visibleLayers;         var visibleLayers = [];         // this bit will adjust the visible layers based on what was clicked         if (lyrs.indexOf(subid) > -1) {           visibleLayers = lyrs.filter(function(x) {             return x !== subid;           });         } else {           visibleLayers = lyrs.concat([subid]);         }         lyr.setVisibleLayers(visibleLayers);       });       this.own(layerHandle, itemHandle);     },     // do a quick check that a URL has been provided     _getDetails: function(layer, node, panel) {       if (!layer.url) { return; }       var pbody = put(panel, 'div.panel-body');       this._getLegend(layer, pbody);     },     // here is the workhorse     _getLegend: function(layer, pbody) {       var url = layer.url + '/legend';       var id = layer.id;       // this is a just a wrapper module I use for       // esri/request. see source at https://github.com/odoe/esri-layertoc-sample       getLayers(url).then(function(layers) {         var tbl = put(pbody, 'table.table');         // iterate over the layers and         // add items to the table         layers.map(function(a) {           var lbl = labelName(a);           var layerId;           var hasLayerId = false;           if (a.hasOwnProperty('layerId')) {             hasLayerId = true;             layerId = a.layerId;           }           // iterate over the legend and add items           // to the table-row           a.legend.map(function(b) {             var tr = put(tbl, 'tr');             if (hasLayerId) {               hasLayerId = false;               var lyrCheck = put(                 'span.glyphicon.glyphicon-ok' +                 '.sublayer-item[data-layer-id=' + id + ']' +                 '.[data-sublayer-id=' + layerId + ']'               );               put(tr, 'td', lyrCheck);             } else {               put(tr, 'td');             }             var td1 = put(tr, 'td.layer-image');             put(tr, 'td', {               innerHTML: lbl(b)             });             // I just add the base64 image, but you could also             // use the URL to image provided in Legend endpoint             put(td1, 'img', {               src: 'data:image/png;base64,' + b.imageData             });           });         });       }, function(err) { console.debug('error in request', err); });     }   }); }); Woah, that's a lot of code. Hey you wanted to learn about a ToC widget, that's going to take a bit of code. I added some comments in there to help you out. You might be able to break out some of the functionality into smaller modules, but I'll leave that up to you. I'm using the put-selector in this sample to create DOM elements (it's included in the ArcGIS JS API) just because I've found it makes more sense for me when composing DOM creation. I'm also using Bootstrap to make it look nice, which is where some of the css class names are defined. When it's all said and done, this sample will look something like this. Pretty snazzy What this does is turns off individual services and the individual layers in the visibleLayers. This sample is only set up for an ArcGISDynamicMapServiceLayer, but you could tweak it for FeatureLayers and if you're bold add support for custom renderers. I try to avoid this when I can as I always seem to muck something up, but it can be done. Good luck. I remember this being a lot harder a long time ago when I did this in Flex, as I don't think the REST API had a Legend endpoint back then, so this is actually easier than it would have been. I just wanted to give you a decent overview of how you can go about accessing the legend endpoint of a map service to pull all the data you need to make your own ToC widget. Maybe this will help you troubleshoot issues you have using other ToC widgets. It's a good exercise in learning to display data in the DOM and sometimes, you may just need a ToC... maybe. The full source code for this sample can be found here. Be sure to check out my blog for more geodev tips and tricks! ... View more

Oh the mighty OverviewMap. This is a classic Dijit in the ArcGIS API for JavaScript. I'm a little torn on the usefulness of an OverviewMap. On one hand, I never include it an app by default and 95% of the time, no one ever asks for it. But, there is always that 5%. I personally don't think it adds much to a map application, it sort of falls into the same category as keeping a zoom history. It's a carry-over from early days that at I think at some point all Esri devs just kind of decided to quietly let die. You do what you have to do Every now and then though, a valid use case comes up. For example, let's say you are managing a fleet of vehicles and you want to focus on a particular neighborhood in your application, but you'd still like to have an overview of the vehicles somehow. In this case, an OverviewMap could do just fine. So you try it only to realize you can't add layers to the OverviewMap. If you look at the docs, this widget is so old it doesn't even dispatch any events to hook into. Sure you can change the basemap, but not much else. But you're a developer, you're not going to let a silly thing like documentation dictate what you can do! Embrace the aspect There's a module in Dojo called dojo/aspect. The aspect module is similar to dojo/_base/connect (don't use this module anymore), but better. The aspect module can listen for methods that occur on an object and do something when they occur. Let that sink in for a second. It's like a catch-all tool to hack away with code you didn't write. Don't abuse it too much, but it can prove very useful at times. After some poking around, I was able to find that the OverviewMap has a method called _activate that occurs when the map object of the OverviewMap is ready and is assigned to a (undocumented) property called overviewMap (thanks Yann Cabon). You can wait for this method to occur and interact with the overviewMap as you would with any map. Go nuts So how would you do this? Here is some sample code where you can use a different basemap and add some census data to the OverviewMap. var fl = new FeatureLayer(blockPointsUrl); var baseLayer = new ArcGISTiledMapServiceLayer(basemapUrl); var overviewMapDijit = new OverviewMap({   map: map,   baseLayer: baseLayer,   visible: true }); var h = aspect.after(overviewMapDijit, '_activate', function() {   h.remove();   overviewMapDijit.overviewMap.addLayer(fl); }); overviewMapDijit.startup(); So you basically need to wait for the _activate method of the OverviewMap to occur and at that point the overviewMap property of the widget will be ready for you to interact with and you can add other layers to it. Here is a JSBIN demo of this in action. Hack your way to glory Don't let a silly thing like lack of documentation or little roadblocks like not having events to listen for stop you from hacking away at modules in the ArcGIS API for JavaScript. I'm not saying rip it apart, but you can totally work within the confines of the framework while you extend some functionality. Have fun with it and experiment. For more geodev tips and tricks, check out my blog! ... View more