BearPanther.com

Building a simple basemap switcher

Introduction

user

bear


LATEST POSTS

Using jsformat with Sublime Text 26th July, 2014

There are many d3 demos like this but this one is mine 08th June, 2014

Blog

Building a simple basemap switcher

Posted on .

The ArcGIS API for JavaScript includes a basemap gallery widget. So why have I titled this post “Building a simple basemap switcher”? As great as the basemap gallery widget is, I wanted something a bit lighter for my instagram app.

The idea is a well-established one:  provide a simple UI for toggling basemap layers. I chose to use streets, satellite imagery + streets and the muted, gray map. The streets option is straightforward as it’s a single service. The other two were a bit more work since they actually consist of two map services. Before I talk about how to handle that, let’s look at the markup for the UI.

<div id="basemaps_wrapper">
  <div id="streets" class="basemap">Streets</div>
  <div id="satellite" class="basemap">Satellite</div>
  <div id="gray" class="basemap selected">Gray</div>
</div>

Simple enough, one div as a container and a div for each basemap. The #gray div gets an additional class, selected, because it’s the one that is shown by default. Now the CSS:

#basemaps_wrapper {
  position: absolute;
  bottom: 10px;
  margin: 0 0 0 -120px; 
  left: 50%;
  border-top: 1px solid #ddd;
}

.basemap {
  cursor: pointer;
  display: inline-block;
  padding: 3px;
  text-align: center;
  width: 64px;
}

.selected {
  background: #ddd;
}

Next up, wire it up with some JavaScript. First, listen for clicks on the basemap divs via event delegation:

dojo.connect(dojo.byId("basemaps_wrapper"), "onclick", app.switch_basemap);

Here’s the code for the switch_basemap function:

switch_basemap: function(e) {
  var bm_name;

  // get name of the basemap to show
  bm_name = e.target.innerHTML;
  dojo.query(".selected").forEach(app.remove_selection);
  dojo.addClass(e.target, "selected");
  dojo.forEach(app.basemaps, function(bm) {
    (bm.id.split("_")[0] == bm_name) ? bm.show() : bm.hide();
  });
}

Walking through that code, the first thing it does is get the innerHTML of the node that was clicked. Because of the way the app is set up, this always corresponds to a basemap name. Next, remove the “selected” class from any node that has it and add the “selected” class to the node that was clicked. Finally, and this is where the magic happens, loop through all of the basemaps and show the services that correspond to the name of the basemap that was clicked. The ternary expression in the body of the forEach works because each basemap service was added to the map with an id that begins with either “streets”, “satellite” or “gray”, depending on the service.

That’s it! Since there’s a lot of other things going on in the instamap app, I put together a simple page that shows just the basemap switcher over on jsfiddle.

There are no comments.

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

View Comments (0) ...