Yep, I’ve noticed the zooming distortions as well.
Now having a look at how the map is built, I must admit I’m both amazed and confused
Amazed because all that images slicing and table structuring must’ve been a hell of a job. Also, it’s a quite creative way to deal with that challenge. Confused as there are for sure easier ways of accomplishing it, that do not involve tables and transferring huge number of images every time.
Ah, CE map consists of divs -> zooms without issues.
spam mode on
Like always, I don’t propose anything (the map works and is obviously very low priority), but just a couple of ideas:
- transfer map data as json (either via ajax or as static js array)
- systems: x, y, name, position of name, list of stations for each etc.
- jump lanes: sysA, sysB, length, geometrical information (we want them to remain curvy, right?)
- now just build all the elements and position them on different layers.
could be something like that:
- layer0: big empty element with static, repetitive background with stars
- layer1: additional background objects (nebulas…) on top
- layer2: for each system:
— build a div, jump gate image in the background (or even cloneNode)
— add name, tooltipster
— set style.left/top=x/y, (class having position=absolute, appropriate z-index)
— attach to big container
- layer3: for each jump lane:
— curvy lines are possible with html-canvas, position it on top of big container
— calculate geometry e.g. for quadraticCurveTo()
- layer4: distance markers
- no distortions
- images needed: background tile (1x), sys icon (1x), distance bubble (1x) -> 3 images
OMG I have to build a demo just for fun
spam mode off