We're sorry but this page doesn't work properly without JavaScript enabled. Please enable it to continue.
Feedback

TileMill and the Tower of Prince Henry, Reversed

00:00

Formal Metadata

Title
TileMill and the Tower of Prince Henry, Reversed
Title of Series
Number of Parts
188
Author
License
CC Attribution 3.0 Germany:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor.
Identifiers
Publisher
Release Date
Language
Producer
Production Year2014
Production PlacePortland, Oregon, United States of America

Content Metadata

Subject Area
Genre
Abstract
Programs that generate map tiles default to generating tiles for abounding box whose dimensions are fixed up and down the zoom stack. Butthe overarchingly common use case calls this default behavior intoquestion. If the ultimate goal of a map is to lock down the display of afeature at a high zoom level, then any tile outside of the invertedpyramid whose truncated top bounds the feature at the desired zoom levelis extraneous, unnecessary.Inspired by a game of marbles that uses a similar shape in its playing,I call this truncated, inverted pyramid the "Tower of Prince Henry,Reversed"[1], and abbreviate it TOPHR.This presentation describes modifications to TileMill, the same strategyimplemented directly through Mapnik XML, the use of the flexible mbtileformat to store the generated tiles, and presents several measures ofthe resulting savings (tile generation time, number of tiles, diskspace). I'll also describe a plug in for Leaflet and an approach forOpenLayers that ensures that map users cannot stray outside the boundsof TOPHR.1. It's also reminiscent of the name of a real album by The Fall or an unreal tarot card.
Keywords
Different (Kate Ryan album)ResultantQuicksortArithmetic progressionMultiplication signBitRight angleVideo gameArmVelocityWater vaporBasis <Mathematik>Lecture/Conference
Multiplication signExecution unitZoom lensLevel (video gaming)SpacetimeBitFrame problemRepresentation (politics)Perspective (visual)MereologyStreaming mediaVelocityTouchscreenMoment (mathematics)QuicksortMetropolitan area networkThree-dimensional space
Artistic renderingRevision controlZoom lensMultiplication signSeries (mathematics)TesselationLevel (video gaming)CASE <Informatik>Amsterdam Ordnance DatumStandard deviationObject (grammar)Computer animation
Moment (mathematics)Level (video gaming)SurfaceTrailRepresentation (politics)TesselationSubject indexingParameter (computer programming)Game theoryQuantileMaxima and minimaPoint (geometry)PRINCE2Library (computing)Process modelingWind tunnelSpywareSpacetimeQuantum stateAreaProjective planeMereologyFront and back endsQuicksortRight angleInformationMultiplication signClient (computing)MiniDiscVirtual machineCycle (graph theory)Neighbourhood (graph theory)Data storage deviceSet (mathematics)Context awarenessLine (geometry)Focus (optics)Data structureMassElectric generatorBitCartesian coordinate systemZoom lensInstance (computer science)Computer configurationCASE <Informatik>NumberPatch (Unix)Different (Kate Ryan album)Web 2.0Sheaf (mathematics)Service (economics)Revision controlCuboidoutputFrequencyTowerWordSoftware developerArithmetic meanFile formatTotal S.A.Symbol tableStandard deviationGreatest elementBound stateScaling (geometry)Latent heatRectanglePointer (computer programming)Square numberOffice suiteLogical constantQuadrilateralPresentation of a groupTessellationBoom (sailing)Block (periodic table)Forcing (mathematics)DebuggerView (database)Similarity (geometry)Open setMedical imaging
Transcript: English(auto-generated)
Okay, hi. I'm Eric Thiess. Thank you all for coming. This is a lot of people. The work I'm talking about is work that's in progress. I had both a four-hour workshop at the beginning of the week as well as this thing today, and given that people paid extra for the workshop, I put a lot of time into getting ready for the workshop.
Okay. Does this come up or is this – do I just need to bend over? Okay. I'll bend over. I can lean. I can slouch. Yeah, I was just basically saying a lot of the effort leading up to this conference went into the workshop and not so much for this. So this is kind of incomplete results, but I think you'll find it interesting, and I'm also curious
if any of you have already done some of this kind of work. So let's talk about – you still can't hear me? Oh, yeah. I can be a – yeah. Right. Oh, no. Okay.
So, yeah, let's rock on. Okay. So what are we – why don't I start – I'm not going to tell you what the title means until the end. I will tell you that last year, and even continuing, I have a background in experimental film, and I have this ongoing
interest in how some of the perceptual tropes that were used by experimental filmmakers in the 70s and 80s can be applied to cartography with different results. So I gave a couple talks about that last year, and that kind of motivated what I'm going to talk about
today, which is a little bit less interesting, but probably a lot more practical, so that's kind of useful. There was a film made in 1970 by a filmmaker named Ernie Gere, was based in New York, eventually lived in San Francisco for a while, and is now – continues to work out of Brooklyn. He's in his 70s now, but he's in sort of a really productive
time of his life. And he made this film called Serene Velocity. And Serene Velocity, basically, this was the star of Serene Velocity. It is an institutional hallway at, I think, SUNY Binghamton, maybe. And what the film does over the course of 20 minutes is it
zooms in a little bit and it zooms out a little bit, and it zooms in a little bit and it zooms out a little bit. And these are fixed zooms. You don't actually see the zoom in. You just see you're here and you're here. Four frames here, four frames there, four frames here, four frames there. A little boring, and then it goes a little bit further. And then it goes a little bit further. It's an experimental film, dude. What do you want, you know? This is what people did in the 60s and 70s. And what's interesting
about it, I mean, it's one of those, you know, it's the kind of film where it comes on and people get restless, and like a third of the audience leaves, and then everybody else has a really sublime time. So what's interesting about it is that because of the
shallow zooming at the very beginning, you get a feel, you get a sense that you're traveling in this space back and forth. But as the zooms get longer, the space sort of flattens out and the perspective of this just recedes into kind of an X. And you end up just animating these various parts in the frame. So there's like an ashtray
in the hallway, and there's an X. You know, all these things kind of start to bounce around the screen in a way that is not what you associate with depth. This is just a couple of frames. Well, it's really dark. It kind of shows. I mean, by the end of the film, you're bouncing from one end to the other. And in an interview
at the time, Gar was talking about a lot of the same things I just said, you know, that it's this sort of animation and this tension between what's obviously a three-dimensional space and a 2D representation and 2D experience of that space. So I was interested in making a map that was like serene velocity, so I will show you that in a second.
I'll also show you this, which is from a different film of the same era called The Flicker, which basically says you might have an epileptic seizure looking at this film. And this film is just black and white frames, and it's really kind of painful to watch, although it also has its glory moments. But I never really thought
of serene velocity that way, and when I showed an excerpt of it at NASIS, somebody in the audience came up to me and said, you know, that gave me a headache, man. You shouldn't have done that. You should never show that again. It's like, so if you have motion sickness or something, don't look at what I'm going to do next.
So this is OpenStreetMap data based in Washington, D.C. This is not a 20-minute map. This is a much abbreviated version. But anyway, it kind of uses the same approach. So it's just it's just using leaflet in a very standard way with tiles. And eventually the zooms start getting more severe and you get the idea. It was it was the first one of these things I did. I've done a series of either, you know,
tributes to films or using approaches by these experimental filmmakers to do something cartographic. And, you know, as is often the case doing this, I was in a hurry and I spent a fair amount of time tiling this, I mean, styling it. And then I wanted to generate my tiles. So I just set up time mill and ran it.
And because of the zooms here go from zoom level 12 to 21. Basically, the rendering was overnight. I would turn it on before I went to bed because it would run for like three or four, maybe six hours. I don't really know what it was. And I don't. Yeah, so I would do that in the morning. Hopefully it would work usually where it did work.
Tom does a great product. That's work. And I would have my tiles. But in the course of doing this. It's almost over. It is it is over in the course of doing this. I realize what a waste it was for my project and also probably for other projects, too.
I mean, if you just blindly go ahead and render tiles this way, you know what you'll find as you get into the zoom levels, you'll go from having, you know, 20 tiles to 48. I mean, this is our pyramid structure. By the time we get to the last thing, you know, the thing will automatically render like three million tiles.
I'm sorry. Twenty five hundred, two and a half million tiles at the highest level, which you don't need for a project like this. And in fact, yeah, so I mean, the idea is, you know, you're wasting time, you're wasting disk space, you're wasting machine cycles. And you really don't need all that sort of stuff.
And you could do it by hand. But what I what I was interested in finding out is how to do this as an as an option within tile to just render the tiles. You need to represent something within the viewport. So if you look at your developer tools, you know, you'll see that here I'm using 15 of 15 tiles to fill the viewport. And I could imagine maybe I need 20.
So like the whole thing I really need for this project would just be 20, 200 tiles, or maybe 27 megs worth of disk space. And as I thought about this more, it's like, well, this actually makes more sense for projects besides just mine.
I mean, in a lot of cases, you know, I mean, you look at it from two different ways. If you're if you're Mapbox or if you're Google, you know, and you need to provide generic tiles for the whole world for all levels, of course, you don't care about these issues, because you need to be able to deliver a zoom level at any particular place on the globe.
But for someone who's just saying like, my party is going to be here at my house, or is where my office is, or this is how you get to our store, or the concert is going to be at this venue. You know, you don't really need to render your entire city, or the entire state or the entire continent or whatever. You really need something that at a high level shows context. And then as you zoom in focuses on the place you want.
So it seems like a very, you know, standard use case. And if you're styling your own tiles, delivering your own tiles, and as we're as we've moved into playing by map views, you really don't want people to drift off from the story you're trying to tell in your map, right? You don't want, like somebody looks to see where the party is,
and they're like, where's my friend's house in relationship to that? And how would I get to the grocery store? Because, you know, in a pricing by map view model, you're paying to store those tiles that don't really tell your story, and you're paying to deliver those tiles that don't tell your story, and somebody might even hijack your tiles and use them for something else. So, does this scenario make sense to people?
Do people have people, has anybody else thought about this, and has anybody else done anything about this? This is the question. Because sometimes, you know, you search and you're like, well, maybe I'm using the wrong words, or maybe I'm not talking to the right people, and this is like, everybody knows how to do this except me.
Okay, so, pyramids. Yeah, I mean, you know, it comes down to pyramids, tile pyramids, and this is what we usually think of when we think of tile pyramids, which is, at least the representation you usually see, and even this one is a little bit fudged, but you know, you start off with the whole world on one tile, and then you go to four tiles to represent the whole world, and then 16, you keep quadrupling as you go.
I mean, this one, I'm not sure which level this one is, but it's, I guess it is the next one. And even here, whoever's done this representation, these folks have shrunk these tiles somewhat. But it is kind of interesting to hold the tile size constant and go down and just see how enormous that gets for a few more levels.
And this is not really the situation. This is a situation I'm trying to avoid, right? In some sense, I'm doing the opposite of this. I'm starting with something high, and I actually am trying to focus down to a very specific place by the time I get to a higher zoom level. So, drawings that I did not get done for today,
but that I'm working on just to help me think about this, are pyramids where you would hold the geographic area constant. So again, think of the place on the ground that you're trying to represent, and then show the tiles going up from that. It's no longer a pyramid. It's tiles that shrink to become almost too small to see.
And then the thing that's really my issue, which is to hold the viewpoint constant, which is where the geographic area expands as the zoom level gets higher. So, that's what I'm heading for.
Yeah. Okay. So, I'm going to switch subjects a little bit. I was in a thrift store. I needed to buy a wedding present. Is that what it was? No, I needed to buy... Yeah, I think I needed to... I don't know. I needed to buy a present for something. It wasn't a wedding present, actually. I would do better than this for a wedding present. But in a thrift store, I found this book, and I thought, well, this is unusual. I like encyclopedic, but, you know,
like a book called Salt is fascinating to me. Like, it's just one subject, and let's just learn everything there is to know about it. And lo and behold, in this book, I found this obscure marble game called Prince Henry, where you actually built this tower that's kind of cut off at an end, and like whatever kids played this in the 70s,
they tried to bounce a marble in there. But this is actually what I'm trying to build, is one of these things, except upside down. So instead of a tile, instead of fighting the baggage that comes with tile pyramids that doesn't do exactly what I want, I decided I would reference this marble game as the name of this approach I was going to take. So that's the Tower of Prince Henry.
Now you all know. And the patches I'm working on are twofold. For this sort of thing, you need two pieces. You need something on the back end to generate the tiles you need, and not over-generate the tiles. So the first patch that is not done, but will be released when it is done, is simply just going to put a little box in here.
There? Yeah, I'm not used to looking at so large, which just basically says that you want this Tower of Prince Henry kind of thing. So for a specific zoom level in center and bounds, it'll scale up to what you need as you would zoom out and come to a point or to a square or to a rectangle at the bottom
as you zoom in, and not generate anything outside of that. What's interesting is that the MB Tiles format does handle that sort of thing. You don't have to have the same number of tiles at each zoom level for it to work. Or, of course, you could just store tiles as loose image tiles.
And then the other patch you need is on the front end or the consumer of this stuff. And the way to do this with Leaflet, at least, would be to work with set max bounds. So for each zoom level, you would have a set max bounds based on the parameters you used for your tower. And so the mapping library
would not allow you to stray beyond those bounds for any particular zoom level. And I have not looked at open layers for a while, and I'm excited about open layers three, actually. It's one of the things I'm taking home and going to look at quite hard once I get back to San Francisco. And I'm sure there's similar commands in open layer
that allow you to do the same thing, restrict yourself to a geographic region per zoom level and would keep you on track with these tiles. And then the last thing I'm going to say, it's kind of accelerated talk, is it would be interesting, I don't know how to do this, this seems harder, but to actually have like a surface,
a zoom level surface. I don't know what else to, here's another word, like what should I call this? Because the thing I've showed you really deals with one destination, a neighborhood or a retail, whatever, the thing you want people to see. But I've worked on projects where people want to show,
like here are my stores across the nation, and they have no stores anywhere from the Rocky Mountains to the Mississippi River. So you wouldn't really want people to be able to zoom in very far there, although you would like to show some context. We'd like to force them to kind of come up to a continental level and then drop down again as they get towards the Quad Cities or Chicago, wherever those stores would happen to be. Instead of having a set of,
like a simple set of max bounds, which you couldn't go beyond, if you traced over the surface of a geographic region, it would take you up or down. And also, I mean, this is really about conserving tiles and conserving space. Peter in my workshop is, I think I saw Peter here. Yeah, I was talking about some of the work he does in the state of Washington,
where, I mean, it's true of any state. For a city, you need to be able to zoom in and see things that are there. But if you're out in a very unpopulated area with very few roads, unless your needs are agricultural or parcel-based, often a general public consumer doesn't need that zoom level. So you don't need to provide those tiles.
They don't need to even go looking for them. And you can conserve all sorts of resources by doing that. So that's where this project is going. And I will have some drinks at the gala tonight and go home on Sunday and get to work on this. And you can keep an eye on my GitHub stuff
for these two little libraries that'll work. One will be a forked version of Tom Hill. The other will be, first, a library for Leaflet, and then a plug-in for OpenLayers as well. So if there's any questions or anything, I'm happy to. This is my film ending there. Thank you for coming. I hope it was interesting.
Oh, so you get this now, I guess. Is there a reason why you haven't moved towards using TileStash or something else that will generate only the tiles that are actually needed and then cache those for future use? That would be one. That's the way that, in our work, we've gotten around having to generate massive sets of tiles
for some very rural areas. But there's still the possibility somebody might go to that area and need one. If somebody does navigate to it, it would generate the tiles. But unless somebody does, then they're not going to come into play. Right. Yeah, I think this is more of a brute force.
Like, I'm just going to fence you out of that stuff. I don't know. That's not my usual disposition. But it just seemed like... Because I know I've done that. Like, you get distracted, or the maps... Like, especially if it's a pretty map. Like, if you've done a really nice style, somebody's going to go meandering around to see what other things look like. I don't know. I just don't... It just seems to me,
if you're trying to get people to a particular place, you should have the option to say, like, that's all I'm going to show you. Like, here's where I am in the city. Boom, boom, boom. This neighborhood. Boom, boom, boom. This is the block I'm on. And you can do a region, but, you know. It still kind of focuses you there, and it doesn't let you meander, and preserves, you know, conserves resources. So yes, that approach is valid.
But it's not... That's not... I've kind of put on a different hat for this one. I was just wondering, also kind of on the same lines, the fencing out. Have you tried that fencing out, or boxing the user in on the client side? So limiting...
I don't know what you're using for your client side. Like, take Leaflet, for example. And you could say, okay, when the user zooms in, they're only allowed to be within a certain bounding box. Well, that's the second part of this. So that is an automatic way of doing that per zoom level, based on the information you specify. So that is part of it.
But I'm also interested in not even generating the tiles. And I don't really want to have an... You know, I don't... Especially because of what I was doing, like, the zoom levels are crazy. And I did get a lot of tiles. And I really just would rather generate, a few hundred tiles instead of millions and billions. So I'm interested in solving the back end issue
and the front end issue as well. But yeah, you're right. I mean, we're sort of at the same place on the front end. Anybody else? Okay, great. Well, thanks so much for coming. It's great to see so many people.