odoe

Hack the OverviewMap

Blog Post created by odoe on Feb 4, 2015

overview_map.jpg

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!

Outcomes