Leaflet OSM 3D Buildings

hey guys Pete here with GIS Solutions today I'm going to show you how to add three-dimensional buildings to your leaflet web map we'll also add a layer control where we could add different base maps and the ability to turn on and off these openstreetmap buildings stay tuned okay guys so let's get started so as always I like to start with a very simple web map and I'll leave a link in the description Down Below on a video I did on creating a web app such as this okay I will leave a link in the description below as well for the leaflet layer openstreetmap buildings and here's the address that I'll leave down below so there's some documentation and we'll come back to that in the video um but one thing we need to copy is the script right here this code right here so if I copy that and we can paste it right up above here in the head in the script so this is just pulling the openstreetmap building data from osm straight into horribly flit web map okay we're gonna create a a check box basically so we could toggle on and off this layer but also I like to include one more base map just so we could toggle between the osm base map and an aerial imagery so right now we have the aerial imagery defaulted which I just showed you guys earlier so to do that let's go ahead and say variable Ariel equals so this is my aerial imagery with the attribution and what I'm going to do is actually just copy this it would just be a little easier and go back here and we'll call this osm oh okay and we're going to need a course change this uh the links right here so if we go over to here I'll leave again I'll leave a link in the description down below uh basically what I did I searched for leaflet base map providers and it should come up with this website as one of the top results let's get her page um if I click onto it you can see here on the right hand side there's all these different base Maps you could add to leaflet quite easily the aerial imagery that I'm using um it's right here esri World imagery and as you notice when you click onto that you could have a preview of the base map you could scroll around and zoom into areas just to get a good a good look at it and you'll also know right up here this is going to change the uh the code so that's just something to be aware of okay and we'll go back up to the top and I'll just select this one right here this openstreetmap um so what I'll do is I'll copy all of this right here and come back here okay and it looks like I didn't need to do that copy earlier early on um yeah sometimes we just kind of learn as we go here so here's a new path to the open street map and we also have the attribution here and if we want we could take out this Max Zoom if you want okay okay very good okay so the next thing we want to do is add that openstreetmap building data so if we go back to this site here so what we're going to do is add this statement right here and we'll go back is that right there this is the osm building data and I realize I need a move this guy back up there we go we could just see base Maps so the aerial and the open street map and now we have the data it's pulling through this link right here and next we want to create the leaflet layer control okay and what we'll do is do variable base Maps equals a little curly bracket there and we have Ariel and this is what it's going to be called in the map itself so you could call this whatever you want and then this is Ariel this aerial here this is what is is the name right here should be the same is right here okay and the next one is osm and again I need to pull the exact name right here open streets there it is okay now for that check box for the um the building data we're going to say variable overlay Maps equals curly bracket I'm just gonna say map well let's say osm buildings okay and same thing this has to be named osmv as you can see right there okay very good now we come down here we do L letter control or L control layers within the parentheses we're going to say base Maps and the overlay Maps add to map so what this is saying is we're pulling the base Maps here the Arial and the open street map and the overlay Maps as a layer control okay I think it looks pretty good so let's go and save that and let's go and run so here's our layer control so again it was defaulted to the aerial but I can also switch to osm and by default right now the buildings are checked so let's go and zoom in so you got to zoom in to to see these buildings and they're starting to render here yeah and and these are again these are pulling straight from openstreetmap and in their Javascript file they're they're um adding certain colors and textures here and there's a way to change these I haven't done it yet um and I'll show you that just a second but it's just a really cool idea to add extruded 3D buildings um you know you can switch the base map of course you could turn them off if you like all together yes let's go back and so here if we go to the source code come over to this GitHub page and if you scroll down you can see here that you know you can kind of get into the file and you could most likely just kind of change some of the the color variations um you know just really customize it um yeah here's the heightened and the colors the roof and so forth so I just want to kind of scratch the surface for you guys and uh you know get you start started on getting these three-dimensional buildings into your leaflet web map um so yeah guys as always if you guys have any questions please feel free to leave a comment down below if you have any suggestions on any future videos I do appreciate if you leave those as well and you haven't yet if you haven't yet please uh subscribe so you don't miss um any videos coming out I try to publish one once a week and I appreciate you guys watching and um we'll see you guys next time thanks for watching

Channel: GIS Solutions

Views: 2,453

Keywords: Leaflet OSM 3D Buildings, leaflet js tutorial, leaflet tutorial for beginners, leaflet OSM, leaflet open street map, leaflet layer control, leaflet layer control checkbox, leaflet layer group, leaflet, leaflet map tutorial, leaflet js, leafletjs, leaflet design, leaflet osm example, leaflet layer control example, leaflet layer group example, leaflet tutorial, leaflet map, leaflet web map tutorial, leaflet js project, leaflet js map

Id: PyVJCM6fwRM

Length: 10min 53sec (653 seconds)

Published: Sun Jul 09 2023