TileMill with OpenStreetMap Data

hey I'm going to talk about tile mill by a company called matte box right now if you go to matte box calm / tile mill you will be able to download tile no for either Mac Linux or Windows it's pretty easy to install for any of those and once you do you'll be able to use tile mill to easily make tiles for online maps and share those relatively easily also so why don't you go ahead and download tile mill and then we'll talk a little bit more about it okay so when you open tile you come to this page which is the projects page and right now there's not a ton right here you should have at least these four and these are examples created by met box that come along with your installation and I'm just going to open one of them you can see this is Washington DC and it's it's tiles that you would put on your map and you can see that the streets get more detailed as i zoom in and the labels get bigger and there are more labels as i zoom in just as you would expect with any base layer for an interactive map you can also see the legend off here to the side and you can see the Cardo CSS on the right we talked about Carter CSS in a previous video so I'm not going to talk too much about how it works today okay so why don't we create a new project I'm going to call my in Berlin test and add it okay so when you create a project by default it has the country outlines and that's kind of it and these countries are I believe just the country outlines from natural earth I'm going to delete that right now and will confirm that and so just to be clear this is the layers area this is where you add and delete and edit layers you see that nothing changed and that's because I haven't saved yet when I go up here and click save then all my countries are gone and I can delete the countries from the Cardo CSS because I'm not going to need that the map shouldn't change here you can see that all we really have is the background color for the map and that color also happens to be down here if you want a handy color picker this is your place and you can see that the color changed as soon as I picked it okay that's not terribly useful on its own why don't we download some data and in this case I'm going to download OpenStreetMap data and I'm going to do that using Metro extracts those are at metro.net snow Tec Tec Zn o calm and these are OpenStreetMap extracts for mostly for urban areas as the name suggests but also for particular regions that people are interested in so as the name of my project suggests I'm going to scroll down here and find brilliant under yup I'm going to click that and in this case we want the fourth option here it's the OSM to PG SQL shape files that's there's something technical about that name that I don't think I should describe right now but trust me it's going to take a few seconds to download so I'm going to pause well at this okay so I downloaded this and it looks like this it is three different shape files might be easier to see this way you see that there are line shape files point shape files and polygon shape files that's a limitation of shape files as a format they can only have one type of geometry and each one OpenStreetMap contains all of these and another type of geometry so when you download open stream app data for an area you're going to get all three kinds and it has to split those into three different shape files i'm going to open the line shape file in QGIS just so we can get an idea of what that looks like all right yeah it's a lot of data right that Germany is very well mapped and open stream up so I'm not surprised that Berlin is extremely well meant mostly what I'm interested in showing you right now is the attribute table for this so I'm going to open the attribute table for the line shapefile and this is probably going to take a second all right so now you can see and you can see all the features there are tons of them tons and tons not going to scroll through them too much in this case and you can see the columns as you scroll to the right these are not all of the attributes that exist in OpenStreetMap but these are the ones that are packaged up nicely for you if you need other OpenStreetMap data there are definitely ways to get it but they aren't nearly as easy as just downloading a shapefile from the metro extracts website so I recommend trying the metro extracts first otherwise you'll have to dig through some documentation to figure out how to get the rest but it's it's not that bad in this case um since we want a base layer we are going to be most interested in the highway column and you can learn more about what's in the highway column by going to the OpenStreetMap wiki that is at wiki eat that OpenStreetMap dog and I'm going to search in the top right for highway okay so there are a number of values that you might find in highway the most important roads are tags highway equals primary and then your highway equals secondary tertiary etc um when you are um when you're mapping and when you're trying to emphasize certain roads and over others you'll want to roughly go in this order that is here on the wiki okay next to title so going to add a layer and find the file that I just downloaded it's in in my case it's in downloads and here and then I want to find the line shape file in this case you want the file to ends and dice SHP you don't necessarily want the whole zipped up thing and once I click done I have an ID in here I want to make it descriptive I'll call it billion lines in this case and I'm going to just click click Save and nothing changes because there's still no Styles over here and the Cardo CSS so I have to add some I remember um those start with pound sign and then the name of the layer and then the curly brace is another side and then within here I'm going to say line with one and the line color black okay so I saved and nothing changed but that's probably because I can't see the area that I'm looking for down here in the layers picker there's a magnifying glass and that is zoom to extent and hopefully we'll have better luck yeah that looks much better okay so this is a bit of a nest of roads right so perhaps what we really want is to experiment with different values of the highway tag and the way you would do that is by referring back here to the highway page on the wiki maybe let's say just highway equals motorway we want to see so if I come back here and in my condition say a highway equals Murli and save it now we just see the few very large roads called motorways okay so there there we have just the motorways right maybe we want the motorways to be a bit thicker and maybe we want the inside of the motorways to be a slightly different color to give them a nicer look the way you would do that and this is something I haven't covered in the other video so this is going to be new is um you almost you in a way create another layer which tells tilemill to draw the same layer twice and there are two ways you can do it but I'm going to do it the simple way which is within this statement and when you're doing this when you're telling tilemill to draw your layer twice you do that by prefixing it with two colons and then you give it a name and it doesn't matter what the name is so make it something something kind of that makes sense that you'll be able to read later so I'm going to call mine Road filler say and I'll give that a width of three and then a color let's just go with blue for now and when I say that you can see that I have blue lines that are outlined in black right maybe I want the blue to be a little bit less in size so I'll turn it down to two maybe I want to even less than that than the one okay so so now we have the motorways and remember this happens first we give those motorways with the 5a color black and that gets drawn and then tilemill comes back through and draws it all over again with this rule this road filler and when it does that the line only has a width of one and then it has a color of blue okay so so from here there are lots of things you could do obviously you could copy these and then say I want to I'll go back to the wiki and say okay let's get trunks and primary roads too so highway equals oh I'll hit save and we should see a few more I think and if you're not sure one way to check would be to comment this out commented out by starting it with a slash backslash just asterisk and then ending it with the opposite so an asterisk not backslash and when I hit save some of them should disappear right so those are the trunk highways and I'm going to save it again so we should see them again and then I'm going to add a comma and then do the same thing with primary now we have a lot more roots okay and from here I assume we'll probably want our these to be not as pronounced as the motorway so I'll make my these a little bit thinner you can see that they are now pretty easily differentiated from the motorways I would probably want them to have a different color I'm not making necessarily a beautiful map in this case but I want to illustrate how this would work hopefully hopefully you're getting the idea and remember I'm doing in this case I'm saying look at Berlin lines if the highway column if the highway attribute in the berlin lines table is trunk or primary for a given feature then draw that with with three and color black and then go ahead and draw again with with one and color orange okay so now my background color is kind of driving me insane so I'm just going to set it to white okay and then then it's kind of up to you to say maybe you only want to show the other highways as you zoom in further so we're at zoom nine that's ten maybe when you get down to ten you want to start seeing more so I'm going to say zoom greater than equal to ten and then I'm going to copy this again clean lately I'm going to tab this over just to make it clear that it's inside this zoom rule and then I'll pick the rest of these I want secondary tertiary and so on so secondary tertiary unclassified residential service and I'm going to separate these all by commas so I don't feel like styling them all differently if you wanted to you probably would want to if you were making a nice set of tiles to use um but I'm just doing this to demonstrate it for you service is the last one and I'll hit I'll just make these one and not give them a fill so I'll delete the fill and hit save remember this doesn't change anything so we're at zoom nine and but if i zoom in one level no need a lot more roads right and it's really crowded so it looks like there are some gaps such as here that seem kind of surprising I assume there are links that we're missing so you'd have to add those if if you want the motorway link to be the same color as the motorway perhaps you want to do it like this add a comma say Berlin and highway equals motorway link underscore link and hit save and like we have on ramps now similarly you might want to do the same thing with trunk and primary and again I'll be lazy about it copy paste trunk link primary link and hit save and we should see more unwraps here um specifically around here I think it wasn't quite as obvious before okay so that's it's in okay map I guess I think the big thing the big obvious thing that we're missing here is labels and to do labels you'll want to draw the roads once again um you'll want to draw the roads once again so in this case I'm going to go to the motorway and motorway link and add my two colons and say Road label and make an entirely new rule yeah and now so lines are pretty easy to style but texts we haven't really done so I'm going to go to the documentation and that is at mat bucks comm / Cardo slash API slash two point 1.0 and specifically you want to look for the text section and you should get to a section of the page that looks like this let me make it a little bit bigger okay so the most one of the more important attributes here is the text name and that is the actual label that's going to get used and in this case we want to look back at our table in the table you can see by clicking on this table icon and you'll see all of the columns available and we will scroll over and find one that would be good for labels in this case I believe the name is going to be good for labels so I'm going to add a text name attribute and in square brackets I'm going to say name okay so we also have to define the size of that text here so text size let's make it really big for now and a text face name you can see a list of available text faces down here the letter A I'm going to click it and you can see all of these um often you see something like that of a sans I'm going to copy it and add it here this text face and in quotes okay that might be enough I'm going to hit save and you can see the head I have these labels but they're kind of they're hard to read because they're black and some of the other lines are black and they hey don't follow the route of the line so there are some things we can do about that I'm going to scroll through here but they're a bunch of typography attributes that you can change so here's here's what we really want we want the text hallo so the default is white which sounds good for what we're doing but we want to add a radius so text halo radius text halo radius I'll say five that should be yeah that's nice and legible maybe make it even smaller so we don't have this huge bubble around it yeah that's starting to look pretty good it's pretty readable so there should be a text orientation that's um if you wanted to specify the degrees like the angle at which you want the text to show up but we don't have a simple angle that we want all of it to show up what we actually want placement um so this is to force the point so it's just putting it kind of in the middle of the road or the segment in this case we want it to be line and that should be better so text placement line I'm going to hit save and they should start orienting with the roads I see that some of them disappeared here and it's probably probably because they were going to be overlapping um one thing you can do is say allow it overlap so text allow overlap and say true that didn't do it for that one unfortunately one thing we could do is make the text size a bit smaller say 15 okay we see a new label that just showed up here what's something else we could do we could change the placement type so this will try to reposition the labels to make them fit let's say a text placement type simple mmm doesn't seem to have made a difference in this case and at some point there's a chance that you're just not going to get it to fit the way you want it to and labels can be complicated this way but maybe if we scroll in we'll start to see the label because it will have room yeah so now we can see it here and maybe we just want to get rid of the allow overlap and now we only have one of them rather than have to which seems to make more sense to me okay so now we have labels with basic labels for motorways probably if you were making this into a base map that would be used online you'd probably want to add labels for other roads once you got down far enough you wouldn't want them to be available way back here it would be really ugly but that's a judgment call and a design decision okay so now we have kind of it it's a basic pretty ugly map of Berlin we could also add points from the points shapefile here I'm going to skip that we could also add the polygons for buildings I'm also going to skip that for now actually why don't we add the buildings really quickly so remember you browse find your file polygons click done I'm going to give it an ID Berlin polygons save it remember nothing changes because we're not styling it yet then here I'm going to say Berlin lines and I just want the buildings so I'm and I know that there's a building's column a building column so I'm going to sick building not equal sorry two empty quotes and I'm going to give it a polygon fill of let's say green for now mm-hmm oops I said polygons lines I want polygons I'm going to get save and this should be yeah pretty dramatic it looks like buildings are pretty well mapped in OpenStreetMap in Berlin and you could add labels to these if you wanted to for the addresses or the names of the buildings everything most of the things that you would think of doing with lines and points you could also do with polygons um you can see that there are some features missing here like water I believe mm-hmm and there is a property and Colour CSS that I think is pretty fun it's um scrolling down building height so this is interesting it renders buildings in 3d so if you give this building fill instead of a polygon fill and say building height of out of 10 and hit save whoa that's way too big okay I'm going to make them a bit smaller and save it again whoa that's not working at all huh that's crazy I've never had it happened that way to me before I'm trying to zoom at to see if that fixes things but it is doing a lot of work because I am doing something clearly doing something wrong so I'm actually going to change it back to polygon fill but if you get a chance I want to play with polygons buildings rather give it a shot um but I'm not going to mess with that right now so okay I changed it back to polygon fill that looks a lot better my computer is still catching up with the mess I just put it through alright so say we were happy with the space later I'm absolutely not happy with it but this is kind of good enough for now alright and I want to put this online and use it so um there are two things I need to do first I need to go this wrench click the wrench and um we see this big empty area what we need is to restrict the area to just the area we want to be available as tiles we don't want the whole world to be available we just want Berlin because that's all we are interested in here so I'm going to scroll scroll down into it and try to get this bounding box as tight as I can again it's it's taking its it's doing a lot of work right now so you might have similar problems okay that looks much better and I'm going to all my building blocks right around Berlin maybe even a little bit tighter so that it's not it doesn't get ugly at the edges again and again probably we'd never want people to be zoomed out this far let's say they have to be at least zoom 9 and then we click the center that we want our map to have once we're at one of the acceptable zoom levels so we click there and you can see that it has a z 9 that means the center and original zoom when somebody loads this is going to be Z 9 and then give it a name we're going to call it Berlin test not going to bother with the rest for now and the really really really really really important thing to do is to set the zoom levels remember we started at zoom level line and we don't want to go down to 22 let's make it just a few zoom levels say 9 to 12 and as we change this it tells us how many tiles that's going to render so tile no creates tiles that your web mapping library can use or a service like cartodb can use as a background layer so it's actually going to create those images when we ask it to and so in this case it's going to create 867 images for a mix worth if we just bump this up to 13 it's going to quadruple the number of tiles and say over a Meg but if we go down to 22 it's going to get so large almost 800 million images and well over a hundred gigs I don't think I have 100 gigs of space either on my computer or mat Lexus servers so I'm going to make it much smaller much more reasonable you need to watch this if this is too high it's either going to crash or take forever or you're just going to be very confused about why your map is not working okay so that's all you need to save you need to zoom in find your debt data draw a box around it and then click the center at the at the zoom level in this case zoom level 9 that you want to start at you need to do those two things and then you need to set the zoom levels right here if you don't you're going to have all kinds of problems all right so I'm clicking save and the nice thing about that is now when I go back to my projects remember before we only had six projects here we have a new one called brilliant test and when I open it it's going to start me out as zoom level 9 and the center that I picked earlier I don't have to scroll in and find my data all over again that's really nice ok so once you're ready to export your tiles you go here to the export button and I would go to upload and if you didn't have your account set up with tile no you'd have to do that here um in my case I already have mine set up so I'm not going to change it these settings are all the ones that I already set up so I don't have to do it again I'm just going to go ahead and click upload and then it takes me to this page that shows me the job that I asked it to do and it says that it has about nine minutes remaining I'd be surprised if it actually takes that one but in this case I am going to pause it just in case it does take that long and I'll be back in a second okay so that did take a couple of minutes only a minute and a half actually so once it uploads you can see this button turn to view and I'm going to click it it's going to take me online to the tiles that I just made and you can see they act exactly the way that we had them set up they look very similar to the ones that we had set up and you can also see up here this is the zoom level you can see that that goes only to nine only as low as nine and only up to 12 because those are the zooms that we set up okay so that is roughly how you can import OpenStreetMap data into tilemill and create base maps to use on your interactive maps once you do this you can use them in other surfaces and mostly you're going to be interested in this part of the UI

Channel: Eric Brelsford

Views: 16,494

Keywords: maps, tilemill, OpenStreetMap (Software)

Id: BmYqxF8QgnA

Length: 38min 15sec (2295 seconds)

Published: Tue Mar 04 2014