Make your own globe-spanning Jack-o’-lantern

Look at this fun thing. You can carve a pumpkin on the globe! I can’t believe it.

Isn’t it fun? It is. I am fun.
Here are a few more.

If you want to be fun too, try it at stamen.github.io/pumpkin. Also what is fun is that your carving is stored in the page URL. 

If you want to share your masterpiece, or if you want to build on one of these existing Jack-o’-lanterns, notice how the drawing is encoded in the URL. So everytime you make a change, the URL will update automatically, and you can share the whole URL to anyone you like, who can see exactly what you see. These “stateful URLs” are something we do for a lot of our client projects, and it makes it easy to share complex application state without any sort of transactional backend. Pretty cool, huh?

So give it a try, and send us some of your favorite drawings by sharing them using the hashtag #earthpumpkin and tagging @stamen. And share your links so others can modify your drawing themselves. We will retweet some of our favorite entries.

If you’re curious how this works, you might notice that the carving parameter in the URL looks like a bit long string of random digits. Here, we encode GeoJSON geometry in a format called Tiny Well Known Binary or tWKB. It allows us to smoosh a lot of data into a relatively small number of characters. Take Damon and Alan’s home state of Washington – in GeoJSON, the geometry takes up over 10k characters (much too long to work as a URL):

$ cat washington.geojson | jq -c .geometry | wc -c
   10035

Using a CLI we can see that encoding it as tWKB takes up 80% less space:

$ cat washington.geojson | punkin | wc -c
    2377

That means, if you had some GeoJSON lying around, you could encode it and paste it in the URL (of course if it’s too complex it might break, this is just a fun little toy). But that’s not very exciting, we already know what GeoJSON features look like on a globe… if you want to be extra tricky, try converting any old SVG file into a GeoJSON using a tool like https://labs.mapbox.com/svg-to-geojson/. But once you have your GeoJSON, how do you encode it for the URL?

Well, if you clone the github repository, we included a handy little command-line script that will do the conversion for you.

1. First use QGIS or similar to export your GeoJSON as line-delimited geojson (myfile.geojsonl)
2. Run npm install in your cloned copy of the repository
3. cat myfile.geojsonl | node bin/cli.js
4. Copy the resulting string into your URL, like so: (example)  

Oh yeah, one more fun thing: see if you can access the map object in the developer console. Then you could do fun things like adjust the style, maybe add a texture, or add a tile layer, and then trace it for your pumpkin carving, and then hide that layer. The possibilities are endless. Have fun!