Mapbox Tutorial: How to create custom web maps for free

let's cover how we can use mapbox to create custom web maps for free these web Mac Box does a really good job of making it easy to make professional looking web maps with just a little bit of code and doing it all for free so let's get started so you notice here that I have Visual Studio code open I have a folder open here called map box and I'm going to add a file to this folder and I'm just going to be I'm just going to call it webmap dot HTML so we're just going to create that file and it's going to open up here it's HTML code we're going to leave things like that for now there are a couple things we have to get set up with mapbox before we are able to actually start developing um so go over and go to mapbox.com you'll see I have that open here you'll need to create an account which you can do for free no credit card required and then when you have that go to your account and when you go to your account as soon as this loads you'll see you have this section called access tokens you can access your tokens up here you notice that I have a default public token you can go ahead and copy that I'm going to refresh it so that you don't you aren't able to see that same thing with this teaching token I'm going to get rid of that so you're not going to be able to uh to copy and use it you'll need to use your own token for this tutorial just make sure you have that we're going to come back to that in just a minute okay um now the next thing we need is we're going to need to um just set up the head of our HTML which is going to contain the resources to mapbox um so the thing we need here I'm going to pull this tab over I'm on the map box quick start the installation tab you can just Google for this or follow that URL there and this URL is included along with all the code we're going to be writing on my website opensourceoptions.com and I'll link to that in the description basically what we need is we need to include the script reference and this link reference in the head of our HTML sheet our HTML file so I'm just going to copy this I'm going to go back over to visual studio code and I'm going to start an HTML document here okay and then I'm going to start a head tag here okay and now I'm going to put a few things in this head tag the first uh is a title and I'm going to name this um my map box web map all right and then we're going to add a meta tag here So Meta name equals viewport um content equals initial scale equals one and then our maximum scale equals one and user scalable equals no okay and then we will close that tag and now here is where I'm going to copy and paste those two links okay and we'll need to just format these so we'll tap these over and we can get rid of that and get rid of that okay so here's the head of our HTML document you need to have this head at the beginning of every web map you want to create and your web map I'm going to create a new web map in each HTML file so you can create a different type of web map in a you know you can have a basic webmap HTML and a 3D webmap HTML there's a lot you can do here okay so we have that now the next thing we need to do is actually start making the map so we can come down here and outside of the head tag and here we're going to create a body tag it's going to be the body uh of our web page or our map now here we want to create an area a div where our map will go so div ID equals map and then we can just close that div like this and that's where map is going to go so right now the content in our body is only going to be this map so it'll be a full screen map which is what we're trying to create here now the next thing we need to do is we need to add a script and this script will be the map box code that generates our map okay so the mapbox library is what we've linked to here let me explain that I guess is the mapboxgl.js this is a Javascript file it's a JavaScript library mapbox GL which contains all the functionality or a lot of the functionality of mapbox so that we can create these web Maps we've now also linked to the mapboxgl.css CSS is as you know styling for HTML so it provides colors fonts positioning and all that stuff okay now there's one more thing that we want to do here to get things set up and inside of this head tag we're also going to add some style which is CSS code to just set up our map area so your style for the body which will be the content of our web map we want to set the margin to zero and the padding to zero nothing it's not a big deal if you don't do this um you're just gonna hear what map may not be exactly you know full screen and that's okay it'll still show up and the next thing you want to do is #math which will reference our map ID div down here and we're going to position uh absolute top already so we're going to say the position should be absolute and I'm going to tell what the position is so top zero bottom zero and the width is going to be 100 percent okay and that will set it up once again so that our map displays from zero to zero and it's 100 wide so that's got things set up we're not displaying a map yet because we need um because we need to add some code to create that map and also add our token to create that map okay so the first thing you have to do is get an access token and we can do this we can do mapbox GL Dot access token we're going to assign our token here so I'm going to go back over to matbox I'm going to go over to my account and I'm going to copy my token I'm going to go back to my file and I'm going to paste my token here now I need to get this inside of quotes so I'm going to put single quotes there and then paste my token again you can see my token is pasted in there I'm going to go to the end of the line hit enter okay now we're going to create our map and this is super easy to do so all we need to do is create a new variable constant map equals new map box GL start map okay and then we need to pass it a few things the first is the container it's going to display it so container which we've specified above as map so this is the name here of our ID of our div ID which is map so that's where this map is going to be displayed and then we need to specify a style all right so what um let's go to mapbox and find a style so here I have a Mac Box and I don't remember all this stuff is but I'm gonna go Google Map box styles look at that the Styles the map box docs will go there and you'll see we have all these different style URLs that we can use and I'm just going to go ahead and copy this first one for mapbox streets and then uh go back over to my code and seal quotes and paste that in there so this will pull up that style on my map and now we're basically ready to go so make sure you have this saved and once that's say we want to open this web map so I'm just going to go to my file here I've got this file path the same file that I have here my mapbox folder and I can just double click this to open it in my browser you can see it's just referencing that file and boom there is my web map right now now I just want you to know that it's possible your map could display differently right now we're just using the default settings this is displaying as a globe sometimes this will display as a flat map in fact when I did this testing is out it displayed as a flat map and that's okay just so you know this can change okay I'm going to close this now uh I'm going to go back to my code and we're going to add a couple of other settings so one other thing we might want to do is at a center for our map uh and we can do this by giving a coordinate pair an x coordinate a longitude and we'll do um sure negative let's do negative 100 and we'll do positive five I have no idea where this is going to be and then we can also specify a zoom level so the higher the zoom the more the closer you'll be to the map so if we specify a zoom level of one all right so we can save that um if you're using if you're Auto saves it on it might save automatically we can just open that web map back up and you can see it shifted the center of my map I didn't zoom in at all um what I can do is I can change this Zoom to 10. save that go back to my web map click refresh and you'll see that I'm zoomed in somewhere over a body of water if I zoom out you can see that I'm over in the Pacific Ocean off the coast of Central America somewhere now if we go in and we change this to let's do the level five let's change this to negative one ten uh and 45 this will put me over over North America somewhere so if you save that go back we refresh our map let it load and you can see here that I've centered in over the Northwestern United States so that's how you can play around with those basic map settings now one of the next things you might want to do with mapbox is to add a marker and this is super simple to do I'm gonna um put this out to four just so we can get our marker in the right spot here now after we added this map we have this map variable const map we need to make a new variable for a marker we can do const and we'll call this marker one and it's going to equal a new matte box GL dot marker okay and then for this marker we're going to set the longitude and latitude and let us set this somewhere close to our map Center but not we'll we'll just set it right around App Center so we know exactly where Center is so we'll do negative 110 uh 45 and then we also need to add it to the map so dot add to map which is our map variable and then make sure we end that statement and we also need to make sure we end this statement here luckily we didn't throw our map off um but now we've got that and that should pull up a default marker at the sender of our map so let's go ahead and go back to our web map page once again we can just refresh this there you go you can see that it put that marker right there on the Montana Wyoming border okay let's go back in and we can easily add another marker uh so let's call this marker two equals new mapbox GL dot marker and let's add one a different location so let's set our longitude and latitude and let's move it uh negative one one two uh and let's move it down a little so 42. okay and then once again dot add oops oops let's go over and then enter and then dot add to map all right so that will add another marker just like the one we already had um but maybe we want to do some other things here um what if we want to change the color of this marker or if you want to rotate it a little bit relatively easy to do so we can come in and we're just going to add some curly braces in here and we can give some parameters or some attributes to this marker so we can change the color we can go color and we can make it green and we can give it a rotation we can rotate it I don't know we could rotate it 60 degrees if we wanted to or we'll do 45 degrees and that's going to create us a new marker with some different parameters oh and I put that in marker one so I'm going to go ahead and just Ctrl X cut that I want to put this in marker two and uh paste it sorry about that but there you go you can see that we have this new marker um and we're changing it so let's go ahead and refresh our map here and we'll see how that changes it okay so you can see that I added that marker it looks like it didn't rotate and the reason didn't rotate is because I spelled rotation wrong now we should get a rotation let's go and refresh this and there you go you can see that marker rotated 45 degrees okay so real real easy um to just add and adjust those markers okay so we're starting to build a pretty nice web map here let's uh go back and maybe want to add some navigation controls maybe we want the the option to make this map full screen um to add a zoom in zoom out button add a a rotate back to North button you can see I can rotate this map there's no way to get back to pointing North um I'm rotating it by right clicking and dragging by holding the right click and dragging the right Mouse button okay so maybe we want to to do that okay so let's go back um and let's go add some of that functionality so all we need to do here is we've uh I'm just gonna oh I need to end that statement keep looking to do that and get a little space there to clear this up so I'm going to come down and I'm going to do map dot add control and we'll do new map box GL dot full screen control and this will give us the option to make the map full screen and then I want to give it the location so I want to put this uh top right okay and let's end that statement and then let's do map dot add control the other thing we're going to do was put in some navigation controls so mapbox.gl map box GL Dot navigation control um and we'll put that in the top right also and I did not spell that right correctly so let's do that make sure I end the statement this time and now when I run this we should see some new controls on our map in the top right corner so let's go ahead and refresh our web map and you can see up here in the top right we can click full screen and it makes that map full screen we can rotate any direction we want and if we click this rotation button it brings us back to pointing North and we can use the zoom in and zoom out buttons to navigate our map all really easy to do with mapbox Geo okay now I want to just cover one more thing with code here um and that's going to be how to get navigation directions there's a lot more you can do with mapbox and we cover so much more of this in our map of course it's about four and a half hours long complete with code and video instruction if you're interested it's on geospatialschool.com and I'll put a link down in the description but for now let me show you how we can get some more functionality and allow users to get directions from place to place let's go back over to our code and we're going to need to add um a couple of things in here I'm going to copy over a link to another script another style sheet and I'm going to put them right up here in my script all right and so you can see here that I've linked to the script and we have a problem here we'll figure it out in a minute and the style sheet and you'll notice here if you look at this path this is the mapbox glgs plugins map box Geo directions and then it gives you a version number and the Javascript file and here we have the same thing but for a CSS style file okay so that gives us um access to to um oh excuse me that gives us access to to those resources and I apologize I put these in the wrong location here these need to go in the body um of our script we need to put them here above the div tag and I'm just going to come back and get rid of these two wines okay so that's what we should look like we should have those linked here you can find these in the map box documentation I also provide the the cop you can copy the code out of the website I'm on the blog post to to get these which is linked in the description okay so I've now included those and the way that I then add the control to do this to get those directions um it's the same as adding a control for um or something else we're just going to use um the map Dot add control but the code we just added for that plugin gives us access to more controls we can add and so I'll show you this here so we'll do map box or sorry map dot add control but here is the new and we're going to do a new map box GL ow but here we're going to do um sorry not any metal shield new map box directions and inside of here maybe I should put this on a new line actually we need to specify our access token so we're going to set the access token attribute to property and we can just do mapbox GL dot access token because we've already set that above and then once we've set that we're going to specify a position which we'll put this in the top left we already have things in the top right and then we can end this statement and um I'm just going to hit enter to kind of clear up where this goes and this should get tabbed over one to keep that all together okay so we kind of cleaned that up let's uh go refresh our web page and see if I've made any errors so we'll click refresh and you can see that we now open the top right have this choose starting Place choose destination so if I wanted to route from Missoula Montana up here over to Omaha Nebraska and click this and you can see that it pulls up this route and it pulls up these directions right inside of my map and it's super super easy to do it requires very little code and now you can put a map in a web page or on your website that uh allows users to calculate directions you know to your house to your place of business to a party to a wedding whatever it may be so that's an introduction to how you can make custom web maps with mapbox like I said there's so much more you can do here the default was to do this is in a globe projection you can change projections to make that flat we can make 3D maps with mapbox like you can in Google Earth where you can see the 3D typography and you can pan and rotate around and it's super easy to do and all that stuff once again is covered in my mapbox course which is linked Below on geospatialschool.com thanks for watching if you want the code check out the website and I'll see you on the next one

Channel: Geospatial School

Views: 8,111

Keywords: open source, open source options, java script, mapbox, web map, gis, web gis

Id: bDnyoxcsLd4

Length: 25min 8sec (1508 seconds)

Published: Fri Dec 16 2022