I've been experimenting with drawing OSM map tiles on the HTML5 canvas, the idea being to do so in some TravelMapping (http://travelmapping.net/)-related utils once I get things 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?
Side note: It should not be possible to zoom infinitely inward or infinitely outward.
Quote from: 1 on July 10, 2018, 09:52:14 PM
Side note: It should not be possible to zoom infinitely inward or infinitely outward.
True. The tiles displayed are scaled to match the scale of the roads being drawn on the canvas atop them.
Nonetheless, there's still a bug in my code where it will attempt to load tiles from negative or too-large zoom levels. Gotta limit the min & max zoom-level tiles to load. I wrote a note in my phone a week ago to remember to fix this, but never moved it to a GitHub issue where I'd be more likely to keep track of it. So thanks for the reminder. :)
Edit: Fixed. Only zoom levels from 0 to 19 are used.