How to create an Interactive map layers

hey what's up everybody this is alfred from practical code academy and welcome to a new video in this video i'm going to show you how you can use the leaflet javascript library and the mapbox api to generate maps like this and also create a map layers for example we have the circle we have the marker and the polygon here also i'm going to show you how we can create pop-up messages so when i click in this marker as you can see i get a pop-up message with an image title and paragraph the web actually is very interactive you can zoom in and you can zoom out for the map you can create multiple layers over the map also the circle here when you click on it you're gonna show i'm a circle and also the polygon it having the pop-up of the text on my polygon i hope you're gonna like this video and let's get started [Music] okay i'm gonna start by creating a project folder i'm going to call it maps project open the folder with visual city code in this project we're going to need two files the markup file which is index dot html and the javascript file in that case i'm going to call it main dot js for the markup file i'm going to generate the polar plate using emmet by typing the exclamation mark and pressing tab and this will give me the very basic html that i'm going to need like the header and the body tags and the title i'm going to change the title i'm going to change it to maps project i'm gonna save it and i'm also gonna like my main.js here inside the body before closing the body tag so i'm gonna use the script tag and set the source attribute to main dot js now for this project we're going to use the leaflet library it's a javascript library that can allow you to use multiple functionalities over the map so for example if you want to draw a circle if you want to add a marker if you want to add a polygon however it's not going to provide the map for you in order to get the map you need to use the map box map provider so the mapbox is an api that will provide the map for you however the leaflet will give you the functionality to add any layers over this map so first i'm going to create an account on the map box to get the api key so i'm going to search for mapbox i'm going to click on mapbox and you need to create an account as you can see i already logged in so i'm going to log out sign out and you need to click in this button start mapping for free and it's completely free you don't need to add any credit cards or anything so you have to fill the username email password first name last name company is an optional and agree and then get started in my case here i already have an account so i'm just gonna log to it sign in i'm gonna sign in once you sign then you're going to be in the dashboard and all you need to do here you don't need to read the documentation you don't need to do anything all we need is just the api key so i'm going to copy this api key once i click click in this icon here it's going to copy it to my clipboard i'm going to head to my main.js and i'm going to create a constant i'm going to call it api key i'm going to save it over there now it's already saved and that's done for the map box we don't need to do anything else so we're going to close it or actually let's go to the leave left web page so i'm going to search for leave let js as i mentioned before the leaflet is javascript library so when you go to their main web page they actually have a great documentation i highly recommend that you go and read the documentation they have tons of examples how to use this library so here they have like a small sample how to use the marker and the pop-up screen and load the map for us we're just gonna go for the tutorials and there's tons of tutorials we're just going to stick with the basic tutorial you can use the responsive maps you can add custom icons you can have an interactive maps and so many other tutorials in the quick start guide if you click on it you're gonna they're gonna tell you how you can install this library first here we're gonna need the css file as you can see this is a link tag with the css file for the leavelet javascript library so i'm gonna copy it i'm gonna add it to my index.html in the head here i'm just gonna copy the link tag i don't need the cross origin or the integrity attribute i'm going to take them out now i'm going to save so this step is already done the second step is include the leaflet javascript files after the leaflet css actually i'm going to put it inside the markup here inside the body tag just before my main.js and also i'm going to take out the cross origin and integrity and save and that's it you already loaded the library to your application and you can use it right away and if i open this with the live server and you can see you can't see anything here yet because we didn't define the map yet but if you go to the console and i go to the console here and i press and type in l you will get all this functions inside this l object so this is what the map provides you and they provide you with the l object and the l objects have multiple tons of methods that you can use for example we're going to use the marker function we're also going to use the polygon function you can have use the rectangle you can use the pop-up there's tons and tons for functions that you can use you already made it in this library and we're just going to use it out of the box but in order to access any of these functions you have to use the l object so i'm going to go back to the documentation and as you see the third uh step is to add the markup for a division with an id map id and you actually can change the id here you don't have to stick with this this id actually i'm going to change it to show you how you can change that here inside the body i'm gonna paste it and i'm just gonna call it just map there's no need to call it map id now these say here make sure that the map already having a height actually i'm gonna do more than a height so i'm gonna i need to style this dev that the one that i just added so i'm gonna go here let me open side by side so you can see any changes that we're making so let me save this close this here and now i'm going to add a style tag here in the head and i'm going to select the map id i'm going to give it a height the height let's say 800 pixel and also i'm going to give it a width of 800 pixel and also i want to give it a margin top and bottom i'll do 5 ram left and right i'm going to do it auto to center it in the middle of the screen and still you can see the map because we didn't load it from the javascript that's gonna come in the next step so the next step we're gonna set up the map and they tell you to set up the map you need to create a variable using the l object and use the map function and this map function will take only one argument and this argument is going to be the id of your map division here once you add this you need to set the view so to set the view you need to pick a point where you want to center your map you want to center it in us you want to center it in europe which coordinates you want it to be the center so you have to set the coordinates and as you can see the coordinates are set by an array so it's just an array having two items the first items would be latitude and then the longitude and this is going to be the first argument for the set view the second argument is going to be the zooming level so i'm going to copy this and i'm going to customize for a little bit here first i'm not going to use vars i'm going to use constant and if you remember we changed the map id to just map so i'm using the l object map function and as you can see here we can chain multiple functions together as we can do it in jquery there this is library is similar to jquery and if i save this now you can see the map not actually the map but the map play out you don't have the map yet and the reason for that as i said before the leaflet is not the map provider you have to pick the map provider which in that case is the map box that will take us to the next step to actually show the map you need to use the title layer title layer will have all the information about your map provider the zoom offset and your access token in that case is going to be our api key it having the max zoom you can set the max maximum zoom and all the information you needed and after you set the title layer you need to add it to the map in that case we're going to use add to function and i'm going to pass my map which in that case is going to be the constant here and i'm going to add this title layer to the map so think about the map as a layer that you're going to put it over the placeholder we have here from the leaflet so i'm going to copy this actually we need to customize this this is the title here the first argument for the title layer you don't don't change that this is a placeholder for the mapbox url where it will take the id the access token all these parameters will be filled from here do not alter this also don't change any of this here all you need to change is the api key so here you have to provide your access token to that service of the map box so i'm going to take this out and put the api key constant and i save this and now i have my map which is centered i believe this is london and uk okay the attribute here if you want to show all this strings here you can take this out because this is what's set by the attribute key here remember this is just an object with all the configuration you want to pass to the map like the access key it's just an option key and value so in that case if you don't want to show all this footer here to the map you can take out the attribute which i'm going to take it out right now and that's it now if i taken to the map you're not going to find any footer here only the leaflet another thing now i don't want to center the map in london so in order to center it to any different place i need to change the coordinates here so i'm going to head to google maps i'm gonna set click in any point here somehow if i'm sitting in your i'm gonna click a point here and the bottom here you'll find the coordinates i'm going to click on the coordinates and i'm just going to copy them i'm going to paste them here and this is going to be my new center for the map once i save this if i go back to the project now as you can see the hand is going to be the center of my screen now i also can play with the zoom level now it's set for 13 i can change that to 9 so i'm going to make it the lower value and as you can see we zoom out as you can increase this number you can go up to 18 because this is the max zoom over here so if i picked 18 as you can see i'm already in the street of course you can change this zooming level from here because it's an interactive map but this how you can add a map to your application so for example if you have a website that having a contact page and you want to show the a map of your address you can simply use the leaflet library and adjust a couple of lines and it's not that complicated and also you use the map box okay now let's talk about how you can add marker to this uh map so i'm gonna add a comment here adding marker gonna save that i also don't like initially it will be zoom in so i'm going to set it back to 13. that's much better to add a marker you need to create a marker to create a marker i'm just going to add a new constant i'm going to call it marker and to create a marker we still need to use the l object and in that case i'm going to use marker function and the marker function take only one argument and in that case the coordinates of the marker and if you remember we add coordinates to the leaflet library using arrays so i'm going to add an array like this i'm going to get back to google map to check where's the empire state building and it's right here so i can click right next to it and i'm going to get the coordinates i'm going to copy them from here and this is the coordinates of the marker that i want because i want the marker at the empire state building and if i save this and you get back to the map nothing will show and the reason you just created the constant but you never added to the map to the added to the map we're going to use the same function we used over here add two so i can chain down here the function add to and just put my map so i want to add it to my map and my map simply is the variable for the whole map or the constant for the whole map here if i save this as you can see we have the marker right here and that's it for the marker as you can see it's very simple to add markers you can add multiple of markers in different location on the map but now let's uh cover how you can add a pop-up message to this marker i'm gonna put a comment here and pop-up message to add a pop-up message you need to select the marker or the constant of that marker so i'm going to select the marker here because i want to add the pop-up message to this marker and i already define it as marker there's an r over here and then i'm going to need to use the bind pop-up function to it so i'm going to put dot bind p capital it's camelcase popup function to it and that's how you can bind a pop-up message to a marker or to any of the elements you're adding to the map as we can see we can find pop-up messages to circles polygons rectangles whatever you want you can always use the point or pointing the pop-up message to any constants or variable you're having on the map so in that case i'm just gonna add hello world i see this initially it's not gonna show up the pop-up message you need to the user need to click on the marker to show the message as you can see there is a message over here hello world if i click on it close it it's gonna toggle it every time you click on this marker and you can also provide here an html markup for example i can set this as an h1 save that clicking it as you can see now it's becoming a header it's becoming bigger and bolder another trick you can do is the pop-ups that as you can see when i refresh the page initially the pop-up is not going to showing up if you want it to be shown up initially when the user load the page to be opened all you need to do is just chain down open pop up function and that will initially make it open now if i refresh as you can see it's opened and this is going to be the initial case and the user have to close it but this is not what we're going to be doing here i'm just going to show you this functionality and how you can use this function so i'm going to take it out let's create a markup or make this pop-up message here as a card with an image adding the markup for an image uh to do so i'm just going to create a variable call it template equal i'm going to use the backtext here to add the markup in a multiple lines in that case i'm going to use an h1 bar eight building i'm gonna close my h1 and i'm gonna pass by my variable to the bind popup function here so i'm to put template and now when i click on it as you can see i have this markup and now if i want to add an image i got to use the image tag so i'm going to search for an image for the empire state building go for images can you i can save this image right click on it save it as i'm just going to put it inside my project folder and i should see it here i'm just going to rename it to image something like that and now i'm going to use the image tag the source the image dodge rpg and i also can use the width and the height attributes so i'm going to do widths that case 150 pixels height the pixels if i save this let's see how it looks like that's good uh we can center it in the middle here we can center the image by just wrapping the image tag with a div tag or a diff container now this div i can give it a style i'm gonna do text line center now tested as you can see the image now is in the middle of the pop-up screen i don't like the heading one i'm just gonna make it a little bit smaller so i'm gonna try etch three take a look right now look much better so this is the empire state building and i have the image here in the center you can close it and this is my pop-up screen perfect and that's how you can add markup to your pop-ups screens and to your marker now we're going to talk about how you can add a circle so i'm going to add circle and for this circle i need to create i'm adding a new layer so i need to create a new constant it circle and to create a circle or generate a circle i'm gonna still need the l object and use the circle function for the circle function you need to provide first is the center and the certain center is going to be provided as a coordinates so it's have to be an array and we want to add the circle to the seams uh center point of my marker which in that case is going to be around the empire state so i'm going to copy this i'm going to add it here but also you need to pass configurations as a second argument to this circle and the configuration you pass it as an object so the configuration that i want to pass it at radius 500 meter if i take a look nothing change the reason he didn't set the color of this circle so i'm going to set it the color to be green and the color should be a string so it's green now let's take a look and it's actually not showing up and the reason for that because i created the variable but i forget to add it to my map using the add to function so i'm gonna do add to i map i save that now i can see my circle i'm just going to take out this the green color trying to see what is the default color and it looks like the default color is the blue so if you just provided the radius it will give you the blue color let's test if we take out the radius just passing an empty object as you can see it's going to be tiny tiny circle apparently this is the default radius which is like look like one meter so we're going to get it back as a radius 500 meter and we're also going to give it a color of green so if i save this here you have the edge color which is look like a darker green and the filling color here you can control the fill color not the edge color the color control the edge color but the fill color you can control it along with the fill opacity you see here it's transparent you can still read the street names you can control that you're passing this configurations to this object so i'm gonna do the fill color and scanner case i'm going to put it as red also to the fill opacity to e1 if i save that now it's not not transparent anymore because the fill opacity is one and the color or the fill color is red and the edge is green okay i don't like to the opacity to be fully not transparent so i'm going to set it to 0.2 and here we have this like transparent thread color so you still can read the street names and all the logos you can see it and that's how you can add a circle also still can add a pop-up to it by simply adding that bind pop-up and just add your pop-up message here that case i am a circle i'm gonna go over here click anywhere in this circle and you're gonna see the pop-ups message here also for the marker to have its own pop-up message and that's how you can you add more functionality to the circle layer okay that's for the circle finally in this video we're going to explore the polygon how you can use a polygon or how you can draw a polygon to this map so for the plugin i'm going to create a new i'm just going to add a comment here add polygon for the plugin we still need to create a new constant i'm going to call it polygon lowercase p and i'm going to use the polygon function that provided in the l object for the polygon we need to provide an array of arrays so there is an array as the first argument and there is a configuration as a second argument which is similar uh to the circle here so there is an array an object the object for the configuration and this array is going to include also another arrays so it's every single array you're going to add it here is going to be going to be a point of coordinates that you want to draw the coordinates so for example if i want to draw the coordinates here i'm going to pick this as my first point which is going to be a separate array this is going to be my second point and this is going to be my third point and that's and i need to finish by the same starting point to close the shape so i'm going to add four shapes if i want to add a triangle if i want to add a triangle here this is my starting second third i have to add my closing point similar to where i started so i have here a couple of coordinates that i'm going to be pasting them here so they are arrays inside the bigger array that's including them and notice that the starting point here it's similar to the end point here and i'm going to fill the some couple of the configuration here i want the color to be blue the fill color make it also blue and the fill opacity to be 0.2 see that and still not showing up and the reason because i still didn't add it to the map don't forget to add to function and select the map that you want to add it to because you might have multiple maps so you need to make a reference which map you want to add it to and in that case you'll see my polygon here this is my first point second third fourth and fifth and if you count them here one two three four five because you have to end with the same starting point if i highlight this i mean if i comment this and if i try to take a look at it it will automatically close it that's fine and if i highlight this now it's three points it's somehow going to draw a triangle well this is uh something new for me that it automatically closed the first point so i don't need to add it at the end here so i'll take this out this is an extra step to close it as the starting point it will still close it for you also similarly as we did with the circle when you click on it having a pop-up screen we can add this functionality to this polygon uh but i'm gonna do it in a different way and instead of shading it i'm going to refer to the polygon constant and i'm just going to find pop-up i am a polygon so this is another way you don't need to change everything you still can reference the constant so this is one way to do stuff here if i click on it as you can see i can see it second way that you can take this and chain it over here it will work the same so i'm gonna comment this so you can have it as a reference pretty much both are the same here you bring everything together and change it to the coniston polygon here you would reference it and then you add this function and you pass the text to it okay guys that's it for today's video and i hope you like it if you do like it give us thumbs up and also if you're not subscribed to our channel subscribe now to get more videos like this and i'll see in the next video have a good day

Channel: Practical Code Academy

Views: 10,011

Keywords: interactive map, interactive map website, interactive map javascript, javascript, mapbox, map, mapbox.js, leaflet tutorial, leaflet.js, leaflets, data visualization, data visualization tools, data visualization javascript, mapbox js api tutorial, mapbox js tutorial, javascript basics, javascript project, javascript tutorial, How to create an Interactive map layers

Id: qNqxgSoknGg

Length: 29min 55sec (1795 seconds)

Published: Wed Sep 30 2020