Box Selector

A control that enables users to select a bounds on a map by holding the shift key and dragging on a map. It’s useful for stuff like selecting areas to render in TileMill or areas to download for offline use.

Example

<div id='map-div'></div>
<script>
var mm = com.modestmaps;
var tilejson = {
  tilejson: '1.0.0',
  scheme: 'tms',
  tiles: ['http://a.tiles.mapbox.com/mapbox/1.0.0/blue-marble-topo-bathy-jul/{z}/{x}/{y}.png']
};

var m = new mm.Map('map-div',
  new wax.mm.connector(tilejson));
wax.mm.boxselector(m, tilejson, {
  callback: function(coords) {
    $('#boxselector-text').text(
      coords.map(function(c) {
        return c.lat + ',' + c.lon;
      }).join(' - '));
  }
});
m.setCenterZoom(new mm.Location(39, -98), 2);
</script>
<div class='widget'>Selection: <span id='boxselector-text'></span></div>
</div>

API

var boxselector = wax.mm.boxselector(map, options or callback)
Create a new boxselector object. The second argument can be either an options object with a 'callback' member for a callback function, or just a callback function. Options is an object with options:
callback
A function that will be called with a single argument coords, containing the extent of a selection, as represented by an array with two elements of type com.modestmaps.Location.
blog comments powered by Disqus