How to turn on 3D buildings (and apply data-driven styling) in Mapbox Studio

hello my name is Vanessa Kanako Etzel and I'm going to show you how to turn on 3d buildings within studio style components in addition to doing a little bit of data-driven styling so let's just dive in so I'm starting on a monochrome light style to have a basic general light background map so that those buildings can really pop out and I'm going to go ahead and zoom in close enough to see the buildings in order to turn 3d buildings on go over to the components panel on the left click buildings and then turn 3d buildings on as a toggle and as you see the 3d buildings have already immediately turned on at the click of that button if you really want to see more of the 3d buildings and what kind of visual impact they can have you can use this little arrow here which is a pitch arrow that lets you move the map around so you just move your mouse up and down and side-to-side or if you have a trackpad and move your finger up and down and side-to-side and you really can see the extent to which you can utilize 3d buildings in your map and that's it for 3d buildings and now we're just gonna dive into seeing how we can style these using the building height data so in order to get there you can go into the layers panel and search for the building data layer or you can quickly click on the map and it'll show you what data is underneath there within the components as well as the layers panel and building extrusions and it'll just pop up with that data layers pane of information so we're going to just the color based the buildings height so we're gonna go to color and currently this is the automatic state it has from the built-in components that produce this color right here so we're going to override it to allow ourselves to edit it to edit the building height we're gonna select style across data range and we're going to select height which is the tribute we're going to be adjusting so mat box building height data is in meters and I want this to be styled in a way that we understand buildings and we think about buildings so a story is about three meters according to this map box blog so we're going to go ahead and think of a two and a half storey building as 7.5 meters so we're gonna start with making a data value for zero height so white can be 0% height or zero meters and then we're going to add another stop for that value that makes us think of a regular size sort of house and type in 7.5 meters and I'm gonna make this red and I'm gonna make it a bright red and immediately on the map you see this changed and I'm going to make the next value an even 100 which about 33 33 stories high I'm gonna make this a dark blue because that's a little bit of an opposite color of red but also still provides a sort of gradient in between that mix as well to create a color like purple we understand that red and purple mix together and so when we see purple on the map we kind of immediately understand that it's an in-between state also I'm going to override the opacity here so that we can see the 3d buildings a little more so I'm gonna make that 0.95 and now we can kind of immediately see that difference there I'm going to go back to the color and make the final value a sort of catch-all for buildings that are just taller than a thirty-third three-story building so here I'm making this 101 value a really bright sort of blue and this is going to capture 101 to the highest value which is 1500 so we're gonna change this back to 101 and you can also see the data range up here as you change the color and as you change the numbers so you can see if the gradient is going between 100 and 1,500 or if I were to change this value I can make this higher or lower so maybe I want to make it a thousand and you can just see the different gradients and what that means in terms of the numeric value but I'm going to change this back so now I can just zoom out and see that Madison doesn't have that many tall buildings go to New York City then I can immediately see that New York has a lot more tall buildings that are above 33 stories in addition to a lot of buildings that are in between and there are still some buildings that are pretty short and if I want to also see what buildings only are between these values so currently it is a linear gradient which means it is continuous but if I want it to be discrete I can change it to a step rate of change and this means that everything between 0 and 7.5 is white and everything between 7.5 and 100 is red and everything between 100 and 101 is blue and everything above 101 is that bright blue color and that's it so that kind of is more of an extreme comparison in case you want to make that kind of extreme comparison and you can see this is pretty stark compared to the linear and that's it that's all I have to show you today so I hope you enjoyed it and I hope you have fun creating 3d buildings on your map

Channel: Mapbox

Views: 14,015

Keywords: maps, cartography, design, Mapbox, Studio, style, data, edit, 3D, data-driven styling, height, extrusions, stories, story, linear, step, how-to

Id: YkH1awf6d98

Length: 5min 31sec (331 seconds)

Published: Tue Apr 07 2020