7 ms·

New OpenStreetMap tiles from Stamen: water color, black and white, terrain

247 points by drewda 15y ago

Northsider 15y ago
Great to see OSM projects advancing more and more each day. I love the style of the Toner profile...minimalist and simple. As someone in the digital mapping industry, I really wish we'd open our data up a bit more.
- guan 15y ago
  I also love the high contrast look of Toner. Way too many OSM styles, and non-Google maps in general, have too little contrast.
drewda 15y ago
See also: http://mapbox.com/blog/mapbox-light-global-base-map-alternative/ http://mapbox.com/blog/mapbox-light-global-base-map-alternat...
Androsynth 15y ago
In another case where users have been trained by google product methodologies: I just got pissed because scrolling my mouse wheel doesn't zoom.
- yellowbkpk 15y ago
  The map framework they are using supports mouse wheel zoom but i think they chose not to use it so you could use your scroll wheel to scroll the page.
  - robin_reala 15y ago
    I do that quite often when embedding maps. It’s a toss up between the UI help of scrolling, and the interruption of normal page scroll.
kevincennis 15y ago
getting a 500 on all the image requests
- untog 15y ago
  Yeah, it's definitely buckling under the strain right now. Mine did something similar when I posted a map tile styling tutorial.
lucianof 15y ago
When I first looked at OpenStreetMap a couple years ago I dismissed it solely because I didn't like the tile design. But now I see more and more really beautiful designs popping up (e.g. also those from http://mapbox.com/ http://mapbox.com/) and I expect OSM to gain a lot of importance in the next years (overtaking Google Maps maybe?). These 3rd-party tile designs a beautiful example of how much more can be done with data that's truly open! The one thing I don't understand is who pays for hosting it. Once everyone uses OSM, won't it be prohibitively expensive for a non-profit to serve it? Maybe I'm wrong and it's not that much of an issue. Does anyone have an idea how much it costs Google to serve the Google Maps API? Wikipedia is in the same situation, and they solve it with their donation pleas. Maybe it would make sense if a fraction of our ISP bill automatically goes to the most visited non-profit websites. They offer kind of a public good to everyone, after all.
- untog 15y ago
  Once everyone uses OSM, won't it be prohibitively expensive for a non-profit to serve it? Yes. The problem is that Google has started charging now as well- at least, once you hit a certain threshold. They might have a deal available for non-profits, I'm not sure. It's certainly something I'd hope MapBox are working on, because non-profit mapping seems like a large (and worthwhile area). No doubt, the bandwidth costs are expensive, though. I made my own custom map tiles (you can see a demo of them in use at http://www.taxono.my http://www.taxono.my) and put them behind an Amazon CloudFront server, which makes it about as cheap as possible. But still, if my traffic gets huge, it could be an issue.
  - slig 15y ago
    > (...) which makes it about as cheap as possible. Have you tried Cloudflare?
- wmf 15y ago
  Once everyone uses OSM, won't it be prohibitively expensive for a non-profit to serve it? Wikipedia says no, but that may be an outlier. IMO they should start internalizing costs (especially for embedded maps) now before they get out of control, perhaps by throttling access so that high-volume users are encouraged to mirror and serve the data themselves. Coral CDN has a similar strategy: you can use it for free, but only a certain amount.
waterlesscloud 15y ago
Good to see a CC license use the "commercial" option. I wish more did.
kubrickslair 15y ago
Loved the watercolor tile. And a plea to HN folks: I am working on a project, and it will be great if someone can point me to a way to dynamically apply such a filter to vector derived solid color images. I am thinking of running a GIMP server, but I find the plugins available limiting. I have very limited image processing experience, and this was not a major part of the product, so had put it on the backburner. I will have access to the edges/ vector images, so there is no need for accurate edge detection- but such organic edges would add a lot if there is a way to do it.
- scq 15y ago
  I think this is how they are doing it: 1. Smooth the vector shapes (I'm not sure exactly how they're doing this. A blur and cutoff perhaps?) 2. Use the smoothed shapes as a mask over repeating colored watercolor textures. 3. Composite the various layers They also seem to be applying a shadow underneath land masses.
  - kubrickslair 15y ago
    Thanks! I did not think of smoothing the vector shapes, that partially explains how it blends so well. The other thing is the edges of the shape- they are darker and blend in the lighter body of the fill. I guess that works by inverting the shapes, blurring, and using that as a mask for a different more intense blend. And in both cases, I see there is some cool randomness going on. I see how I may be able to handle it for the latter- through a texture etc., but not sure how to handle the randomness in shape creation. Also, it would be great if someone can suggest a good library to implement this. I am currently using Processing to render the image, but it may not be the best way for these set of procedures. The other image processing libraries I found were not high level enough. PS: I have a hunch that their textures are not monochromatic. They seem multicolored and they are probably varying the hues of a colored texture to manage different shades.
- forgottenpaswrd 15y ago
  The most important thing in watercolors is the texture of the paper. They use a texture for sea, another for land, and so on. If you look at the see you will see how the sea and land repeats itself. You will need to make a seamless texture that you can repeat ad infinitum. Those are made with filters on photoshop or GIMP, or you could crreate them using fractals(very difficult for it to feel like a realistic watercolor, that is the reason they did not used them). I don't like GIMP for that, plugins had a very confusing syntax, I prefer ImageMagick or better I use my own programs. Using Photoshop you can do it "with your hand"(selecting a vector shape, grow it with border transition, apply texture, and repeat), record and then use the macro for all your vectors. I would use an OpenCL or CUDA program, faster and way more control.
noduerme 15y ago
Really, gorgeous work. The "Toner" version is really well done and incredibly useful for anybody who needs to laser print / xerox a ton of maps. I can tell the server's choking right now so I'm going to stop playing with it, but I wanted to say the design choices here are truly excellent in balancing level of detail with readability. Great job.
- sad_panda 15y ago
  Really? In that tileset, bodies of water are like toner cartridge death. I bet my printouts will start looking banded and faded after a few dozen pages of it.
  - 178 15y ago
    Granted, there could be a "mostly water" version of the toner tiles, but most people are printing out the tiles of the land. But anyhow, if a little black kills your cartridge you should get a new printer.
- thingie 15y ago
  Well, it has few bugs. Or, perhaps, it wasn't meant to be used outside of the US. Compare this: http://maps.stamen.com/toner/#17/49.19512/16.60929 http://maps.stamen.com/toner/#17/49.19512/16.60929 http://osm.org/go/0Jv1v7aY4- http://osm.org/go/0Jv1v7aY4- (I guess I could just fork it and try to fix it, but I'm not sure how. I wish there was a tileset that wouldn't give so much prominence to the roads, but rather to the aspects that matter in the city. Important buildings and landmarks, foot-only pathways, public transit lines. Freeway is just an obstacle.)
ChrisNorstrom 15y ago
I. Want. That. Watercolor Filter. It is beautiful and warm, and makes me happy. How can I get it, how can I use it? I checked the site and their blog but can't find anything about it.
- tmcw 15y ago
  Original paper is here: http://otherthings.com/uw/watercolor/ http://otherthings.com/uw/watercolor/ (though I think some crappy academia links are broken)
twelvechairs 15y ago
Love to see creative renderings of maps, especially OSM data! The texture of the 'watercolour' option is very impressive, but (to be critical) I wonder about the usefulness of it without labels and with the fuzziness of roads (some stop then start again, some meld into others which actually don't meet). I love the toner option though :) Fantastic! And the terrain map is great too. Certaintly easier to get a grip on than the OSM cyclemap (contour lines).
sad_panda 15y ago
The watercolor tile set is beautiful.
kitsune_ 15y ago
I wish there were tiles similar to swiss cartographer Eduard Imhof's shaded relief maps. In my opinion, this is slowly but surely becoming a lost art form: http://www.library.ethz.ch/exhibit/imhof/imhof3.html http://www.library.ethz.ch/exhibit/imhof/imhof3.html, http://www.library.ethz.ch/exhibit/imhof/imhof8_e.html http://www.library.ethz.ch/exhibit/imhof/imhof8_e.html
- ZeroGravitas 15y ago
  There are already tiles like this, including the ones at this link. It seems like Imhof was part of the inspiration for creating them: http://mike.teczno.com/notes/osm-us-terrain-layer.html http://mike.teczno.com/notes/osm-us-terrain-layer.html http://mike.teczno.com/notes/osm-us-terrain-layer/foreground.html http://mike.teczno.com/notes/osm-us-terrain-layer/foreground... Though those are US only, similar tech is available for worldwide maps. Compare: http://www.library.ethz.ch/exhibit/imhof/images/d1.1.jpg http://www.library.ethz.ch/exhibit/imhof/images/d1.1.jpg http://hikebikemap.de/?zoom=9&lat=46.58402&lon=7.94684&layers=00B00TFFFF http://hikebikemap.de/?zoom=9&lat=46.58402&lon=7.946... http://hikebikemap.de/?zoom=9&lat=46.58402&lon=7.94684&layers=B0000TFFFF http://hikebikemap.de/?zoom=9&lat=46.58402&lon=7.946... The primary differences are choice of colorscheme and the fact that the OSM examples are targetted at screen DPI and the paper map was probably intended to be wall mounted. That's not a limitation of OSM, you can target different resolutions and print to large paper too, it's just not as common. Here's an example: http://wiki.openstreetmap.org/wiki/File:3274048625_815c60625e.jpg http://wiki.openstreetmap.org/wiki/File:3274048625_815c60625...
micheljansen 15y ago
Although the Watercolor design is the most beautiful, I'll probably end up using the Toner tiles the most. They are perfect for paper prototypes and mockups!
cicloid 15y ago
Does anybody remember the 8 bit mapping project? Having the source styles for that style would be awesome. But maybe seeing the source for these I could get some ideas.

247 points by drewda 15y ago

Great to see OSM projects advancing more and more each day. I love the style of the Toner profile...minimalist and simple. As someone in the digital mapping industry, I really wish we'd open our data up a bit more.

guan 15y ago
I also love the high contrast look of Toner. Way too many OSM styles, and non-Google maps in general, have too little contrast.

drewda 15y ago

See also: http://mapbox.com/blog/mapbox-light-global-base-map-alternative/ http://mapbox.com/blog/mapbox-light-global-base-map-alternat...

Androsynth 15y ago

In another case where users have been trained by google product methodologies: I just got pissed because scrolling my mouse wheel doesn't zoom.

yellowbkpk 15y ago
The map framework they are using supports mouse wheel zoom but i think they chose not to use it so you could use your scroll wheel to scroll the page.
- robin_reala 15y ago
  I do that quite often when embedding maps. It’s a toss up between the UI help of scrolling, and the interruption of normal page scroll.

kevincennis 15y ago

getting a 500 on all the image requests

untog 15y ago
Yeah, it's definitely buckling under the strain right now. Mine did something similar when I posted a map tile styling tutorial.

lucianof 15y ago

When I first looked at OpenStreetMap a couple years ago I dismissed it solely because I didn't like the tile design. But now I see more and more really beautiful designs popping up (e.g. also those from http://mapbox.com/ http://mapbox.com/) and I expect OSM to gain a lot of importance in the next years (overtaking Google Maps maybe?). These 3rd-party tile designs a beautiful example of how much more can be done with data that's truly open! The one thing I don't understand is who pays for hosting it. Once everyone uses OSM, won't it be prohibitively expensive for a non-profit to serve it? Maybe I'm wrong and it's not that much of an issue. Does anyone have an idea how much it costs Google to serve the Google Maps API? Wikipedia is in the same situation, and they solve it with their donation pleas. Maybe it would make sense if a fraction of our ISP bill automatically goes to the most visited non-profit websites. They offer kind of a public good to everyone, after all.

untog 15y ago
Once everyone uses OSM, won't it be prohibitively expensive for a non-profit to serve it? Yes. The problem is that Google has started charging now as well- at least, once you hit a certain threshold. They might have a deal available for non-profits, I'm not sure. It's certainly something I'd hope MapBox are working on, because non-profit mapping seems like a large (and worthwhile area). No doubt, the bandwidth costs are expensive, though. I made my own custom map tiles (you can see a demo of them in use at http://www.taxono.my http://www.taxono.my) and put them behind an Amazon CloudFront server, which makes it about as cheap as possible. But still, if my traffic gets huge, it could be an issue.
- slig 15y ago
  > (...) which makes it about as cheap as possible. Have you tried Cloudflare?
wmf 15y ago
Once everyone uses OSM, won't it be prohibitively expensive for a non-profit to serve it? Wikipedia says no, but that may be an outlier. IMO they should start internalizing costs (especially for embedded maps) now before they get out of control, perhaps by throttling access so that high-volume users are encouraged to mirror and serve the data themselves. Coral CDN has a similar strategy: you can use it for free, but only a certain amount.

waterlesscloud 15y ago

Good to see a CC license use the "commercial" option. I wish more did.

kubrickslair 15y ago

Loved the watercolor tile. And a plea to HN folks: I am working on a project, and it will be great if someone can point me to a way to dynamically apply such a filter to vector derived solid color images. I am thinking of running a GIMP server, but I find the plugins available limiting. I have very limited image processing experience, and this was not a major part of the product, so had put it on the backburner. I will have access to the edges/ vector images, so there is no need for accurate edge detection- but such organic edges would add a lot if there is a way to do it.

scq 15y ago
I think this is how they are doing it: 1. Smooth the vector shapes (I'm not sure exactly how they're doing this. A blur and cutoff perhaps?) 2. Use the smoothed shapes as a mask over repeating colored watercolor textures. 3. Composite the various layers They also seem to be applying a shadow underneath land masses.
- kubrickslair 15y ago
  Thanks! I did not think of smoothing the vector shapes, that partially explains how it blends so well. The other thing is the edges of the shape- they are darker and blend in the lighter body of the fill. I guess that works by inverting the shapes, blurring, and using that as a mask for a different more intense blend. And in both cases, I see there is some cool randomness going on. I see how I may be able to handle it for the latter- through a texture etc., but not sure how to handle the randomness in shape creation. Also, it would be great if someone can suggest a good library to implement this. I am currently using Processing to render the image, but it may not be the best way for these set of procedures. The other image processing libraries I found were not high level enough. PS: I have a hunch that their textures are not monochromatic. They seem multicolored and they are probably varying the hues of a colored texture to manage different shades.
forgottenpaswrd 15y ago
The most important thing in watercolors is the texture of the paper. They use a texture for sea, another for land, and so on. If you look at the see you will see how the sea and land repeats itself. You will need to make a seamless texture that you can repeat ad infinitum. Those are made with filters on photoshop or GIMP, or you could crreate them using fractals(very difficult for it to feel like a realistic watercolor, that is the reason they did not used them). I don't like GIMP for that, plugins had a very confusing syntax, I prefer ImageMagick or better I use my own programs. Using Photoshop you can do it "with your hand"(selecting a vector shape, grow it with border transition, apply texture, and repeat), record and then use the macro for all your vectors. I would use an OpenCL or CUDA program, faster and way more control.

noduerme 15y ago

Really, gorgeous work. The "Toner" version is really well done and incredibly useful for anybody who needs to laser print / xerox a ton of maps. I can tell the server's choking right now so I'm going to stop playing with it, but I wanted to say the design choices here are truly excellent in balancing level of detail with readability. Great job.

sad_panda 15y ago
Really? In that tileset, bodies of water are like toner cartridge death. I bet my printouts will start looking banded and faded after a few dozen pages of it.
- 178 15y ago
  Granted, there could be a "mostly water" version of the toner tiles, but most people are printing out the tiles of the land. But anyhow, if a little black kills your cartridge you should get a new printer.
thingie 15y ago
Well, it has few bugs. Or, perhaps, it wasn't meant to be used outside of the US. Compare this: http://maps.stamen.com/toner/#17/49.19512/16.60929 http://maps.stamen.com/toner/#17/49.19512/16.60929 http://osm.org/go/0Jv1v7aY4- http://osm.org/go/0Jv1v7aY4- (I guess I could just fork it and try to fix it, but I'm not sure how. I wish there was a tileset that wouldn't give so much prominence to the roads, but rather to the aspects that matter in the city. Important buildings and landmarks, foot-only pathways, public transit lines. Freeway is just an obstacle.)

ChrisNorstrom 15y ago

I. Want. That. Watercolor Filter. It is beautiful and warm, and makes me happy. How can I get it, how can I use it? I checked the site and their blog but can't find anything about it.

tmcw 15y ago
Original paper is here: http://otherthings.com/uw/watercolor/ http://otherthings.com/uw/watercolor/ (though I think some crappy academia links are broken)

twelvechairs 15y ago

Love to see creative renderings of maps, especially OSM data! The texture of the 'watercolour' option is very impressive, but (to be critical) I wonder about the usefulness of it without labels and with the fuzziness of roads (some stop then start again, some meld into others which actually don't meet). I love the toner option though :) Fantastic! And the terrain map is great too. Certaintly easier to get a grip on than the OSM cyclemap (contour lines).

sad_panda 15y ago

The watercolor tile set is beautiful.

kitsune_ 15y ago

I wish there were tiles similar to swiss cartographer Eduard Imhof's shaded relief maps. In my opinion, this is slowly but surely becoming a lost art form: http://www.library.ethz.ch/exhibit/imhof/imhof3.html http://www.library.ethz.ch/exhibit/imhof/imhof3.html, http://www.library.ethz.ch/exhibit/imhof/imhof8_e.html http://www.library.ethz.ch/exhibit/imhof/imhof8_e.html

ZeroGravitas 15y ago
There are already tiles like this, including the ones at this link. It seems like Imhof was part of the inspiration for creating them: http://mike.teczno.com/notes/osm-us-terrain-layer.html http://mike.teczno.com/notes/osm-us-terrain-layer.html http://mike.teczno.com/notes/osm-us-terrain-layer/foreground.html http://mike.teczno.com/notes/osm-us-terrain-layer/foreground... Though those are US only, similar tech is available for worldwide maps. Compare: http://www.library.ethz.ch/exhibit/imhof/images/d1.1.jpg http://www.library.ethz.ch/exhibit/imhof/images/d1.1.jpg http://hikebikemap.de/?zoom=9&lat=46.58402&lon=7.94684&layers=00B00TFFFF http://hikebikemap.de/?zoom=9&lat=46.58402&lon=7.946... http://hikebikemap.de/?zoom=9&lat=46.58402&lon=7.94684&layers=B0000TFFFF http://hikebikemap.de/?zoom=9&lat=46.58402&lon=7.946... The primary differences are choice of colorscheme and the fact that the OSM examples are targetted at screen DPI and the paper map was probably intended to be wall mounted. That's not a limitation of OSM, you can target different resolutions and print to large paper too, it's just not as common. Here's an example: http://wiki.openstreetmap.org/wiki/File:3274048625_815c60625e.jpg http://wiki.openstreetmap.org/wiki/File:3274048625_815c60625...

micheljansen 15y ago

Although the Watercolor design is the most beautiful, I'll probably end up using the Toner tiles the most. They are perfect for paper prototypes and mockups!

cicloid 15y ago

Does anybody remember the 8 bit mapping project? Having the source styles for that style would be awesome. But maybe seeing the source for these I could get some ideas.