9 ms·

TileMill — an application for making beautiful maps

311 points by dhotson 15y ago

tectonic 15y ago
Gorgeous.
dangoldin 15y ago
This is awesome. Thanks for posting.
iampeter 15y ago
fantastic. guess they were faster than me :)
jashkenas 15y ago
One of the neatest hacks in TileMill is the "UTFGrid", used for associating tooltips to regions of the map ... without having to do all kinds of expensive boundary checking on the client-side. http://mapbox.com/mbtiles-spec/utfgrid/ http://mapbox.com/mbtiles-spec/utfgrid/ edit: TileMill is also a really cool example of using Backbone.js + Bones to build a Desktop app: https://github.com/mapbox/tilemill/tree/master/models https://github.com/mapbox/tilemill/tree/master/models
- canop_fr 15y ago
  Why use a grid of characters and not a grid of pixels (with indexed values that can be linked to the properties just like UTFGrid links chars to properties) ? I use this kind of pixel grid which brings those advantages, especially for very large maps : - use of the image (with carefully chosen colors) as a direct preview of the map (depending on the resolution) - efficient (bidirectional) PNG compression - use of already present image manipulation libraries for all kind of manipulation (like layers addition) What's the benefit of using UTF characters ?
  - kkaefer 15y ago
    Basically the answer to all of these questions is that it's easier to decode in the browser. A UTFGrid is just plain JSON, so we can just run it through JSON.parse(). PNG uses zlib compression, so we can get that benefit for free when sending gzip over HTTP. Here's some more design rationale: http://developmentseed.org/blog/2011/09/21/how-interactivity-works-utfgrid/ http://developmentseed.org/blog/2011/09/21/how-interactivity...
    - canop_fr 15y ago
      OK, I understand. As a side note, I send my PNG when needed in JSON (larger, with base64 encoding, I didn't try to make a comparison with ASCII art format) and I find that with getImageData getting the indexed colors is fast and easy. I was referring to bidirectional compression because PNG filter (applied before the deflate) uses the fact that pixels are often similar on both axes. Of course, without a few tests and comparisons, I can't be sure I really gain in size, but I like to use the fact that my map is an image (faster to draw on the screen at some resolutions and image manipulation server side - my zero indexes are simply mapped to the transparent "color" as is common in most color palettes). I have different constraints trough, as my map contains 3200x1600 pixels and not 64x64, so that I really need those compressions for instant display.
noeltock 15y ago
Talk about filling a gap in the market, good luck with this model!
twog 15y ago
Its so refreshing to see someone launch software with an OSx, Windows, AND linux version. Thank you for your hard work.
- ximeng 15y ago
  No Windows version.
  - incanus77 15y ago
    Not yet.
    - dhcole 15y ago
      Plans for Windows just announced in the 2012 roadmap: http://developmentseed.org/blog/2012/jan/02/major-mapbox-investments-coming-2012/ http://developmentseed.org/blog/2012/jan/02/major-mapbox-inv... "Just two months ago, after Node.js added native Windows support, we started testing and porting TileMill to a native Windows application. We plan to release a beta version this quarter"
cullenking 15y ago
TileMill is great, I used it to style our replacement maps, since google maps decided to start charging. Here is an example: http://tile.ridewithgps.com/leaflet.html http://tile.ridewithgps.com/leaflet.html TileMill is addictive to play with, though very tedious if you don't have a fast machine with some SSD's, as refreshes take a while to reload various zoom levels to see your work. Not much to be done there except throw hardware it. Edit: I am hosting our maps on my own hardware, mapnik2+mod_tile. I just used the slick client to create a mapnik XML file for rendering.
- eblade 15y ago
  Question: where did get the map and terrain data from if I may know? I used shapefiles from OpenStreetMap but they aren't as complete as I thought they are.
  - cullenking 15y ago
    Map data is a complete OSM planet import - 20gb compressed file, expanded/indexed into a 225gb database. OSM has lots of good data but most custom styled maps leave out a good amount of it, or, in the case of the OSM style maps, they include way too much. Importing and indexing planet.osm takes a while. It's better than importing the whole planet file in gazetteer mode for geocoding though. I have been fighting that import for a month now, on decent hardware!
- canop_fr 15y ago
  Thanks. It's fast. Your demo displays one problem : the strange choice of labels. For example, look for France's capital at zoom 8. You'll see a lot of small towns indicated but not Paris. And I can reproduce this for a lot of notable towns (like NY).
  - jrockway 15y ago
    He must be sorting the labels in reverse order of importance. I notice that if I zoom in near Chicago, Chicago itself is missing, big suburbs are in the smallest font, and small suburbs are in a big font. Looks like the data is right but the sort order is wrong.
akamaka 15y ago
Looks great, and kudos on releasing open source code as well. As a developer who has specialized in making web-based maps, I've been dreaming of something like this coming a long, and here it is. I had seriously considered working toward the same goal, but gave up because I wasn't sure about what kind of customers I might find. I'm still convinced that there are a lot of customers out there for this type of thing, and I hope you guys make this into something big!
spacestation 15y ago
i fiddled with TileMill last week. I need something more "freehand" and Ortelius is what I need; http://www.mapdiva.com/ortelius/ http://www.mapdiva.com/ortelius/
ericgund 15y ago
we just posted 2012 TileMill + MapBox major investment priorities today: http://ds.io/mapbox-2012 http://ds.io/mapbox-2012. In short, big push for: - TileMill on Windows, - Live map rendering for dynamic data via TileMill + direct uploads to MapBox for hosting, - Beautiful new OpenStreetMap base maps as an alternative for Google Maps w/ its new usage fees, - Shipping fast hardware (which we are still designing :) http://www.flickr.com/photos/developmentseed/5812414817/ http://www.flickr.com/photos/developmentseed/5812414817/).
- reedlaw 15y ago
  Is that 3D modeler Blender? I appreciate MapBox's use of and support of open source.
NelsonMinar 15y ago
TileMill is a lot of fun; you can download it and be making custom maps in just a few minutes. There's a lot of very sophisticated open source cartography hiding under the covers, not to mention nodejs wizardry. They've done a great job of packaging it all and making an easy to use tool for map-makers without requiring a lot of GIS or OSGeo expertise. One particularly nice option is the ability to "print" your pre-rendered map to an MBTiles bundle for serving in a slippy map on the web.
mmaunder 15y ago
Can you create large map images from tiles that can be turned into a poster?
- awj 15y ago
  Yes. Stitching the tiles together is relatively easy. Depending on the specific tiling scheme, you may be able to do so without any depth of knowledge in geography. That said mapnik [1], the rendering engine used to generate tiles, is a general purpose geographic data renderer. You could use tilemill as a tool to generate the map style then use mapnik directly to render your map at any pixel or geographic dimensions desired. [1] http://mapnik.org/ http://mapnik.org/
- dhotson 15y ago
  Yup, it looks like there are options to export to svg and pdf (among other formats).
JoannaMeiger 15y ago
This is merely alright.
xbryanx 15y ago
News and background on Development Seed's great work: http://developmentseed.org/blog/2012/jan/02/major-mapbox-investments-coming-2012/ http://developmentseed.org/blog/2012/jan/02/major-mapbox-inv...
hunvreus 15y ago
We've been using TileMill for a good 6 months now; for anybody who has been struggling with the tools that were available so far, it is a breath of fresh air. I'd recommend anybody to give it a try and then have a look at their plans: http://mapbox.com/plans/ http://mapbox.com/plans/. It's damn affordable for that kind of service. We even use Tilemill's underlying node.js framework, Bones, for some of our projects.
ojilles 15y ago
Maybe not entirely on topic, but after some googling I could not find this: what is the easiest way to have this interface (or Google Maps, etc) towards a huge picture (so not maps/GIS). A gigantic panorama picture so that the end user can pan and zoom?
- tmcw 15y ago
  You can actually do this with TileMill as well, but a common option is GSV - http://mike.teczno.com/giant/pan/ http://mike.teczno.com/giant/pan/ or panojs: http://code.google.com/p/panojs/ http://code.google.com/p/panojs/
jarnix 15y ago
every month we have this post about your app :)

311 points by dhotson 15y ago

tectonic 15y ago

Gorgeous.

dangoldin 15y ago

This is awesome. Thanks for posting.

iampeter 15y ago

fantastic. guess they were faster than me :)

jashkenas 15y ago

One of the neatest hacks in TileMill is the "UTFGrid", used for associating tooltips to regions of the map ... without having to do all kinds of expensive boundary checking on the client-side. http://mapbox.com/mbtiles-spec/utfgrid/ http://mapbox.com/mbtiles-spec/utfgrid/ edit: TileMill is also a really cool example of using Backbone.js + Bones to build a Desktop app: https://github.com/mapbox/tilemill/tree/master/models https://github.com/mapbox/tilemill/tree/master/models

canop_fr 15y ago
Why use a grid of characters and not a grid of pixels (with indexed values that can be linked to the properties just like UTFGrid links chars to properties) ? I use this kind of pixel grid which brings those advantages, especially for very large maps : - use of the image (with carefully chosen colors) as a direct preview of the map (depending on the resolution) - efficient (bidirectional) PNG compression - use of already present image manipulation libraries for all kind of manipulation (like layers addition) What's the benefit of using UTF characters ?
- kkaefer 15y ago
  Basically the answer to all of these questions is that it's easier to decode in the browser. A UTFGrid is just plain JSON, so we can just run it through JSON.parse(). PNG uses zlib compression, so we can get that benefit for free when sending gzip over HTTP. Here's some more design rationale: http://developmentseed.org/blog/2011/09/21/how-interactivity-works-utfgrid/ http://developmentseed.org/blog/2011/09/21/how-interactivity...
  - canop_fr 15y ago
    OK, I understand. As a side note, I send my PNG when needed in JSON (larger, with base64 encoding, I didn't try to make a comparison with ASCII art format) and I find that with getImageData getting the indexed colors is fast and easy. I was referring to bidirectional compression because PNG filter (applied before the deflate) uses the fact that pixels are often similar on both axes. Of course, without a few tests and comparisons, I can't be sure I really gain in size, but I like to use the fact that my map is an image (faster to draw on the screen at some resolutions and image manipulation server side - my zero indexes are simply mapped to the transparent "color" as is common in most color palettes). I have different constraints trough, as my map contains 3200x1600 pixels and not 64x64, so that I really need those compressions for instant display.

noeltock 15y ago

Talk about filling a gap in the market, good luck with this model!

twog 15y ago

Its so refreshing to see someone launch software with an OSx, Windows, AND linux version. Thank you for your hard work.

ximeng 15y ago
No Windows version.
- incanus77 15y ago
  Not yet.
  - dhcole 15y ago
    Plans for Windows just announced in the 2012 roadmap: http://developmentseed.org/blog/2012/jan/02/major-mapbox-investments-coming-2012/ http://developmentseed.org/blog/2012/jan/02/major-mapbox-inv... "Just two months ago, after Node.js added native Windows support, we started testing and porting TileMill to a native Windows application. We plan to release a beta version this quarter"

cullenking 15y ago

TileMill is great, I used it to style our replacement maps, since google maps decided to start charging. Here is an example: http://tile.ridewithgps.com/leaflet.html http://tile.ridewithgps.com/leaflet.html TileMill is addictive to play with, though very tedious if you don't have a fast machine with some SSD's, as refreshes take a while to reload various zoom levels to see your work. Not much to be done there except throw hardware it. Edit: I am hosting our maps on my own hardware, mapnik2+mod_tile. I just used the slick client to create a mapnik XML file for rendering.

eblade 15y ago
Question: where did get the map and terrain data from if I may know? I used shapefiles from OpenStreetMap but they aren't as complete as I thought they are.
- cullenking 15y ago
  Map data is a complete OSM planet import - 20gb compressed file, expanded/indexed into a 225gb database. OSM has lots of good data but most custom styled maps leave out a good amount of it, or, in the case of the OSM style maps, they include way too much. Importing and indexing planet.osm takes a while. It's better than importing the whole planet file in gazetteer mode for geocoding though. I have been fighting that import for a month now, on decent hardware!
canop_fr 15y ago
Thanks. It's fast. Your demo displays one problem : the strange choice of labels. For example, look for France's capital at zoom 8. You'll see a lot of small towns indicated but not Paris. And I can reproduce this for a lot of notable towns (like NY).
- jrockway 15y ago
  He must be sorting the labels in reverse order of importance. I notice that if I zoom in near Chicago, Chicago itself is missing, big suburbs are in the smallest font, and small suburbs are in a big font. Looks like the data is right but the sort order is wrong.

akamaka 15y ago

Looks great, and kudos on releasing open source code as well. As a developer who has specialized in making web-based maps, I've been dreaming of something like this coming a long, and here it is. I had seriously considered working toward the same goal, but gave up because I wasn't sure about what kind of customers I might find. I'm still convinced that there are a lot of customers out there for this type of thing, and I hope you guys make this into something big!

spacestation 15y ago

i fiddled with TileMill last week. I need something more "freehand" and Ortelius is what I need; http://www.mapdiva.com/ortelius/ http://www.mapdiva.com/ortelius/

ericgund 15y ago

we just posted 2012 TileMill + MapBox major investment priorities today: http://ds.io/mapbox-2012 http://ds.io/mapbox-2012. In short, big push for: - TileMill on Windows, - Live map rendering for dynamic data via TileMill + direct uploads to MapBox for hosting, - Beautiful new OpenStreetMap base maps as an alternative for Google Maps w/ its new usage fees, - Shipping fast hardware (which we are still designing :) http://www.flickr.com/photos/developmentseed/5812414817/ http://www.flickr.com/photos/developmentseed/5812414817/).

reedlaw 15y ago
Is that 3D modeler Blender? I appreciate MapBox's use of and support of open source.

NelsonMinar 15y ago

TileMill is a lot of fun; you can download it and be making custom maps in just a few minutes. There's a lot of very sophisticated open source cartography hiding under the covers, not to mention nodejs wizardry. They've done a great job of packaging it all and making an easy to use tool for map-makers without requiring a lot of GIS or OSGeo expertise. One particularly nice option is the ability to "print" your pre-rendered map to an MBTiles bundle for serving in a slippy map on the web.

mmaunder 15y ago

Can you create large map images from tiles that can be turned into a poster?

awj 15y ago
Yes. Stitching the tiles together is relatively easy. Depending on the specific tiling scheme, you may be able to do so without any depth of knowledge in geography. That said mapnik [1], the rendering engine used to generate tiles, is a general purpose geographic data renderer. You could use tilemill as a tool to generate the map style then use mapnik directly to render your map at any pixel or geographic dimensions desired. [1] http://mapnik.org/ http://mapnik.org/
dhotson 15y ago
Yup, it looks like there are options to export to svg and pdf (among other formats).

JoannaMeiger 15y ago

This is merely alright.

xbryanx 15y ago

News and background on Development Seed's great work: http://developmentseed.org/blog/2012/jan/02/major-mapbox-investments-coming-2012/ http://developmentseed.org/blog/2012/jan/02/major-mapbox-inv...

hunvreus 15y ago

We've been using TileMill for a good 6 months now; for anybody who has been struggling with the tools that were available so far, it is a breath of fresh air. I'd recommend anybody to give it a try and then have a look at their plans: http://mapbox.com/plans/ http://mapbox.com/plans/. It's damn affordable for that kind of service. We even use Tilemill's underlying node.js framework, Bones, for some of our projects.

ojilles 15y ago

Maybe not entirely on topic, but after some googling I could not find this: what is the easiest way to have this interface (or Google Maps, etc) towards a huge picture (so not maps/GIS). A gigantic panorama picture so that the end user can pan and zoom?

tmcw 15y ago
You can actually do this with TileMill as well, but a common option is GSV - http://mike.teczno.com/giant/pan/ http://mike.teczno.com/giant/pan/ or panojs: http://code.google.com/p/panojs/ http://code.google.com/p/panojs/

jarnix 15y ago

every month we have this post about your app :)