Created
April 12, 2011 16:10
-
-
Save sansumbrella/915807 to your computer and use it in GitHub Desktop.
Quick and dirty map tile-generation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| String imageName; | |
| String outputPath; | |
| boolean labelTiles = false; | |
| int tileSize = 256; | |
| PFont tileFont; | |
| PImage startImage; | |
| void setup() | |
| { | |
| size( tileSize, tileSize ); | |
| // smooth() | |
| imageName = selectInput("Choose an image to generate tiles from"); | |
| outputPath = selectFolder( "Choose a location to save the tiles" ); | |
| startImage = loadImage( imageName ); | |
| tileFont = createFont( "Arial", 12 ); | |
| textFont( tileFont ); | |
| stroke( 0 ); | |
| noFill(); | |
| saveTiles(); | |
| exit(); | |
| } | |
| void saveTiles() | |
| { | |
| int columns = startImage.width / tileSize; | |
| int rows = startImage.height / tileSize; | |
| int zoom = int( log( rows ) / log( 2 ) ); | |
| for ( int x = 0; x < columns; x++ ) | |
| { | |
| for ( int y = 0; y < rows; y++ ) | |
| { | |
| PGraphics tile = createGraphics( tileSize, tileSize, P2D ); | |
| tile.beginDraw(); | |
| tile.image( startImage.get( x * tileSize, y * tileSize, tileSize, tileSize ), 0, 0 ); | |
| // label the tile | |
| if ( labelTiles ) | |
| { | |
| tile.noStroke(); | |
| tile.fill( 0, 255, 255 ); | |
| tile.text( str(x) + ":" + str(y) + ":z" + str(zoom), 8, 24 ); | |
| } | |
| tile.endDraw(); | |
| tile.save( outputPath + "/" + str(zoom) + "/" + str(x) + "." + str(y) + ".png" ); | |
| } | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>Polymaps Learning</title> | |
| <meta name="author" content="David Wicks"/> | |
| <!-- Date: 2011-04-11 --> | |
| <!-- Get polymaps for this to work: http://polymaps.org/ --> | |
| <script type="text/javascript" src="lib/polymaps.min.js"></script> | |
| <script type="text/javascript"> | |
| function run() | |
| { | |
| var po = org.polymaps; | |
| var ck = new Date().getMilliseconds(); | |
| var map = po.map() | |
| .container(document.getElementById("map").appendChild(po.svg("svg"))) | |
| .center({lat: 40, lon: -95}) | |
| .zoomRange([1, 4]) | |
| .zoom(2) | |
| .add(po.interact()); | |
| map.add(po.image().url("tiles/{Z}/{X}.{Y}.png?ck=" + ck )); | |
| map.add(po.compass() | |
| .pan("none")); | |
| map.container().setAttribute("class", "Blues"); | |
| } | |
| </script> | |
| </head> | |
| <body onload="run();"> | |
| <h1>Some Map</h1> | |
| <div id="map"></div> | |
| </body> | |
| </html> |
Plays nicely with Polymaps.
Now we ask the user for what file to load and where to save up front.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Determines correct map zoom level from loaded image size. Also, makes tiles from a given image rather than from some made up stuff.