Last active
April 30, 2016 20:50
-
-
Save tmcw/3388822 to your computer and use it in GitHub Desktop.
Interacting With Image Maps Example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment