Slippy Map
Tim Hutt has created a canvas slippy map. A slippy map is a map that allows you to dynamically pan the map simply by grabbing and sliding the map image in any direction. For this demo, OpenStreetMap tiles are dynamically downloaded using JavaScript and drawn directly onto the canvas.
The east coast of Oz
Comments from the Author:
This is just a demo. It appears to be basically the same as normal slippy maps (e.g. google maps), however there is a lot of potential I haven’t explored. Possibilities include: smooth zooming, complicated map overlays, more shininess, etc.
Comments
Frantoio Oil
Works on Safari.
Posted on February 15, 2010
aa
Tips to the author:
Can be highly optimized.
Biggest performance isssue is redrawing all tiles when loading images.
Other performance issue is drawing a htmlImage which is at least two times slower than data from getImageData or a CanvasHTMLElement.
See processingjs.org for an implementation of loadImage.
Posted on March 1, 2010
Moophy
It works fine on Safari 4.04 PC version.
Posted on March 9, 2010
Bryan
What a great script. I got it to work in internet explorer — Well, at least the the internet explorer I have on this computer. I think it’s IE 7.
I had to do the usual
event = !event ? window.event : event
for the dragging events and for some reason, I had to make the window.onmousewheel= mouseWheel into this
window.onmousewheel = document.onmousewheel= mouseWheel
and that finally worked.
here’s a link to the script with small changes I made
http://www.pdxbusiness.com/canvas/slippymap/
Posted on March 9, 2010
Related demos