Earthshaker

A simple earthquake map

by FranceImage

HTML

<script src="https://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.css">
<div id='map'></div>
<pre id='coordinates' class='ui-coordinates'></pre>

CSS

body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }

pre.ui-coordinates {
  background:rgba(0,0,0,0.5);
  position:absolute;
  bottom:10px;
  left:10px;
  padding:5px 10px;
  color:#fff;
  font-size:11px;
  line-height:18px;
  border-radius:3px;
  max-height:240px;
  overflow:auto;
  width:100px;
  }

JavaScript

var map = L.mapbox.map('map', undefined, {
        attributionControl: false,
        infoControl:true
    });

map.gridControl.options.follow = true;

// The visible tile layer
L.mapbox.tileLayer('bfab.i4nm0adm').addTo(map);

// Load interactivity data into the map with a gridLayer
var myGridLayer = L.mapbox.gridLayer('bfab.i4nm0adm').addTo(map);

// And use that interactivity to drive a control the user can see.
var myGridControl = L.mapbox.gridControl(myGridLayer).addTo(map);

// center
map.setView([45, -95], 3);

//every time the map is moved, calculate what is in the grid
map.on('move', function() {
    // Construct an empty list to fill with gridLayer elements.
    var inBounds = [],
    // Get the map bounds - the top-left and bottom-right locations.
        bounds = map.getBounds();

    // For each marker, consider whether it is currently visible by comparing
    // with the current map bounds.
    myGridLayer(function(Magnitude) {
        if (bounds.contains(Magnitude.getLatLng())) {
            inBounds.push(Magnitude.options.title);
        }
    });

    // Display a list of markers.
    document.getElementById('coordinates').innerHTML = inBounds.join('\n');
});