Travel Mapping

Web Design Discussion => General Web Design Discussion => Topic started by: yakra on July 04, 2018, 12:32:34 pm

Title: Help wanted: drawing map tiles on HTML5 canvas
Post by: yakra on July 04, 2018, 12:32:34 pm
I've been experimenting with drawing OSM map tiles on the HTML5 canvas, the idea being to implement it in tmg2html (http://forum.travelmapping.net/index.php?topic=2505) once I get it working.

Here's where progress is at so far:
http://yakra.teresco.org/tmtools_demos/tile/NS-tile.htm (118.8 k)
http://yakra.teresco.org/tmtools_demos/tile/RI-tile.htm (13.1 k)
The tiles do not display when viewing an area/zoom level that hasn't been viewed before. This includes when the map is first loaded.
To get the tiles to display, you need to redraw the map at an already-viewed area/zoom level. There are several ways to do this:
• Pan the map
• Zoom out & back in, or vice versa
• Click Render or NullXform, or type 'n' or 'N'
Reset the map to its initial state, via the button or typing 'r' or 'R'

No big surprises here; I'm drawing the images before they're fully loaded.
What I want to do is use image.onload. It's there in the code; just uncomment lines 126-128 & comment out line 131, and away we go. (http://yakra.teresco.org/tmtools_demos/tile/RI-tile-onload.htm)
But it doesn't work. Nothing loads. Ever. Same results if I try different, non-OSM, tilesets.
And I've gotten image.onload to work just fine on several other occasions when using code from various references/tutorials/blogs/etc. around the web.

What am I doing wrong?