This JSX script will export your illustrator file into map tiles ready to be used in leafletjs, mapbox etc.
The script loops over each zoom layer and creates a temporary artboard for each map tile, then it exports it as a PNG24.
Once saved it then deletes the artboard.
The tiles are name in the following format: {z}-{x}-{y}.png
By default the exported tiles are 256px x 256px but that is easily changed in the script.
First download the file.
If you don't want to clone the project simply click on maptilexporter.jsx and then hit the "raw" button - "right-click" - "save-as" and save it somewhere making sure it has the extension .jsx
Then you can either run it in Illustrator (File > Scripts > Other Scrit...) or copy the file to ~Applications/Illustrator(version)/Presents/(lang)/Scripts - and then restart illustrator.
- Open your file
- Run the script
- Select Zoom levels to export
- Select output folder
- Click generate!
The script makes the following assumptions:
- your file has one artboard
- the artboard is square (although this doesn't matter so much)
- the artboard is big. Seriously big. I recommend you have an artboard size of 10000x10000px if you want to zoom to level 5.
- you will select an empty folder to export the files into.
It is not recommended to run this script at lower zoom levels than 5 or 6 as this will generate a huge amount of tiles.
The number of map tiles per zoom level is exponential so this isn't ideal for generating real map tile layers but is better suited to small custom map instances.
Included in this project is a demo page with LeafletJS installed. Just copy test-page-leaflet.html straight into your export folder.
It's set to zoom to a maximum level of 4 and loads local tiles.