D3 Examples - Interacting With Image Maps Example

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8 />
  <title>pixelToLocation</title>
  <script
    src='https://api.tiles.mapbox.com/mapbox.js/v0.6.3/mapbox.js'></script>
  <link
    href='https://api.tiles.mapbox.com/mapbox.js/v0.6.3/mapbox.css'
    rel='stylesheet' />
  <style>
    body { margin:0; padding:0; font:normal 14px/20px 'Georgia', serif; }
    #map { position:absolute; top:0; left:0; bottom:25px; right:0; }
    #places {
        position:absolute;
        left:0;
        bottom:0; 
        right:0;
        height:24px;
        border-top:1px solid #000;
    }
    #places a { margin:0 10px; }
  </style>
</head>
<body>
  <div id='map'></div>
  <div id='places'>
      <a href='#' data-pixel='1800,1715'>Albert Memorial</a>
      <a href='#' data-pixel='2429,675'>Royal Botanic Gardens</a>
      <a href='#' data-pixel='1431,562'>Paddington Recreational Ground</a>
      <a href='#' data-pixel='3855,1233'>St Paul's Cathedral</a>
  </div>
  <script>
      // normalize x/y values to their ratio to the full image size,
      // so they can work at multiple scales
      function pixelToCoordinate(w, h) {
        return function(x, y) {
          // here's the only real tricky part
          // of the code: if the image doesn't fill
          // the whole canvas, that means that it's
          // nudged either down or to the left
          // to be centered. The size of this nudge
          // is equal to the difference between
          // the width and height over two.
​
          if (w > h) y += (w - h) / 2;
          if (w < h) x += (h - w) / 2;
​
          return new MM.Coordinate(
            // row
            y / Math.max(w, h),
            // column
            x / Math.max(w, h),
            // zoom
            0
          );
        };
      }
      function pixelToLocation(w, h, map) {
        var toCoordinate = pixelToCoordinate(w, h);
        return function(x, y) {
          // map.coordinateLocation takes a coordinate
          // value and returns a geographical
          // location value.
          return map.coordinateLocation(toCoordinate(x, y));
        };
      }
      mapbox.auto('map', 'tmcw.geographica', function(m) {
          var pxl = pixelToLocation(5000, 3292, m);
          m.zoom(5);
          m.center(pxl(1800, 1715));
​
          var as = document.getElementsByTagName('a');
          for (var i = 0; i < as.length; i++) {
              var px = '';
              if (px = as[i].getAttribute('data-pixel')) {
                  px = px.split(',');
                  as[i].onclick = (function(x, y) {
                      return function(e) {
                          m.center(pxl(x, y), true);
                          return false;
                      };
                  })(+px[0], +px[1]);
              }
          }
      });
</script>
​
    