Add support for cyclopedia map

[s2ward]

This exists: https://github.com/elkolorado/tibialibraries/blob/master/cyclopediamap/map_merged.png

I tried using https://github.com/tibiamaps/tibia-maps-script with this https://github.com/tibiamaps/tibia-map-data/blob/main/scripts/build.sh however it raises couple hundred million assertion fails due to unrecognized colors in the cyclopedia image, resulting in no or minimal output.

Would be beautiful to be able to toggle between them, and something i was trying to develop on for a forked project but the rabbit hole went too deep for my non-existent nodejs skills.

[mathiasbynens]

Woah, that's an awesome Cyclopedia map -- nice work!

I believe you're looking for this: https://github.com/tibiamaps/tibia-maps-script/blob/main/src/colors.mjs

Context: our tibia-maps-script project is meant to deal with minimap colors rather than the colors in your image, which seem to resemble the in-game look instead. You could try to create your own mapping though by editing the values in this file.

Feel free to tell me more about what you're trying to do -- maybe I can help you better then.

[mathiasbynens]

cc @muriloricci who I believe also maintains a Cyclopedia export

[muriloricci]

I don't but that's a cool idea, indeed. :)

[s2ward]

Thanks, @elkolorado has been working on the cyclopedia map, there are scripts available here: https://github.com/elkolorado/Tibia-Satellite-Cyclopedia-Map-Export that has been used to create this map.

I was thinking if it would be easier to create images of equal size as the tibia-map-data/mapper images are as well as translating coordinates for their names.

Could maybe use this https://github.com/elkolorado/Tibia-Satellite-Cyclopedia-Map-Export/blob/main/utils/leaftlet-gen.py

And translate image names from https://github.com/elkolorado/tibialibraries/tree/master/cyclopediamap/layered

i.e.
Current cyclopedia leaflets:

map_7_0_1.png map_7_0_2.png ...

into tibiamaps leaflets:

tibia-map-data/minimap$ ls
Minimap_Color_31744_30976_7.png  Minimap_Color_32256_32000_7.png  ...

However, i'm not really sure what solution would be best, I counted more than 256 colors (might need to verify) in the cyclopedia map which might become an issue for colors.mjs, however i'm not sure how that part works.

The scripts that @elkolorado has made can be used to create updated maps as well, so might be worth looking into a solution that ties into that.

As for what I'm doing is trying to create leaflets of correct color so that i can browse this map on layer 7 (switching with same functionality as P keyboard button).
This is to explore the Magic Web a.k.a Ley Lines

I would in turn use self-hosted leaflets, unless we add support for it in tibia-map-data that's published to github pages.

[elkolorado]

hey, when I've created the script I've also raised it here tibiamaps/tibia-map-data#283, as potential to PR it into @mathiasbynens tibiamaps. I think idea of @s2ward is so he can utilize tibia coords system over the satellite map, therefore idea of adding the satelite map as separate layer to existing tibiopedia maps. It could be tricky, as satellite maps in tibia are generated per floor, where as merged result - or so to say how we see it ingame, is a result of shifting the layers of satellite map to achieve the isometric look. Therefore on example leaflet viewer I created, I only utilized separate floors, or all at once, since I failed with dynamic floor (ex. floor 7 and 5) together, and applying the offest with leaflet. Instead I just merged all floors at first with offset, and then cut them ready for leaflet.

[mathiasbynens]

I was thinking if it would be easier to create images of equal size as the tibia-map-data/mapper images are as well as translating coordinates for their names.

Could maybe use this https://github.com/elkolorado/Tibia-Satellite-Cyclopedia-Map-Export/blob/main/utils/leaftlet-gen.py

And translate image names from https://github.com/elkolorado/tibialibraries/tree/master/cyclopediamap/layered

i.e. Current cyclopedia leaflets:

map_7_0_1.png map_7_0_2.png ...

into tibiamaps leaflets:

tibia-map-data/minimap$ ls
Minimap_Color_31744_30976_7.png  Minimap_Color_32256_32000_7.png  ...

I think this can be done. Change the file name format here: https://github.com/elkolorado/Tibia-Satellite-Cyclopedia-Map-Export/blob/4848fdac05711d03e24d676713672e4fdb182379/utils/leaftlet-gen.py#L95 to use x_y_floor instead. To calculate x and y you would multiply your current values by 256 and add xMin and yMin from https://github.com/tibiamaps/tibia-map-data/blob/main/data/bounds.json.

[s2ward]

Ok, basically I got it working. Thank you so much for the pointers.

https://github.com/s2ward/magic-web

It can be seen live here https://magic-web.talesoftibia.com/#32928,31928,7:0

I explain the process here:
https://github.com/s2ward/magic-web/tree/main/cyclopedia

It's beautiful, and should be quite straight forward to automate with github workflows.

[s2ward]

To bug you once again, (however i feel it would need to be sorted for implementation if you/we decide to add the cyclopedia map to tibiamaps.io)

How should we handle zoom level between layers now that the picture is about (exactly?) twice as big?

when switching to lower or higher layers (e.g. layer 7 to layer 8) you will see that the crosshair points to a position that is one zoom level wrong.

It's as if the cyclopedia map needs to be zoomed to 128 instead of 256.

tibia-map/src/_js/map.js

Line 85 in 5c04720

return 256;

Do you have any idea on how to approach this?

If it's of any help, the cyclopedia map (map_merged.png) when chunked into 256x256 is 288 chunks .
regular minimap is 71 chunks.
Ratio=288/71​≈4.056, which means it's not perfect, 4 minimap areas is a bit smaller than the area of cyclopedia map (1.46% smaller) however, i'm getting varied results

$ ls Minimap_Color*8.png | wc -l
71
$ ls Minimap_Color*6.png | wc -l
69
and i got 80 from floor 7.  

cyclopedia:
$ ls Minimap_Color*7.png | wc -l
288

I've tried tweaking the knobs (256 -> 512 or 128) but it always results in a black screen on floor 7. Only 256 seems to be accepted @ #L85

Can we handle this in code or do we have to chunk the cyclopedia map differently?