This project demonstrates the use of raster tiles from a publicly reachable, unauthenticated Mapy.cz tile server.
I've built it for fun and as a detour from trying to figure out a frustrating problem with vector tiles from a different source.
I generally believe raster tiles are inferior to vector tiles, but boy, are they easier to work with!
Make double click to zoom in and out zoom so that the point stays under the cursor not in the center
https://www.w3schools.com/tags/canvas_clip.asp
Add support for rotating the map (by UI buttons as well as heading from geo loc) - use canvas transforms
without specifying size in drawImage
use https://stackoverflow.com/a/365853/2715716 to display the stroke length in km/m
Possibly combine this with refactoring the map code to a class Map with events like onTileLoad, onTileRender etc.
Refactor the map logic to a Map class with events for tile load (checker board) and tile render and provide multiple renderers:
The current canvas based one (tiles and POIs rendered on canvas) and an image based one (tiles and POIs CSS placed).
Consider making it so that the renderer may opt into loading the tiles itself so the img based on could use checker
board background image and let the img elements load the tiles.
DevTools FPS profile with programmatic pan/zoom sequence with clear cache?
Consider redrawing the whole canvas on each new tile load so that strokes and pins could be drawn once without getting clipped
As per https://wiki.openstreetmap.org/wiki/WikiProject_Czech_Republic