Galaxy map - Zoom out

Project Terran PT Bug Reports
1

When I zoom out map (or zoom in) ( in my chrome it has “ctrl -” shortcut) systems are displaced (those white croshair sights)

Funny, left side of map looks almost ok, more right you go, more distortions you get …

Zoom in - similar at first, but when you get 200% zoom in - it is ok. 250% bad again, 300% good again.

I use Chrome, windows, didn’t check other browsers.

2

Because the map is made up of 100’s of small images in an image map it wont act very well when subjected to Zooming in and out beyond a reasonable tolerance.

But you can find the Full map here Galaxy map for download

Either download and print or keep a link handy. That map as you will see is a full size map and you can zoom to your hearts content.

Coops

3

Thanks for link :smile:

But CE map works well. One pixel here or there -yes, but no such deformations. I thought that systems are treated slightly differently than rest of map (they have floating texts, which appear over them, even if they are “displaced” - so maybe rest of map id displaced? lol), hence distortion. Nevermind,
EOT for me.

4

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 :smile:
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

PROs:

  • 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 :smile:
spam mode off

5

I have noticed that it’s only an issue in Chrome. FF and IE work fine both zooming well beyond 200%.

@ Deepone - Please feel free to create a demo for us :slight_smile: We simply used the same systems we have been using in CE for about 8 years now lol.

I’m more than happy for someone to help us build a better mapping system :slight_smile:

Although I suggest a separate post in the Alpha Section for that.

Coops