TileMap Builder tool Python

[Nahured]

captura cesiumjs.png

"First of all, I must say that I don't know exactly how to explain this, but I want to share it with you in case someone is interested in creating a world map with zoom levels using a localhost tileServer provided by CesiumJS.

I won't explain what a tileserver is because I don't know. Still, here's a reference image. To my eyes, it zooms, that's all.

tileserver.jpg

You'll need to download CesiumJS and Node to use CesiumJS. Once both are installed, run CesiumJS using Node in the command prompt. If you're not sure how to do it, here's a .bat file that does it for you:

Create a text file with the following content:

bat

@echo off
node server.js

Save it as .bat; this will allow you to open the CesiumJS server with just a click.

Now, with that done, let's create an environment for our map.


In CesiumJS, create a folder for your project; I named mine 'fantasy.'

captura fantasia.png

Inside it, we'll need three things: Cesium.js (a file that has everything you need), and the indices (not necessary, but I copied and pasted the three files from "Cesium-1.112\Build\CesiumUnminified": cesium and the 2 indices).

Then, create a folder for your tileserver. I have mine in the 'textures' folder, where I have different tests in folders called 'worlds.'

captura mundos.png

To create the tileserver, you need the initial folder, which we'll call '0.' Inside it, create two folders named '0' and '1.' Inside each folder '0' and '1,' place the initial map images, each named '0.png.'

Now, the only thing left is the XML file; the server will have 'tilemapresource.xml' as its name."

In the XML, you will place the following

https://www.mediafire.com/file/ckyom...ource.xml/file

Alright, now you have your tile server. The next step is to create the webpage, which is already in HTML, and that's something I don't handle.

However, I'll provide what I have in HTML for 'fantasy.html' and 'fantasyGrid.html.

https://www.mediafire.com/file/xl3q7...tasy.html/file


To activate the grid, just change the HTML, the variable 'var gridActive = false' from false to true.


python script

https://www.mediafire.com/file/mohu6...dibujo.py/file

[Redrobes]

I can tell you what a tile server is because we have one on the guild here. We use Leaflet.js here (https://leafletjs.com/) to serve up our big maps. If you go here: https://www.cartographersguild.com/f...splay.php?f=91 then this is our community world building projects forum. What we do is all map a bit of a large map and piece it all back together into one giant map.

Since each map bit drawn by one member is often about 4000 pixels across then we need to serve up a whole map of about 20,000 pixels or so. On a web site like this then serving up a 20K image is a lot. So we serve it up in little bits or tiles. Because its easier to pan and zoom into a map you need tiles for each zoom level. So you have one tile which is a small version of the whole map. Then next level is 4 same sized tiles each of one quarter of the whole map space shrunk down. Then next you have a 4x4 set of them, then 8x8 set of them etc. We use 256 pixel tiles here so we have a 16K image cut into 64x64 tiles. So that is what the python program does and you name all of the tiles using a system such that when panned and zoomed the website loads up the right ones to make a set. That's what our leaflet.js does.

So have a play with this link:
https://www.cartographersguild.com/l...ype=guildworld

Anyway - thanks for sharing your steps and procedures to make that happen.

[Nahured]

Sorry, yes, I know what it is. I'm using ChatGPT to translate it into English, and I think I interpret it like this.

What I want to share is my Python script that takes 2 points from the image grid forming the tileset you want to create. It grabs only the necessary walls from the tiles on the top level and pastes them so you can draw on that image. It also saves a JSON with the information about where that image should go, so it cuts them again and saves them in the corresponding folder. If the folder doesn't exist, it creates one. So, you can go on drawing your map part by part, even using as a reference the parts you've already drawn because it considers whether a tile already exists before grabbing a parent tile.

[Redrobes]

Thanks, yeah I expect ChatGPT will get a lot lost in translation. Anyway, your python script sounds really good !