Leaflet - Zero to Hero in three hours

hello friends today i am starting a series on leaflet based web mapping application development in this series we are going to explore capabilities of leaflet together we will develop our web-based mapping application and add various geospatial functionalities to it so let us begin with searching for leaflet on the internet so i am typing leaflet in the google search bar so here i am opening my web browser and typing leaflet and here it goes link with the url leaflet.js.com i am clicking on the link and it takes me to the official website of the leaflet look at here on top of the website it says that leaflet is an open source javascript library it means that you can use this library for developing web-based mapping application at free of cost you are not required to pay any licensing fees even for your commercial projects on the other end the second line says that leaflet supports development of mobile friendly interactive maps you know developing web-based mapping application that works flawlessly on desktop and mobile is very cumbersome leaflet solves that problem for us and makes development easy not only that but leaflet is doing all these things while occupying only kb of disk space it provides all the basic gis functionalities required by most of the developers if you need additional functionalities you can add required plugins let me click on the plugins link to show you how variety of plugins available you can see that there are plethora of plugins available on top you can see it has a plugin for various base map providers when i click on it you can see multiple plugins to support various bitmap providers including azure maps bing maps esri leaflet ear maps and plug-in for other open source provider including osm and stamin etc now let us come back and see other plugins here you can see overlay data plugins that supports various formats including esri geodatabase csv file json and even shapefile kms and jio packages whatever format you know there is a plugin available for that overlay display has plugin for markers animation and heat maps overlay interaction section has plugins to support geometric editing search and pop-up related functionalities here you can see a huge collection of plugins for map interaction to support functionalities including layer switching interactive pan and zoom bookmarking measurement print export and other functionalities now let us have a look at the tutorial section you can see that leaflet is providing detailed documentation to support development of web-based mapping application right from sketch documentation starts from basic quick start guide and then guideline for developing web mapping application for mobile device how to create marker with custom icons adding geojson to advanced styling like choropleth let me click on the quick start guide it is providing basic guideline on developing our first web-based mapping application let us together develop our first webmas mapping application let us create a folder i am creating a folder with the name lecture 1 and opening it with a visual code edit code editor application here i am creating three base files which will be used frequently throughout our series i am creating index.html style.css and main.js now let us start writing code in the index.html file i am creating a boilerplate for html page using the shortcuts of visual code and here it goes wow you can see visual code is wonderful now let us add cdn for lieblet library first let me add css part of it copy it from leaflet website quick start tutorial and paste it into the head part of the html file now let me copy the javascript cdn and paste it at the end of body part of html file now i am quickly adding a reference to custom css in javascript file now let us have a look at quickstart tutorial it is asking us to add a div element with id is equal to map in the html code so let me do that as per quick start tutorial now i'm adding css code for styling my map elements so let me copy this styling part from quickstart tutorial and paste it to my css file once this is done now we are required to do some coding in javascript to initialize map and set some of the parameters so let me copy the relevant code from quick start guide and paste it into my main.js file here you can see that it is initializing map variable please note that we must provide parameter in the bracket which is exactly same as id of the div element which we have created in html5 subsequently we are setting view of the map having center at the latitude and longitude provided here we are also setting a zoom scale of the map to 13 so when we open a webpage our map will be zoomed at the scale of 13. you can see we are performing multiple activities in a single line of code so far we have initialized the map but it is blank we are yet to add layers to our map element so let me quickly add layer to the map if we look at the quick start tutorial we can see that the code is adding a tile layer from the map box it is required to create an account in the map box website and provide token here in the code so i am deviating a bit from here and we will add osm tile layer which does not require any account or token so let me go to the document section and under the raster layer i am clicking on tile layer here you can see a simple code for adding open state map to the leaflet element let me copy this code and paste it to our javascript file now let me open a web browser and let us see our web page wow it is opening open street map in our webpage i can perform basic functionalities including pan while dragging the map i can also perform zoom in and zoom out using the scroll button in my mouse you can see that leaflet has added two buttons to support zoom in and zoom out when i click on the button on the bottom right corner leaflet has provided attribution as we have mentioned in our code but i am not liking this map as it is very small in area i want the map to fill the entire webpage without leaving any gap at the borders for that i have to do some styling in our css file let me make some changes in css file i am styling body element with margin as 0 and padding as 0. let me also change the width and height of the html body and map elements all at once so let me write the code for that now let us look at the web page you can see how map is filling the entire page and not leaving any white space around it isn't it beautiful friends so you can see the power of leaflet library and its documentation we have followed the documentation and written the few lines of code and it has added a web mapping functionality into our simple web page for now we will stop at this point in the next video we will see how to add advanced web mapping capabilities into a simple web pages thank you for your time please like and subscribe to the channel so that you can receive notification for upcoming videos also share this videos with your friends and colleagues who are into the gis domain see you soon hello friends we have created our first web mapping application wherein we displayed a osm layer using the leaflet it is providing basic functionality of zoom in and zoom out which you can perform through this button as well as through the mouse scroll button now today we are going to add some more functionality to our web mapping application let us look at that what we will do is we will add multiple base layers to our web page so and we will add layers which are like this so that we can switch between the base layers so right now you can see osm layer is switched on now i can switch to stem and watercolor so you can see the base map has changed similarly i can switch to one satellite imagery which is provided by esri so we will add multiple base layers and this layer switching capability we are also going to add india state layers that is coming from jio server wms services so we can also switch it on and off so we are going to add this layer switcher functionality to our web mapping application additionally we will add this major length button to the web page so when we click on it it turns into grid and then i can click on the map at multiple location and you can see that it is providing segment length as well as total length of the line which i have drawn when i double click it it will finish the drawing so you can see this is how the length is available i can click at multiple places and i can measure the length when i click this button again all the graphics will be removed from the webpage so these are the two basic functionalities which are going we are going to add now now let us have a look at the coding part so i am closing this webpage and will start from the page where we left last time so let me open up a code editor so this is our html file where we left last time our javascript file and a style file so we will begin working with html file now to provide the various base layers we will use one of the leaflet plugin so let me come here and this is the leaflet website that we have open we will go to the plugin sections and we will use this base map providers so i'm clicking on that and here we'll scroll down and we'll use the simplest most base map provider that is leaflet providers let me click on that so it is available through github and then we'll scroll down a little bit we are required to download our javascript file which we can plug in into our web mapping application so let me look for javascript file where it is available so it is available here when i click on this leaflet provider.js it will take me to this javascript file now now i can just right click and say save it save as and then i have to provide the path where i want to save it so i am having my application launched in apache htdocs and this is the leaflet so i'll create a folder here say resources and inside that resources i'll copy this leaflet provider.js file so i have saved the file it will be downloaded to my local system so it will it is downloaded now let me go back and let us see how to use this plugin so once we have downloaded we have to provide a path in our html5 so let me give a path here so what we are supposed to write is first of all let me add a comment so reflect providers use a comment and then i'll add a script element reflect provider so this is how i have given a reference to a leaflet provider javascript file which we have downloaded now we can use the functionalities of it so let let me save this html file and let us go to the javascript part now here it is very simple to use so when i want to add a open source layer how to add it let us see so we will come back here and then we will use this preview option so when i click on it it will take me to the new page wherein it is providing various base maps and how to add it to the provider so here you can see it is providing me the code part how to add it to my wave mapping application so let us come back to our code so here i am creating a variable called osm map and then i am using leaflet dot tile layer dot provider this provider functionality is coming from the script which we have added just now so this is the simple code which i have to write for adding openstreetmap layer into my web mapping application i also want to add stem and watercolor so let us come back here so this was the code for adding your openstreetmap now we have to scroll here and then look for stem and watercolor yeah here it is so when i click on this thing it is providing this particular code so i have to copy this and then when i come back to my application i will use visual studio code shortcut to copy this line and then i'll paste this stem in color similarly i want to add world satellite evgd provided by esri so here i'll again look for esri source yeah here you can see yes arrival imagery when i click on that i'll get this option so i'll copy and then paste it here so we have created variables here i am required to change the variable name statement map imagery so i've created three variables i'm using leaflet providers for accessing various base maps now i have just created the variable but not added it into the map right now so what i am doing is in order to have a switching functionality the way we have flown i am not directly adding all this layer to the map but i am creating a variable called base maps so it is a base map variable which i have created and in that i am defining osm layer and setting it the variable osm map other variable is stamin stem and watercolor and i'm using the variable stem and map and third is world immediately and i'm using a variable imagery map so i have defined my base map as a variable which is a group of all these three base layers now last time we have added a gsm layer through this code you can see over here open street map layer so i am removing this particular line i do not require it right now so i am deleting this line because we already have osm and other base my players here now only thing that i have to do is i am creating variable map layers and then i am using leaflet control functionality and in that i am adding base maps and then i am calling the functionality add 2 and using the map as a variable so what it is basically doing it it is adding all the base map layers into the my map and because i am using a base map it will automatically add the layers which are functionality so let me save this what we are going to do is in the last video we have seen that we have created a map variable and set it to view in a single line of code but we want to add layers parameter so that so to achieve that we will modify this code a little bit so let us modify this code as well so i am initializing this map variable and changing some of the parameters i want to have zoom level of 5 when the map is initially loaded and when map is loaded i want to add layers that is osm map so this is the layer that has to be added when i first of all load the map so this is the code which we have modified now when i save it and let me go back to our application and let me refresh it you can see that it has added a layer switcher and all the three base maps which we have added are available in the form of radio button so i can switch between all these three layers so right now osm is the active layer i can switch to stem and watercolor so you can see the map is available and when i switch to world imagery it will reflect the same in the map area so this is how added we have added a layer switching functionality now we will add one more layer that is nothing but a india state layer that is coming from jio server wms services so let us come back to our coding part now in order to add this layer i am defining some of the variable which will be using frequently throughout our tutorial so i am creating a variable so i'm defining a jio server ip port where my jio server is actually functioning so i'm localhost 8085 this is where my jio server application is running i'm defining another variable to identify jio server workspace and that is gis in my case and then i am identifying other variables state layer name so these are the three variables which i have defined in order to access due server functionality and then let me define a variable for geoserver layer so i am using tile layer dot wms for accessing geoserver wms layer and this is the url which we have to pass and now here i will be using those variables into your server right so this is the url which we have to provide when accessing jio server wms services and then there are certain parameters like which is the layers we want to add from jio server so we have already defined a state layer name here so we'll use that parameter which is the format in which i want to load the tiles so i'll define as png format now when there is no data in that particular tile how i want to display the time so i am conveying is transparent and wms version which i want to use that is 1.1.0 tiled true so these are the parameters which i have to pass so we have defined a state layer variable which is accessing jio server wms functionality and these are the parameters for accessing that now instead of adding it directly to the open layers i will create one more variable similar to the base maps layer which we have created here base map variable i am creating a overlamps variable and that this variable is having india states as one of the layer and i will use india state layer as a parameter so this is how we have defined this overlay maps variable now we'll add it to because by default i want this layer to be switched on so i am adding it directly here india state layer if i don't add it here it will be default by by default it will be switched off and when i add it to the base map layers like this so please understand that india state boundary is available in the form of variable overlay maps and i am adding it to map so it will be there but if i don't add it here by default it will be switched off i'll show you practically so we have done the coding part of it now let me go to our web application so now i have refreshed the map and you can see that we have india state boundary layer which is added from jio server and the same is available here also so i can switch it on and off so we have successfully added three base map layers and one overlay layers into our web mapping application now we will add a length measurement functionality it is very much simple we are again going to use a plugin for that so i am copying and pasting this plugin here in my resources folder you can see leaflet polyline measure javascript file and css file i have added it to my resources now when i come to coding part i have to add this thing in my html part so so let me add a comment first of all major plugin and here let me add javascript for that so i have added a reference for polyline major javascript file similarly i have to add stylesheet for that and let me add link length measure functionality so let us create a variable for control measure we will use l dot control dot polyline measure this polyline measure functionality is coming from the plugin which we have added just now and i want to position it top left just below the zooming zoom out buttons and when i place the cursor on the button what tooltip should display that is i am providing here mixer length this is the tooltip that i want and finally i want to add to our map this is a simple code so we have created a control using polyline measure we have provided some of the parameters and finally we are adding it to map let us see how it works let me refresh the web webpage and you can see a button is added over here when i put the cursor on it it is giving a tooltip measure length when i click on it it turns into green and my cursor is now into a crosshair now i can zoom into a particular location where i want to measure the length and then i can measure the length of this road just by clicking on it so i can click at various places and you can see it is providing me the length so it is working excellent now when i click it again it will remove all the graphics so this is excellent length measurable tool you can see that there are not many plugins available with leaflet so i don't have to write code for each and every functionality which i want to provide i can simply use the plugin so in this today's session we have added layer switcher which switches between multiple base layers as well as overlay layers we have also added a user functionality so we will keep it up to this point for today keep watching keep liking and subscribing our videos it motivates us to come out with more and more useful functionality for you thank you hello friends welcome to the fourth session of our leaflet series in today's session we are going to add geojson file into our web map so this geojson file is a india state boundary that is coming from my local hard disk so we will add this file and when we add it for the first time by default it will display it with the default symbology defined in the leaflet so we are going to change the symbology and we will assign color as per our requirement then we are going to add a pop-up to it so when i click on the map you can see it is fetching state name from the attributes so we'll configure this functionality parallely we are also going to configure filter functionality which means that if i don't want to display the entire geojson but based on the attribute i want to display the selected portion of it we can display it for example if i want to display all the states having population greater than 50 lakh so we can display it on the map for the selected states or based on the state name i want to display all the states having pradesh in there in their name so with the pradesh and the pradesh like that only those states will be displayed so let us begin so i have opened up my working folder into my visual code application and you can see working folder is having a subfolder called resources and it is containing the resources which we will require during this development so in the data it is having an india state geojson file and then images is having all required images this is a jquery plugin and these are the other plugins for provider and lens measurement so in the working folder now let us create the three basic files which we require for the development so these are the three basic files which we require for development so we'll start working with index.html and it is pretty simple so i'll use visual code functionality to create boilerplate first and then in the title we will mention leaflet session number four adding geojson so this is a title that we have added now what we want to do is we want to give a reference to the css and javascript files one thing that we have to do is we have to create a development with ids map so we have we are done with our html part now let us come back to style part so i am done with my style part now the most important thing that is javascript part of it let me quickly add some providers and now i am creating another variable for base match so i've created a base map variable and now let us define a variable map so first parameter that i have to give is center so i'm providing it the coordinate where i want it to be centered it is basically the center of india and then when it opens for the first time i want the zoom level to be five and when it opens for the first time i want osm map to be switched on by default you you know that base maps will be displayed in the form of a radio button and one of the radio button must be selected so i want osm map to be selected by default so we have defined the map and now we have to add all the base map to our web page so variable layers so this is where we have completed adding our all this base map to our map so let us see how it is working so let me use the live server functionality of visual code and as soon as i click on live server it will start publishing my application so it is opening a new window and let us see so you can see over here a base map is displayed with a layer switcher control and all the three base match we have added are now able to display with a layer switcher so i can switch between osm streaming color and world imagery so let us keep the osm and you can see by default osm is displayed so we switch on other layers we can toggle now after adding this base map let us add measure functionality i'll quickly add this piece of code which we have learned how to do it this is coming from our plugin in the resources you can see we have a line major plugin so from that plugin this functionality is coming so i have created a variable control measure and then l dot control dot polyline measure and i want the control to be positioned at top left and then when i put a cursor on that when i hover a cursor on that it should display major length as a two tip and finally i am adding it to map so when i save it my page will be automatically refreshed and you can see this is the beauty of live server that is available in visual code that you don't have to refresh page from here it will be automatically refreshed so a major length button is added and you can see i can do the length measurement over the map and it is giving the measurements very beautifully and when i click back on it it will be removed so this is a small three line of code is doing such a great job for us now let us come back to javascript and add code for adding a jio json file to the map so you can see in our resources and data we have india st underscore 4326 dot geojson file name can be anything so here now let us add code for adding a json file now i am using a jquery functionality so when it is fetched it will be available in the form of data so when geojson is files from the server i want to display it on top of the map so i'll use leaflet functionality i have saved the code and let us see how it is working so you can see over here geojson file has been added from the database and it is displayed with the default color that is black that is blue outline and transparent blue filling so it is working perfectly fine and following zoom in and zoom out functionality so a geojson file has been added to our map with default styling now let us add some styling to it so we will go to javascript and here when we are adding a ghsl file we will add a style parameter it is reading a geojson file from the database and then it will display here so you can see over here it is now black and transparent color is also black now we can change if we want outline as black and fill color as something else let us go to documentation part so in the path when we come to path it provides us all the options that we can change so here in fill color we can change it so let us use this so i'm copying this fill color from here and in the style i would return not just color but we will also change the fill color to say red and now let me save it and let us look at the map so again it will read from the database because the background it is refreshing everything reading from the database and then changing the style so you can see now we have a black outline and then red color in the fill with transparence we can change all these parameters like transparency so opacity how much we want or the dash array if we want a dash area of the outline so i'll add a code over here to add a pop-up to it so it is pretty simple so what i have done is i am adding a geojson data while adding i am providing a style parameter at the same time i am binding a pop-up which is coming from the name attribute of the geojson data let me save it and let us see how it works for us so this is where it will refresh the data and it will display the geojson so you can see over here a geojson has been displayed now let me click on any portion of the map okay so it is displaying the state name and state name is coming from the geojson database so let me show you here if i click on the geojson it contains state name as one of the attribute so this is geojson data and see name is the attributes now i don't want to display the name simply just like that we can add a complete html part into this written functionality so let us beautify it a bit but it is just to give you a startup that you can beautify the pop-up window the way you want let me add a simple html to it so geojson is displayed now it is perfect state name madhupadhi so you can stylize this pop-up window the way you want using the html elements and the styling parameters so we have successfully added a pop-up also now what we want to do is we want to filter this thing so let us see how we can filter so let me come back to our javascript so along with our style that we have provided over here we can provide a filter also so what we have done is we have defined a filter so while adding a geogen database i am not only doing the styling but i am also adding a filter which checks that if a feature property name is matching with a string filter so what is the string filter let us define it here so it will match the name if it is matching with pra it means it is having pra anywhere it will return to otherwise it will return false so it will not display on the map let me save it and let us come back to our geo json now at the time of reading the data it should do the filtering so you can see over here we have himachal pradesh uttar pradesh madhya pradesh andhra pradesh and arunachal to this excellent so our filter is working let us change one more time so from pradesh i am changing say raj so it should fetch rajasthan and any other state which is having raj in the name so let us see so excellent it is fetching rajasthan and it is coming up like this so you can do the filtering as per your requirement so let us say p u r so by chance if there is any state having p u r in the name so let us see over here whether it is filtering excellent so let us see what is that this manipur tripura everybody is both the states are having pur in their name so excellent it is working fine now if we don't want to provide this filter we can just simply comment this line of code so if i command this thing so i have commented and now if i see it should fetch the entire geojson file and all the state should be displayed properly so let us see yeah coming perfectly fine so what we have done is in this session we have added a geojson file from the database we have done the styling we have attached the pop-up and we have also seen how to filter it based on the attributes so here if i say pradesh it will display only those states having pra in the name so we have successfully completed today's session and completed all the targets that we thought of so we'll keep it up to this point in the next session i'll be coming out with a live project which in which you will be using all the functionalities we have learned so far in the four session till that have a good time thank you hello friends in the last leaflet session we have added multiple base layer to our wave gis application and we have added layer switcher so that we can switch between different base layers we have also added india states layer which is overlay coming from jio server we have added a major tool so that we can perform line measurement over the map so today we are going to add point line and polygon markers through the code so based on our requirement we we can add point line and polygon to the map we are also going to attach pop-up to each and every marker so that we can display some information as per our requirement so let us continue with the coding part so here this is our javascript and this is where we left last time now when i'm displaying this map for the first time let me refresh it for you it is displaying by default it is displaying this india states layer i don't want to switch it off so that it should be available and i can switch it on and off as per my requirement so let us do that i hope you know how to do that we have added india states layer and to make it by default of i have to delete it from here from the map configuration in the layers so when i delete it and save it you can see over here when the map loads it is available as a overlay layer but by default it is switched off that is how i want it so now let us move ahead with the coding and let me add some code to add point marker onto the map it is very simple in leaflet so i am defining a variable point marker and very simple i have to use l dot marker and then i have to provide latitude and longitude where i want to place the marker so i am providing a latitude and longitude of amdava location this is how i have provided and then add to map it is very simple a single line of code for adding a point marker onto the map now i have saved it and let me see on the map so you can see over here a point marker has been added now i want to change the icon of this point marker so there are various options which we can provide while creating a point marker so let me show you on the website it is providing an excellent documentation which can help you in developing your web gis application very easily so i am going to the leaflet website and in the docs section let me show you over here in marker we are adding a marker so it is giving you the example and the way we have done it it is very simple and then there are various options you can provide icon you can provide the opacity you can make it draggable if you want it to be draggable so there are various options available when we are adding a marker onto the map so you can see draggable boolean so let us first of all make it dragable so what we have to do is we just have to provide some options while creating a marker so here to provide the options and just put comma and then addresses for providing the options so let me enable triggerable option so it is true let me just save it and you can see over here on the map a marker has been added but now i can drag it wherever i want so let me put it here but once i refresh it it will be by default available over here as per our code likely longitude that we ever want but later on when we want we can drag it so we can allow the user to drag it this is the very simplest configuration now if i want to add marker with my kind of eye icon the icon that i want so what we will do is we have to define some variable my icon and it is very simple in leaflet and you have to provide icon url so i'm having an image in my resources so this is the image i am having i'll use this image i can also provide size of it so that it looks appropriate so this is the icon size i have provided now let me save this thing and let me go to the map if i refresh it nothing is happening because we have defined the icon but we have not applied to the marker so let me just set the parameter icon and it is equal to my icon now when we have done this it should work perfectly and you can see over here it is icon but it is of very big size let me see what is wrong with that yes this size has to be capital so when i change it and then you can see icon is appearing on the screen located at amdava and it is of a particular size and because it is draggable i can move it anywhere so we have successfully added a marker with the icon that i want now the way we have added a point marker onto the map what we are going to do is we will add a polygon or line so we will start with a line so what i want is i want to draw a line starting from ahmedabad going somewhere here to delhi and then kolkata so i want to draw a line like this so i should have latitude longitude coordinate of amdava new delhi and kolkata let us see how to add it so i am creating a variable polyline and using a l dot polyline method and then to define the polyline as we have discussed we need pair of latitudes and longitudes so first of all i am going to use latitude and longitude of mdhawa because from there i want to start the line so i'm copying and pasting this and that coordinates and then other coordinates separated by comma so now i want coordinate of say delhi i want this coordinate it is very simple right here delhi black long and this is what i am getting latitude and longitude of delhi so i am just pasting it here and i have to remove this additional things next thing i want to have third coordinate that is for kolkata so i'll say kolkata latitude and longitude so this is how i have added three coordinates so let us keep it this much only and so i am completing the bracket and then i am providing other parameters including color so i want the color to be blue i want the weight to be 2 now simply add it to the map save it and let me see what happens over here you can see a line has been added the way we want starting from mdhawa delhi then kolkata and it is blue in color so it is working the way we want now what i want is i want to have some dash pattern in the line so we will set some parameters over here it is very simple if you come up here in the leaflet documentation let me take you to the polyline so you can see in vector layers in the polyline it is very self-explanatory how to add a line there and then there are various options so we can set all those options and here to set it with a dash pattern let me show you how we are going to set it because in options here there are very limited parameters but still we can set it as a dash pattern because ultimately it extends the path class so if we go to the path class then we can see it has got options for it has got options for providing a dash pattern so if we go to the path and then you can see here so whatever properties of path will be extended to the polyline so we can set the dash array so let me come up here and define dash array and then it takes two parameters one is how much space for continuous line and how much space for blanks area so 10 by 10 so let me save it and let us go to the map and you can see over here our line is now with the dash button so like this you can set various parameters and then accordingly style your line which you have added on to the map so we have added a point we have a data line now let us add a polygon for polygon we require first coordinate second coordinate third coordinate so we will use this three coordinate only in leaflet we don't have to provide the last coordinate to close the polygon usually what happens is when we want to display a polygon onto the screen we have to provide first coordinate second coordinate third coordinate and then if we want to close the polygon we have to provide the first coordinate as the last coordinate but in leaflet it will automatically understand and take the first coordinate as the last coordinate so we have to provide only these three coordinates not the fourth one so let us do the coding for it so now we are going to add a polygon to it so we'll again define a variable only one so we'll use l dot polyglot method and then it is very simple we have to provide these coordinates only because we want to have a polygon made up of this three coordinates and remember we are not providing the fourth coordinate to close the polygon it will automatically close the polygon and take up the fourth coordinate so once we have provided this it will automatically add the polygon so for time being i am making this line and point related code as command so that you can see the polygon properly let me come back to our site and when i refresh it it is not showing because again made the same mistake add to map and i save it and let us see you can see a polygon has been added onto the map now again we want to do the styling of this polygon so let me go to this area and let us do the styling so the way we had done for the poly line you can see over here we can do the same way for polygon as well so color let us say red i want to use a red color weight of the line outer line i want to keep 5 and then again in this case polygon i don't want to use a dash array let it be continuous so let me change it to shade okay now let us have a look at it you can see over here a polygon has been styled according to my requirement now when i am giving the color red over here it is automatically taking the color of outline as red and inside it is feeling transparent red it is by default configuration you can have a different color for inside filling you can even make it hollow without any filling so all those configurations are available through the opacity configuration you can see the fill color so you can have a different fill color fill opacity also you can say change let us change the fill opacity so i am using this parameter and i will change the field opacity to one let us see what happens what do you understand see field opacity is one means completely opaque now we will change it to something meaningful 0.3 and then it is transfer so that is how you can use various parameters you can follow these options that are available and you can use it to style the marker which you have added on the map so we have successfully added point line and polygon so now let me just switch on remove the command from them and let us see how it works so you can see we can see the polygon marker we can see the point but we cannot see the line can you guess why we are not able to see let me tell you in javascript code executes from top to bottom line by line in sequence so if you follow the sequence we have added a marker point point marker first then we have added a line marker and on top of that we have added a polygon so this polygon marker is completely covering the polyline so if we want to display the polyline we have to just copy cut it and paste it just below the polygon and because here the weight is 5 and here the weight is 2 will be able to see both polygon as well as polyline let us see here so you can see there is a dash pattern of blue line which is for polyline and this red color is for polygon feature so now we are able to see point line and polygon over the map so we have successfully added this now what we want is we want to add some marker to it so for each and every point line and polygon we want to add a marker so it is very simple in leaflet what we have to do is point marker dot bind pop-up then you can write whatever you want to write here i am point marker so let me just save it and let us go to the map again point line in polygon when i click on it you can see over here i am a point marker there's a close button so we have added a marker and with a pop-up like this i can simply add pop-up for polygon as well as line so here is the polygon so i have added you know pop-up for polygon as well as line now let us see here so for point i am a point marker when i go to line i am because you know we have having overlapping of polyline and polygon you have to click carefully so when i click inside polygon it is a polygon marker but when i click here i have to see because it is on top of each other so what is polygon marker only we can get polyline marker you can see it is a polyline marker so this is how we have added pop-up also now you can not only write this simple text but you can put the entire html content over here so let me do it for this point marker so rather than displaying a simple text let me write some html so now i have added some html and let us see how it appears on the web page so this is the page that we are displaying now let me click on the point marker and you can see it is m gawad with population more than 72 lakh and literacy rate more than 89.5 89.52 so it is stylized using the html so like this you can have a pop-up with more meaningful information and once it is able to display the html you can have anything uh tabular data or some image or some content so it is very easy so you can do it on your own now let us do one more thing right now these markers are there point line and polygon and and i cannot switch it on and off but i want to switch on and off as per my requirement so let us add that capability also so i am going to this coding part and rather than adding it while creating the markers like here when we are doing add to map let me just delete that so i don't want to add them when i'm creating them i will add them later when i want to add them so i have deleted add to map component so now they may not be there on the map but instead of that i will add it here so what i'm creating is a new variable my marker layer is equal to again i am creating a layer group and here i am i am providing point marker polyline polygon and polyline so i have created a layer group and i am creating one more variable overlay maps we have already created a variable overlapping so i will cut it from there and then i'll bring it here so we will not create a new variable we will use the existing in that we have added india state layers now i will add my markers and then i'll assign this my marker layer group which we have created just on top so i have added that and we will bring this line to the bottom so so it was already there which we have written in the last session so map layers l dot control dot layer so i'm adding base layers as well as overlay maps so these are the overall maps and the base maps which we have added in previous code so i'm adding it to mac let me save it so basically what we obtain is rather than adding the point line and calling on at the time of creation i have defined a layer group and made it available as a part of layer group so here there is a spelling mistake group and then i have added them as a overlay so now let me save it and go to our web application you can see by default it is not visible but when i go to layer switcher you can see we have marker layers when i click it they are switched on and switched off so they are behaving like a layer i can have each and every marker in separate layer at the same time here we have all three markers in a single layers so we have successfully added point line and polygon to our map we have attached pop-up to them each and every marker and now they are behaving like a layer so i can switch it on and off so in this session we will keep it up to this point i'll come out with a new exciting video in the next session till then stay safe stay healthy thank you hello friends today in this fifth session of leflett series we are going to have a live project based on whatever we have learned throughout these four sessions of leaflet so let us see what is there in the live project we are going to create a web page which can be added to a corporate website which is showing locations of the corporate offices branch offices so you can see over here on the left side we have list of locations where companies having branch offices or corporate offices and here on the map right hand side you can see locations of the corporate offices with the beautiful icon so what happens is when i click on this any of the corporate office it will show its location with detail address and contact number so wherever i click it will show with such a beautiful pop-up at the same time if i click any of the office on the left hand side panel for example if i click on new delhi you can see it will fly to the new daily office and then it will open the pop-up like this so wherever i click save for youtube so it will fly to that location and again open a pop-up like this so it is such a beautiful application and many times organizations want to have this kind of a web page in any of their corporate website so this is a simple example but it can be applied to either a company having corporate offices or a bank having various atm locations or a visa outlet or a zumato having their outlets so this can be applied to anywhere so today we are going to develop a project like this so let us begin so in this leaflet folder i am having a working folder in which we are going to create a project at present this working folder is having a resource folder containing various resources like it is having the data which is having office locations in the geojson format it is having image to show the office icon on the map a java query plugin a leaflet resource css file in javascript file and then other plugins for line measurement and leaflet providers so i am opening this working folder into my visual studio code so i have opened it so working folder is loaded with resources the way we have seen all the resources are available now i am going to create three basic files for developing web mapping application if you have attended my previous lectures you know what are the three basic files so i have created these three basic files so we will start with html file so let me quickly add a boilerplate for html so visual code is providing such a beautiful functionality now let me change the title first of all now we will add references to various css files and javascript files that we have stored in the resource folder so let me quickly add those references here so you can see over here i have added references to leaflet css and my custom css at the same time i have added references to javascript file that is leaflet.js and here in this line i have added a reference to our geojson file that is storing offices so like a javascript file i have added reference to it you can see here in data folder i am having office dot js this is the g json file so i added reference to it and lastly i am adding reference to custom script i have completed references after adding references to css and javascripts here we'll create a development because we want to have two panels left side we want to see addresses and locations on the right hand side we want to show the maps so i'll be adding a html code for that for creating two vertical panels so you can see over here i have created a development with class container and within that development i have two sections one is development with class office list it is containing a heading with name corporate offices and other development with id map basically i have created these two elements to show these two particular vertical panels over here so these are the 2d elements which i have created now to show it like this we have to go into styling part so let us open the style.css now before we move to style.css let me use live server functionality of visual code and let us see how it is looking like so you can see over here it is a corporate office and nothing else in our webpage but we want to look it like this such a beautiful page so let us do that so we have defined our entire webpage should be based on border box style and padding and margins are zero so that it will fill the entire page if you see here in html we have created a container development with container class so i'm defining styling for that now i have set the displays flex so that both the development will be displayed side by side like this so now because of live server i don't have to refresh page again and again but right now it is not visible so let me show add the map content first so as you can see i have created a map variable and assigned it certain properties for where to display the center of the map what should be the zoom scale and initially i don't want the zoom controls to be displayed on the map i have also created a tile layer using osm maps and then i'm adding it to map now if i save it and let us see the web page it is not showing the map let us see i have to assign width and height of the map it is not showing the map because we have not defined the extent of map so here i will define how map should look like so we have defined styling for map and office list so you can see over here in html element we have defined styling for container at the same time two vertical div panels office list and map so for both of them we have defined the style over here now when i save it and let us see how it looks like on the web page so as you can see over here this map is about to load let me refresh it yeah so there are two vertical panels now corporate offices and a map how come there are two vertical panels they are coming from this particular line of code we are setting displays flags so there are two vertical lines of course and map area is containing 75 percent of the width and office list is containing 25 percent of the width so accordingly it is displaying over here now let us do one thing let us add all of these locations like this from geojson file to the map i have created a office layer variable and i have used l dot geojson functionality and here i am using office list as an input to l dot geojson function now from where this office list is coming if you see carefully offices.js is entirely a geojson file but at the beginning i have defined a variable variable office list and so i am able to use this variable as an input to geojson so this is a small trick rather than adding a geojson file using ajax functionality if you define geojson file as a variable you can use it in the javascript file so this is another alternate method of adding json file to uh leaflet map now apart from defining a variable as it's using file you have to add it as a reference to your javascript file so you can see over here in our html javascript file we have added a script reference of offices.js which is nothing but our javascript geojson file and then we are able to use this variable which is containing entire geojson file so let me show you over here so you can see all the markers are added wherever there is office and if i show you in the console and here if i write office list then you can see it is an entire json file with all the features and geometry and why i am able to use this thing as a variable because in our coding we have defined geojson file with a variable that is office list and so we are able to use this office list as a variable and it is containing all the office locations and markers in form of a geojson and it provides us the facility to use it directly as a variable which will be added using l dot geojson functionality and i am also using point to layer parameter and i am returning marker at all the locations so as a result it is showing me all the offices with a marker so now i don't want to see this marker i want to have my custom icon for office locations so let me add a code for that so as you can see over here i have created a variable my icon and then i'm using l dot icon functionality of leaflet in that i have to provide icon url of the offices.png that is stored in our resources and images folder and then i have to define the icon size so i am defining 35 by 35 let me save it here in return l dot marker i have to provide a provider icon and i have to use my icon as a input now let me save this code and when we come to map you can see over here instead of marker now it is showing office icons and it is looking very beautiful next thing what i want to do is when i click on this markers or office locations i want to see some pop-up so let us write the code for that so you can see over here on each feature means when every feature is loading into the leaflet map i am calling a function show pop-up and when i'm writing a show pop-up i am calling another function make pop-up content for each and every feature so let us write the code for make pop-up content so you can see over here i have written a function may pop up content for each and every offices and it is returning nothing but an html content so html content is having development in which h4 element is showing office properties dot name so office name will be shown with the h4 type of font and then i am writing office address in a simple parameter type of element and then for phone number because i want to click on the phone number and if i'm using a mobile device it should open automatically open the calling application so for to support that i'm using this hrf a hrf tag element and then i'm writing telephone office.properties.for and then i'm providing that phone number so it supports basically when somebody clicks on that phone number it will open calling application for that so i have written this code and now let me save it and let us see how it works so now when i click on it you can see it is opening up a pop-up the way we want it is doing uh office location in h4 and then showing the address and then you can see telephone number is shown like this now because i am operating from my desktop it will not open uh calling functionality but if you are using it through mobile it will definitely open up a calling application of in the mobile device so we are progressing very good now let us do some styling for this pop-up so let us do that so let us go to the style.css and here we will do styling so that our pop-up should look very beautiful so i have quickly added some code here in style.css you can see uh it is basically to support uh styling for this pop-up content so i have said the padding and margin is zero overflow is written over here and then for the header element h4 element which we have created you can see over here we have h4 element we want to look at slightly bold and with blue black background so here you can see i have given a padding of 16 pixels background of a blue color and then white color text to be the font size of 16 so when i save it and let us go to the map you can see this is how it is looking like but still it requires some work on that so let us we want to give some padding and merging over here and it should look beautiful the way it is looking over here when i click on it see it is having a padding and merging on both the sides and fonts are very decent so let us come back over here i have given a padding and margin to our p element that is paragraph if you see over here so from so here in this paragraph element it is fetching the address so i have given a style to that element also so padding is 0 and 16 px font size i have set as 14 and then margin bottom is 14 px now let me save it and let us see how it is appearing on the wave so when i click on this now you can see there is a decent gap on both the sides we have to provide the same kind of a gap to our telephone number also so let us do that so i have added a simple code varying in the leaflet pop-up content wrapper it is identifying the phone number element and in that i am giving padding as 16 pixels same as you know the paragraph content and then on top i am reducing the padding at the same time we are having a a element in which i am giving the color as blue and i am giving a font size 14 pixels which is in line with our font size of a paragraph element so let me save it and let us go to the map how it looks like now you can see over here whenever i click on any office location it is showing office location in a beautiful manner with address and telephone number the way we want so it is looking perfectly fine only thing that i want to do is i don't want this close button rather than closing it from here we will open up a pop-up like this and if we want to close we'll just click outside so it will be closed so i want to remove this close button now let us do that so i will come to javascript file and here when we are adding a pop-up i will add a simple code to remove that cross button so i have written a simple line close button is equal to false in our show pop-up functionality whenever we are binding a pop-up we don't want to show the close button so i have written a code for that let me save it and let us look at the map you can see and now when i click over here close button is not appearing so it is excellent at the same time you can see over here when i click on a office location it shows the pop-up but it is covering you know our icon what i want is it should show the icon fully and this pop-up should be slightly above so that it is not covering the icon so we have to move this pop-up slightly upwards so let us write the code for that so what i have done is while binding the pop-up i have removed the close button at the same time i have added offset and this offset is zero comma minus eight means it will move vertically upward so let me save it and when i go to the map now when i click on the office location you can see the pop-up window has moved slightly upward so now it is showing the office icon properly and pop-up is appearing on top of the building so it is looking very beautiful so when we are developing a professional website or some web mapping application we have to ensure that aesthetics now we have completed entire work that is required on the right hand side that is on the map area now we have to do some coding to populate this corporate office locations styling of it and then when i click on it it should fly to that particular office location so we have completed coding of right hand side portion now we will do coding for left hand side portion so first thing that we have to do is we have to read geojson file and then populate all the offices here so let us do that so you can see over here i have created a function called populate offices and at the end i am calling that function so let us understand this function line by line so i am creating a variable ul it is which is nothing but an order list and i am selecting all the list elements using a query selector functionality now from office list variable it means nothing but my geo json file so you can see office list this is the variable i am able to use so i am looking through each and every element of that office list variable so i am taking each and every office and then for every office i am creating a list element development a element and paragraph element so these are the elements i am creating and once those elements are created i am adding a class list office item so we will define styling for that to represent each and every of the size term and then for a element i am setting the inner text is equal to name of the office which is nothing but a mobile like this so these are a element why we are defining it as a element because when i click on it i want you know map to zoom to that particular location so we have defined it as a element in our code and then right now we are keeping href as hash and for p which is for the address and here we are defining the content of p element and ultimately we are adding all this element to div so i am using a pen child functionality and adding a element to my div and then paragraph also i am adding to div finally i am adding div element to my list element and this list element will go into um so this is how i have created a populate office functionality and then ultimately i am calling this function so when this function will be called left hand side of area will be populated so let me save it now you can see over here we are selecting a list element from our web page so we have to create that list element which will store locations and addresses of all the offices so we will come back to our html file and here this we set the adding heading we will create a ul element and we will assign it a class is equal to list so this is a simple ul element which we have created and now this line of code is selecting that list element and then populating all the content of corporate offices into that list element at the end of this line so let us let me save this thing and let us see on the map so you can see over here it has loaded all the corporate offices into the left hand side panel but right now it is looking very ugly we want it to look like this very beautiful so let us do all this thing now all this beautification will be done through css so we will quickly move to our css part so i am opening a style.css and here we will do all the magic of beautification so you can see to do the beautification first of all i want to beautify the heading part so i given it a color background color blue and then i have given text color as a white and then i have given the padding of one rem now let me save it and let us see so it is looking very beautiful the way we want so corporate offices now you can see over here all these office locations are clustered and they are not looking very beautiful but we want to separate them so that they look separated like this with a separator line and there is a padding and merging for all the office locations so let us add styling component for that so for office list ul list item i have given a padding and then a style type as a nun let me save it and let us see now so you can see that it has moved slightly towards the right hand side and we have given a space so slightly better let us move ahead now here i have added a code to stylize each and every office item so i have given a margin at the top of one rem and at the border i i'm right at the bottom i'm creating a border with one pixel solid and black color but with transparency of 0.1 and at the bottom also i want a padding of one rem so this will basically separate out all the offices and it will add a separating border also so let us save it and let us look at the map so now you can see beautifully they are separated by a separator line and now they are looking perfect now i want to stylize this office location text so that it looks blue like this in the color and with a slightly bigger font so let me add a code for that so you can see over here in the office list office item and a element i have given some styling so that text decoration is now and i have given a slightly bigger font size with the color blue and then font weight is 700 so they look slightly bold now when i save it and go to the map you can see it is a mumble and it is looking beautiful now i want to give style to this paragraph element so let me write the code for that so here i have added a code for styling the paragraph element again from the office list and office item i have given it the font 14 pixel and color is slightly gray so let me save it and let us look at the map so you can see slightly smaller font and compared to the office location and it is looking great so now it is beautiful but what i am not liking is this fonts i am not liking these fonts i want to use a roboto font from google so what i will do is i will go to fonts.google.com and here i will search for the robot or font and it will list down the robot font so i will click on that again in roboto there are various options 300 300 italic but what i use is regular 400 so when i click on that you can see over here this is the code we have to copy so we have to copy this thing so to use roboto regular 400 we have to copy this thing from google website and paste it to our html file in the css reference so we have pasted this code let me format the document so this is the code for accessing roboto font next thing that we have to do is it is there in the guideline we have to add this thing in the font family so i will copy and i will come to style.css and here when i'm defining the webpage i will use body element and then for the entire body i will assign this font family so when i save it let us come back to our page let me close this thing now you can see it is looking very beautiful corporate offices and fonts are now beautiful at least i like them so now we have done majority part of it now only thing that is left is when i click on it it should fly to that particular office and then it should open up a pop-up so let us add a code for that so here i have written up a function called fly to store and it is taking the parameter as office so when i click on that office what it will do is it is taking the office dot geometry dot coordinate first element now you will be thinking from where this is coming let me show you in the console so let me open up a console so because we have offices geojson in terms of a variable as a office list what we can do is we can use this office list as a variable it is containing all the offices in terms of geojson files so i can go through each and every individual office so if i say office list and its first element you can see it is the first office and then from this office i can go to geometry so this is the geometry part of it and the way i have written over here office dot geometry dot coordinates so when i say office dot geometry dot coordinates you can see latitude and longitudes are available so so when i go to coordinates and i write 0 then i will have longitude and when i write 1 then i will have latitude so i can access latitude and longitude of each and every office using office list as a variable and of any element of that office list so i'll get a particular single office then geometry then coordinates and then first or zero element of the geometry to access latitude and longitude so this is how i am accessing so this should not surprise you so i am taking the latitude of each and every office and i am taking longitude in each and every office and then i am using map dot fly to functionality i am providing latitude and longitude as a parameter i am using a 14 as a zoom scale and i am providing duration as an input parameter so it should take three seconds to zoom to a particular office from one location to other everything fly animation should finish in three seconds you can change this parameter three five ten whatever you want accordingly it will take some time now after flying to that location what i want is i want pop-up to open so if i don't write this set timeout then pop-up will open before i zoom to that location so what i have done is i have defining function and use the set timeout and provided three thousand millisecond which is equivalent to this duration so when i click on a particular office it will fly to that location and fly and animation will finish in three seconds once i am reaching to that office then only this pop-up will open so i have written a code for that so that pop-up opens when i'm already there at a particular office location so again pop-up is using the same parameter i am using close button false and then offset of minus 8 point i am giving the latitude longitude to the pop-up i am giving the content using the map pop-up content and it is over here mac pop-up content this is the function it is calling and so it will ultimately show the pop-up so we have written a code for showing you know flying to the show store but when it will be called when i click on a particular office location in the left hand side panel so let me enable that first of all so far we have written only a function but it is not called so let us call that function so when that function will be called over here so what i have done is when we are creating a populate office function and when we are creating a element for each and every a element that we are creating i have added a event listener function on a click event and it will call this fly to store functionality so this is the code for that so i think we are done with that now i am saving it and let us go to the map now let us come back to the map and now when i click on any particular office you can see it is flying to that particular office and after completing flight it has opened up a pop-up so let me click on another office it will finish the flight and then it will show the pop-up it is behaving the way we want so we have successfully created a web application wherein a corporate website can include this particular page into their website and it can show various corporate offices on their webpage and when somebody clicks on the corporate office it will show a beautiful pop-up like this when somebody clicks on the left panel any office it will fly to that office and then show the pop-up isn't it beautiful many you can use this application for various um requirement like showing atm location for a bank or showing a visa outlet or showing something something else so this is how we have developed a live project so we will keep it up to this point in the next exercise we will come out with some more exciting applications of leaflet and gis thank you for your time hello friends today we are going to learn how to display choropleth maps using leaflet so here as you can see on the map i have displayed a geojson file of india and geojson file is containing number of covert cases in a particular states so in a choropleth map it is showing state having higher number of cases with a dark color and gradually as the number of covered cases are decreasing the color is decreasing its darkness so as you can see over here in the maharashtra and kerala the number of cases are higher so it is showing dark whereas in karnataka tamil nadu and other states the cases are relatively lower gujarat is having even lower and here himachal for this is having the lowest so this is how choropleth map shows the numerical data in range of light to dark colors for a numerical value in addition to that we are also going to have a title area in which if i move the cursor over the state boundary it will show the name of the states and number of cases in that particular state so you can see machi pradesh is having 10.34 lakh cases rajasthan was having 12.75 maharashtra was having 78.58 lake cases so we will also develop the code to display this interactive title area we are also going to add a legion panel over here you can see in the bottom right corner of the map it is having a very good user friendly legion panel wherein it is showing what each color is representing so lightest color is representing 0 to 10 like cases and darkest color is representing more than 40 lakh cases so we are going to develop a code to represent this kind of a legion so isn't it beautiful so let us understand how to develop this kind of a map and if you want to make this map dynamic so what you have to do is you only have to replace the geojson file at the back end and automatically it will reflect the latest data onto the map as soon as the user refreshes the map so it is very useful and it can be useful for many organizations to display various kind of numeric data a population density or literacy rate or any kind of information so let us understand how to develop a map like this so i have open up a folder which is named leaflet you can see over here so i am using visual studio code for developing my application so it is a leaflet folder in which i am developing my application and leaflet folder is containing a resource folder it is having data images and leaflet libraries so for data i am having a india geojson file so it is a state boundary geojson file and you can see over here it is having name of the states here and in addition to that it is having cases as an attribute which represents the number of covert cases in that particular state so this is a geojson file and other than that in resources i am having images and leaflet library so in leaflet i am having css and javascript files for accessing leaflet functionality so we will start developing the application so here in this leaflet folder i am creating three files so you know which are the three files usually we create index.html style dot css and the other one is main.js these are the three files which you created will start with index.html so i will use visual code functionality to create the boilerplate as soon as i write html it will create a boilerplate like this now let me give a title i am giving a title leaflet it is a reflection so this is a title now i have to basically reference javascript file and css file now i have referenced the css file i will reference javascript file also now i am adding this line of a code you can see over here i have added this line of a code so that when i open up a web page i will have a icon like this on the tab so to support that icon i have added this line of code you can see over here we have to add a div element with map id one more thing that we have to add here is as you have learned in the previous section this is where we have our geojson file so we will add json file as a script reference over here so let me add a script and refer to choosen file now what is the advantage of referring geojson file like this we can simply use it as a variable so when i have defined user file in the script and in the geo json file itself i have added a prefix with a variable you can see variable india st is equal when i add this prefix entire geojson file is available in the form of a variable to me when i'll be doing a code in my javascript area so this is the advantage so i have set a reference to our geojson file now that's it for html part now we will move to our map.js so in main.js what i have done is i have added a code for creating a base layer so i am using osm map open state map for a base layer so i have added a code for that and here i am defining a map variable which will use map development for reference to display the map my map will be centered at this particular latitude and longitude initially when i open the web page it will be zoomed at a scale of 5 and i don't want to display the zoom control so i have made it false and this is the base layer which i want to display by default on when i open the webpage so i have kept it in the layers here so this is what we have done now let me save it and let us see how it opens but before i do that i have to define the extent of map in my style file so let us go to style and here i have added a code for styling my map so you can see uh first of all i want the entire html document to be border box pattern and padding and margins are zero for body i have set a font family of this new neeto sense and for map i have given a height hundred percent width and hundred percent height so this is what i have said in the styling so now when i save it and let me use the go live functionality live server functionality of visual code so it will automatically open this webpage and the beauty is that whenever i change the code and save it i don't have to come here and refresh the page it will automatically refresh the page for me so now you can see we have osm map displayed on the map our zoom and zoom out controls are removed so this is what we have configured so far in our code now let us move ahead let us come to javascript file now what we are going to do is we are going to display our geojson file on top of map so let us add the code for that so this is our file here we will add geojson file to it now as you can see over here i have added a simple line of code wherein i'm defining a variable geojson and i'm using leaflets geojson functionality to add india st file into the map so from where india st is coming you know that we have a geojson file and in that we have defined variable india st so i can simply use this variable to refer this entire geojson data so i have used that variable i am adding it into the map let me save it and let us see how it appears on the map so you can see as soon as i have saved my code it is automatically refreshing the map and it will fetch and show the geojson file so our geojson file is displayed with a default color and symbology so code is working fine so far now while adding a geojson file i want to do some parameter adjustments so let us do that so i am adding a code over here what i want to do is first of all i want to style the map when i'm adding a json file to it so let me add a style component over here and set the parameter for style when i add a geojson file first thing i want to do is i want to assign a style so to assign a style i am calling a function called style so i have to define this function right so let us define this function so you can see over here i have created a function name style it is taking each and every feature as an input parameter and then it is returning something so let us understand what it is written for each and every feature it is setting a weight it is setting the opacity to color is gray and dash pattern is none so it will be a continuous outline opacity is set to 0.9 so it it will be almost opaque and then fill color for each and every feature again it is using some function called get color to fetch color for each and every polygon for every state and it is using properties of the state which properties cases from here in geojson you can see there is a property called case so here it is a list of properties and here there is a property called case so to get the color for each and every feature it is using this properties for case and there is a function which will assign the color get color function so let us do the coding for get color function so here this is a coding for get color function it is doing very simple thing it is giving the color value based on the number of cases so let us understand from bottom if the number of cases are less than 10 lakh it will assign this particular color to the polygon feature if the cases are more than 10 lakh it will assign this particular color similarly if cases are more than 2 20 lakh it will give this color more than 30 like this color and ultimately greater than 40 like this color so this is how get color will return the color value and ultimately it will be assigned to a particular polygon state polygon in the style and finally this style will be assigned to a geojson file so let me save this thing and let us see how it appears on the map so let us go to this website and let us see it is refreshing it will fetch the geosystem it will assign the colors and you can see excellent so what we have done is borders are assigned as a gray as we have defined in the code and each and every polygon is having color based on the number of cases so if the cases are more it is assigned some dark color if the cases are lesser it will be assigned relatively less dark color and finally it will have the lightest color for minimum number of pieces so excellent we have done a color coding based on the number of cases so this is nothing but a core of like map now let us add some interactivity to it so when i move the cursor over it it should display it should highlight the feature so let us add the coding for that for highlighting the feature when i move the cursor over it or we will also want to add a title area over here so that when i move the cursor it should display the state name and number of cases in the title area so let us do the coding to support interactivity for each and every feature when we are adding a geojson file over here we will add one more line of code so on each feature whenever each and every feature will be added it will call a particular functionality on each feature so let us define the function on each feature and what it is supposed to do so you can see over here i have defined a function on each feature which will support what should happen when each and every feature is added onto the map so basically it will take feature and layer as the input parameters and for each and every layer it will add the functionality mouse over and mouse out and click so on mouse over it should highlight the feature this is again one more function on mouse out it should reset the highlight so again one more function and on click it should zoom to feature so it is a one more function so there are three functions which we have defined and it should do different things based on my interaction with the map so let us define code for mouse over mouse out and click events so here i have added the code for highlighting the feature it is here for reset highlight feature and zoom to feature based on the interaction with the map so let us understand this course so highlight feature is taking e as an input parameter and then i have defined a variable called layer and e dot target will will be assigned to this particular variable now for each and every layer because when i am moving the cursor i want it to be shown as highlighted so i want to change the style for that particular polygon so i am setting the weight as five earlier it was weight as one you can see the weight is one by default but i am setting the weight as five i am changing the color a little bit dash pattern i am keeping as it is to none and then i am changing the opacity also so this is how it will look like the feature has been highlighted i am just setting the style for that particular feature differently compared to other normal features and then i will bring to front that particular feature and i will also update the information based on the layer properties for time being i'm commenting this line we will come back to this particular line later so this is the code which i have returned for highlighting the feature now let us see the code for resetting the feature so when i move the cursor away from a particular feature it should reset the style of a particular layer and again it should update the information will comment this code and will come back to this line again so it should basically reset the style which was earlier set to 5 it will reset over here when i move the cursor away from a particular polygon and zoom to feature when i click on it so it will take map.fitbounds where it will fit e dot target dot get bounce so e means particular feature that we have clicked and it will take the bounce of it and it will fit the map to that particular bounce of particular feature so these are the three functions which we have defined and when these features will be called then each and every feature will be loaded onto the map this functionality will be assigned and it will be assigned when i am loading a geojson so we have completed coding for that now let us see how it works on the map so let me come back over here again it is refreshing the map reading the data and assigning all the color symbology and functionality so you can see over here when i move the cursor it is changing the weight from one to five so it is thick so we feel that it is highlighted and when i move the cursor away it is resetting the style now let me click on a particular polygon so when i click on a particular polygon you can see it is zooming to a particular feature to the extent of that polygon so wherever i click i click on gujarat so it is zooming to a particular polygon so all these functionalities are working perfectly fine now we will add a title bar here title area so let us do the coding for that so just above the get color function i am adding a code you can see i have added this particular code to support this title area so what i am doing is i am creating a variable which is taking l dot control function so i have created a class for that and assigned to a variable info and info dot on it so whenever this variable will be added onto the map it should perform some functionality so that function is taking map is the input parameter and it is basically creating a div element and it is updating onto the map so this is the function that will create a development now this dot update so what what should happen so info dot update it is again calling a function and it is taking properties as input so whenever this function is called info dot update what it will do is it will send the development internal html to a particular line of code so let us understand what it is doing whenever info update function is called it will change the internal html so first of all it is using h2 element and then covered 19 cases in india this is a static so and what next it is using properties and properties dot name so you can see over here in this geojson file we have properties and properties dot name so here it will take the state name as the input and it will add the state name into the title area and at the same time properties dot cases divide by one lakh so because here you can see in geo json file the number of cases are in absolute values so we have to represent it in lag so we are dividing by 1 lakh so cases will be divided by 1 lakhs that's what is happening over here so it will show the state name and along with state name it will show the number of cases divided by one lakh so in lags and if i am not having a cursor over any polygon then it will give the message over mouse over the state so this is the functionality it is doing so whenever info update function is called it will show this into the title area into this particular development now when this info update function is called you you remember we have commented a line so this is where we are calling the info update function so whenever i am moving the cursor over particular polygon i want to call info dot update feature function and then i'll provide layer.feature.properties as an input to this update functionality at the same time when i am moving the cursor away from a particular polygon i want to clear the content so that i am calling info.update function without any inputs so this is how it will be called so let us see how it works let me save it but before we do do that we have created this dv element with a class info so we have to set some styling parameter for it where it should be displayed how it should look like so let us do the styling for it so i have added a code for styling the info element so you can see over here i am giving padding and then i have assigned the font i have assigned the background color and then i have assigned some shadow box radius so it should look beautiful and h4 element it should be black with some merging and padding so this is what i have done now let me save it and let us go back to our map so you can see over here on the right side corner it is showing covered 19 cases in india and it is also giving the message over mouse over the states let us do it so when i hover the mouse over the states you can see the state values are changing over here you can see the state values are changing and it is also displaying the number of cases in legs so it is excellent isn't it beautiful so we have changed that now finally what is remaining is we have to add legend in this bottom right corner so let us add the legend to add the legend we will go to our javascript file and at the bottom let me add a code for that so this is the code i have added to support legion functionality let us understand it so basically i am creating a variable and using l dot control and i am positioning it in the bottom right corner of the map so whenever legion control will be added what i want to do is i am creating a new element and i am giving it a class in collision and i have created a variable which is nothing but a list and it is having values based on my number of cases and intervals which we have defined so if you can see over here by creating the colors we have defined like from 0 10 left 20 lakh 30 lakh 40 lakh same grades we have to use over here so you ensure that 0 10 like 20 like 30 lakh and 40 lux i am also creating a variable labels an array but it is blank so now what i am doing is i am looping through all the grades values which we have created in this and for each and every grade i am creating a label which will basically get the color so it is again using the same function get color for that particular grade so it will it will be like first grade will be 0 to 10 like so for 0 to 10 like it will fetch the color from this get color functionality you can see over here and it will fetch this particular color for 0 to 10 lakh for 10 lakh to 20 lakh it will fetch this color so it is looping through all the grades and fetching the color so it is assigning a color to a legion and here it is assigning a lesion to a particle it is assigning labels to a particular legend so when it will loop through all these grades it will have number of labels in which there will be different color for that particular range and it will assign a label to it finally here in this code we are joining all the labels which are assigned in this array with a break element so each and every label or legion will be displayed on top of each other like this you can see over here so first we what we are doing in that loop is we are fetching this color and assigning this label pushing it into a label area second color we are fetching assigning these particular gradients and pushing into the label area so one by one we are fetching colors and labels and assigning into the array and finally we are breaking joining all the labels with a break element so it will display on top of each other like this that is what we have done in this particular loop and it will return a div element so legend on add event will add this return will development and finally we are adding a legion to the map so it will display the way we want let me save it and let us go back to our our map so it is refreshing so let us see if everything goes well it should display the legion in the bottom right corner the way we want yeah you can see over here we are having a legion yes but why it is displaying like this because we have to add the styling component for the legion so let us do that let me take you to the style.css here we will add the style for it style for the legends so you can see over here i have defined like for legion it should be text left aligned and what should be the height of the text at the same time for legend i element you can see we have defined legend i element so how it should look like that we are defining over here in the style so i am giving width height and float left and merging and opacity so let me save this thing and now let us go to the map so you can see we have a beautiful legend the way we want so ultimately we have developed a full functional chlorophyt map web application in which all the polygons are color coded based on the number of covered cases in that particular states the map is interactive so when i move the cursor over here it is highlighting the feature it is also showing the state name and number of cases in the title area over here and it is having a beautiful legend so this is where we are completing development of this chloroplast map into leaflet application so i hope you are finding this useful and next time we'll come with more exciting functionalities we'll be developing a heat map using leaflet functionality so thank you for your time hello friends in our last session we have seen how to display numeric data using chlorophyth map here you can see different state boundaries has got different color shading based on the number of covered cases in that particular state so if the number of cases are higher the state is having darker color you can see maharastra is having more than 78 like cases same way if the number of cases are lower the color gets lighter you can see himachal pradesh is having 2.82 leg cases and so it is having a lighter color so this is a wonderful way of showing numerical data onto the map but is there any other way to display same numerical data onto the map yes of course that is proportional symbol you can see over here each and every state has got a circle symbol onto the map and size of the circle or say radius of the circle is proportional to the number of covert cases in that particular state so you can see over here maharashtra having the largest circle with highest radius after maharashtra it is kerala and so on so you can see tamil nadu is having slightly uh smaller circle and here you can see jammu and kashmir is having smallest circle with four point five two leg cases so this is another way of showing a numerical data onto the map and this looks wonderful so today we are going to learn how to develop a wave mapping application for displaying proportional circle symbol onto the map for similar covalent cases so let us jump into the coding part so i am going to my c drive and in that jio server data directory data folder in data directory i am going to www folder and i am creating a new folder which will contain the this entire application i am calling proportional symbol so i am creating this folder and i'm opening this folder with visual code application wherein i'll be writing entire application so this is my visual code right now this folder is empty so first of all we should have resources resources means i need a geojson file which will contain all the states and their code cases details so you can see over here i am pasting a resource folder which is containing data and it is having a covered cases geojson file so let us see it in visual code application so here it has got resources folder in that it is got data and then this is a india 4326 means it is a india state boundary file so it is there to display this state boundary which is displayed with a black color over here and then this is a covered cases details file so each and every state along with the confirmed number of cases and latitude and longitude details so this is the geojson file for covered cases why we are having two files because this this india file will represent the polygon boundary and this covered cases are number of cover cases with latitude longitude this position will be used to display a circle symbol so this is in data in images we have got simple image and this is a leaflet library which is containing javascript and css file so let us start writing the code so to write the code first of all we have to create three basic files so we'll start with index.html so i will create a boilerplate for that so this is a visual code shortcut now here i have pasted a code this is the code to display a particular icon so when i open up a tab it will display icon like this so there is a cool line for that and then i am referring to leaflet.cs i have given a reference to that and then my particular style css which we have created here so there is a code for that now here we will give reference to javascript files so you can see over here i have given a reference to a geojson file which is containing uh code related data there is another geojson file which is containing a state boundary and then i'm giving a reference to leaflet javascript file and then there is a main.javascript file in which i'll be writing the code so this is a simple html configuration here one more thing i have to do is i have to create a div element with id as map so i've created that so my html side of coding is done now we will go to the style.css you can see i have pasted a code for styling it here i don't want any spacing on the edges or sides so i have given a padding zero margin zero i am using a particular font family for the entire map body and then this is the height and width hundred percent so that it fills the entire screen so this is the styling part of it now we will go to the main coding part so in javascript we'll start writing the code i have quickly pasted a code you can see over here in lift first of all i am creating a base layer which is nothing but a osm open state map and this is the attribution for that so i have created a base layer variable and then i am creating a map variable and through l dot map method i am initializing that and it will use map development to display the map content map will be centered at this particular altitude and longitude initially when i load the application the map will be zoomed at scale file and then i don't want to see zoom in and zoom out control so i have given it a false and then layers is a base layer which we have created here so this is a basic configuration so once it is done let me save it and let me use the live server functionality to run the application so now it is opening up my application so basically it should display this osm app so yes it is working perfectly fine now let us move ahead now what we want to do is we want to display the state boundary geojson file onto the map so let us start with that you can see over here i have created a geojson style function which is taking feature as a parameter and then what it is written it is returning stroke as a true it means i want to display the outline i want to display the outline with black and weight should be 1 and field is false so i don't want to fill the polygons so it will be hollow polygon with a black outline and now here i am creating a variable geojson and then i am using l dot geo json functionality and i am providing india st as an input from where this india st is coming if you have seen my previous lecture uh you can very well understand that but let me explain you again in the resources in data in india states we have entire geojson file for all the state polygons at the same time we have created a variable to represent the entire user so india st is defined here and from here they are using the same variable so and we are giving a style as geojson style the function which we have defined here and at the end we are adding it to the map so let me save it and let us see how it is displaying so it is refreshing every time when we save it it will refresh the application so you can see over here now we have state boundaries with a black border and it is not filling inside so it is a hollow boundary it is the way we want it now let us move ahead now what we are going to do is we will add another geojson file which is nothing but a point file this is the point file and we want to display the symbol with the size of number of cases in this particular uh state so let us use that so you can see over here i have added one more line it is nothing but the same as previous line i am adding a geo json file but this time it is a different geojson file with a variable covered and i'm adding it into the map so let me save this thing and let us see how it appears so it is refreshing the application so earlier we have added uh state boundary file and now we have added another geojson file which is nothing but a point file so you can see it has been displayed with the default marker symbol so all the points are displayed on through the map now let us change the symbol of this marker it should display the circle symbol and psi should vary based on the number of kovid cases so let us see how to do that so now when i am displaying this geojson file i want to assign certain wave parameters like i want to convert point to the layer and then it should execute a function which will take feature and let long as a parameter and what it will return it will return a circle marker circle will be placed at a particular latitude line longitude and circle will have a style based on this function style so we will define this function style at the same time when each and every features are loaded onto the map it should also execute a function on each feature so now we are going to write coding for style function as well as on each feature function so let us do that now you can see this is a code for a style feature so what we are doing is basically when i am loading a geo json file i want to call a function that function will return a circle marker and it will style the circle based on the style function so this is that style function what it is doing it is written in a circle with a radius it is retaining a circle with a radius now you can see feature dot property dos case is divided by 15 lakh so what it is doing because the number of cases are very huge and if i display the circle with the radius of that particular cases then it will fill the entire world so what i am doing i am dividing the number of cases by 15 lakh and that will be the radius of the circle the circle will be filled with a particular color and it will have stroke is equal to false so it will not have outline the outline color is anything you define but when there is no outline it this does not make any sense the weight will be one opacity is 1 so i want to make it completely opaque and then fill opacity is 0.08 so this is how i have defined the circle so it will follow this style now let us define this function on each feature so let me first of all save it and right now if i comment it let me save and let us see on the map how does it look like so you can see over here uh each and every state has got circles and it is coming from that particular markers and now the symbol of the marker has changed now it is a circle with different size and you you know that size of the circle is dependent on the number of covered cases in that particular state so it is looking very beautiful now let us make it somewhat interactive so when i move the mouse over that it should highlight that i have mouse on this particular circle and it should display the state name as well as number of covered cases so let us do the coding for that so now we will define this on each feature so you can see i have created a function on each feature and what it is doing it is using the layer dot on event and then when i move the cursor over it so when there is a mouse over it should highlight the feature when i move the mouse out of that feature it should reset the highlight feature so we have to write these two functions so when it was calling this to highlight feature and reset highlight feature so i have created those functions highlight feature and reset highlight it is taking e as a parameter now you can see i am defining a variable layer e dot target is input to this layer variable and now i am defining the style of the layer so layer dot set style what i am doing is i am making a stroke is equal to true so it will have some outline outline width will be 3 that will be some color of the outline so i am giving it 666 i don't want it to be dashed i want it to be continuous and fill opacity remains same one so i have defined the style of the layer when i move the cursor over it so this is what i have done right now i am making this thing as a comment we will understand what is that now when i move the cursor out of the feature it should call reset highlight function which is nothing but this so it is resetting the time style to previous because here we have the change the style now here it is resetting to style to default info dot update again i'll make it comment now let me save it and let us go to the map let it refresh because through visual code when i save it it will automatically refresh now you can see when i move the cursor over a particular circle symbol it will highlight the circle it is exactly the way we want it now let us have some information window over here so when i move the cursor over here here in this right side corner it should display the name of the state as well as number of cases so you remember we have commented this by two particular lines now it is time to you know remove the command but first of all let us define the info variable so i have added a code you can see i am defining a variable info which is nothing but a leaflet.control and now when the info control is added so on add i am calling a function what it has to do is it has to create a new div element and it it will return this div element now info dot update whenever that function is called you can see over here i am calling info dot update function so let me remove the command over here at the same time remove from here so now whenever info dot update function is called it will change the internal html what it has to do is it has to update a content of development with h2 element saying that covet case is in india and it also has to populate properties dot name so here it will display the name of the state at the same time it will also display the number of cases in lags so here i am dividing actual number of cases by one lakh so this is what it will do now when i move the cursor out of the feature it has to say that over mouse over the state so this is what it has to do so we have created an info variable which is nothing but a control and we have added it into the map and it should display content when i'm moving the cursor over the info and here i'm adding it into the map now we want to define the style of it how info control should display where it should display so we will go to style.css so i have added a code for info control styling you can see over here i am giving some padding i am defining the font i am giving the white background and then i am giving the box shadow and box radius for h4 element i am giving some margin and color it has to be black so this is the info control now let me save it and let us go to the map so you can see over here it is displaying covered cases in india so this is nothing but info control which we have added and it also giving the message over the mouse over the state so let me do that now as soon as i move the mouse over here you can see the content is changing here so it is maharashtra 78.58 like cases and now if i move the mouse here uttar pradesh so it is such a beautiful interactive map so this is how what we have done is we have created a proportional symbol kind of a map using leaflet library so isn't it beautiful so we will keep it up to this point thank you for your time hello friends today we are going to see the most exciting application that is routing application using leaflet so here on the screen if you see i have a starting point at a bangalore location and destination point at a himachal pradesh location and system is giving me two different routes one root is shown with a red color that is primary root and the other is alternate root shown with a blue color at the same time on the right hand side panel there are two input boxes showing starting point at a bangalore location and destination point at a himachal pradesh location along with that it is showing that primary route is about 2 486 kilometer which will take 30 hours for me to travel and it is also showing me turn by turn root navigation so like google it is showing turn right turn left even it is showing take round about exit you can see over here and as i move the cursor over here it is also showing me indication on the route so this is about primary route what if i want to see the secondary route or alternate route it is just below that so i can either click here on the navigation panel or i can simply click on the map so let me click here so now this route becomes a primary and you can see the turnbutton navigation for that here my secondary route or alternate route is about four hundred and seventy one kilometer which is less than earlier primary route but it will take 31 hours due to certain road conditions so this is how it is showing me navigation information now what if i want to change starting point or a destination points there are multiple options one way is to enter the starting point here say for example i want to start my journey from ah so i will type the about here and press enter so my geocoding application will find amdavar location and then as i click here you can see here the source or starting point has changed from bengaluru to amdahl and now system is showing me routing from m dhaba to himachal pradesh similarly if i want to change the destination point i can type down here at the same time i can simply drag the destination location from amdah to kolkata and system will read out and show me the roads from endeavour to kolkata here it is showing primary route as well as alternate route so isn't it exciting it is such a user friendly way to provide source and destination points at the same time if i want to go from amdava to kolkata through quarter so i can either add the in between points from here or i simply have to click and drag and put a point here say it quota so you can see it has added a pointed quota and now entire route is showing from him dhaba to quota and then kolkota so wherever i want to add intermediate points i just have to click and drag and release the point wherever i want to keep the intermediate point so if i want to have a destination between amdava and quota i have to drag from here or else i have to drag from here so for example if i want to go from quota to kolkota through for example patna so here i just have to drag and drop here at katna and now it will reroute the application isn't it beautiful it is such a user friendly way to add in video in between points there is one more way to change start point and end point that is just by right clicking on the map so rather than starting from ambrawa if i want to start from mumbai i will just put a cursor at mumbai right click and i would say start from here so you can see it will change entire route from mumbai to kota to patna to kolkata similarly if i want to change the destination point rather than kolkata if i want to have cut up so i will right click and say go to here so there are multiple ways to enter start point end point and a very user friendly way to enter intermediate points so this is such an exciting user friendly and most useful routing application so in today's session we will see how to develop this kind of application i'm sure you are excited to have this kind of application in your web gis system so let us see how to do it so as you can see on the screen i have created a routing folder in my jio server data directory and ww folder so this is a routing folder in which i will be developing my application inside the routing folder i have certain resources which will be required for me to support this application so inside the resources i have leaflet folder which contains leaflet javascript file and style libraries and certain supporting images that comes with leaflet on the other side we have plugin in that i have geocoder plugin context menu plugin and routing machine plugin so these are the three plugins i'll be using so that's it inside my routing folder i have resources and lifter leaflet and plugins so what i'll do is i'll just open this routing folder inside my visual code application so as you can see now my routing folder has opened inside the visual code application and it has got resources folder now what i'll do is i'll create three basic files for developing applications i have created these three files index.html main.js and style.css now let us go to index.html so it has created a boilerplate for html file i will change the title to leaflet routing machine and now because we have certain resources here i have to provide references to those resources in my application i have provided references to my css files similarly i have to provide references to my javascript files so let me do that i have provided references to my javascript file as well now i have to create an element development with id as map so that's it on the html part now we will look at the style size now you can see over here i have a provided style for body as well as map elements because i want my map to fill the entire screen so i am giving padding and margin as zero for the map also i am giving hundred percent height and hundred percent width so let me save this now we will go to javascript side here you can see i have provided basic code on javascript so i'm basically creating a variable base layer and i'm using l dot tie layer for creating the instance and i am creating an instance for open street map layer so this is the variable for that here i am also creating a map variable and i am using l.map for creating the instance and then i am providing centroid into input parameters like i am giving the center latitude and longitude i also want my map to be zoomed at five when i initialize the map i do not want to see the zoom in zoom out controls which are default so i am removing that by giving the false input and then i am adding a layers that is the base layer nothing but osm so i have configured my basic javascript file so now my html file style file and javascript file are ready for basic now what we should expect is my application should display osm layer so let me open the application so i am opening the application from so it is opening the html file so now you can see over here it is showing a basic osm layer now let us go ahead now what we will do is we will add some routing dialog box over here to add the routing facility i have added a variable that is control and i'm using l.routing.control class to create the instance and here i have to provide certain inputs first input is a waypoint that is my starting point and ending point so this is my starting point that is the latitude and longitude of bangalore location and this is my ending point that is latitude and longitude of himachal pradesh so this is the way point one of the input second is i want the system to show alternative routes so i am providing input as true and if it is showing alternative route by default it will show with the red color only which will match with the primary route but i want the alternative route to be shown with a different color so i am giving that style option so i want it to be shown with a blue with a white background and black outline so this is the style for alternate route and now i am adding this control to the map so let me save this and when we go to the application let me refresh over here let us see how it opens so you can see it has added starting point and ending points two markers and now it is showing the roots from bangalore to himachal pradesh primary root with a red color alternate root with a blue color and here on the right hand side it has got navigation dialog box so i can move the cursor over here and you can see on the map it is showing me with a blue dot and turn by turn navigation turn right turn left slide right slight left everything it is also having alternate routes so if i click over here it will show me the navigation for alternate routes and here alternate route is marked with red now so this is how it is working perfectly fine now what we want to do is we want to have input box over here so that if i want to change the source and destination from this input box i can do that so let us add that input box over here for adding uh input box i simply have to place a comma and say this geocoder as input and it will use dot control dot geocoder neonative as an input so this is the line i have to add and basically inside it is using this plugin that is control.geocoder.js through that it is providing that functionality so let me save it and let us go to the map let me refresh over here and you can see now i have inputs start point and end point and now it is showing me the navigation so now once these two boxes are added i can now change the start point say ahem gaba and when i press enter it will perform the geocoding in the backend and it is providing all the matching inputs when i click any of them my start point will change and now automatically it will do the routing isn't it very easy i think you can anybody can follow this guideline and add this kind of a functionality to the webgs application similarly i can change the destination also so if i change destination to kolkata and press enter you can see it is providing kolkata as input and now source and destinations have changed now by default it is providing me the option to add in between point so now if i just click here and drag it to new delhi my entire route will change from ahmedabad to new delhi to kolkata and you can see here there is one more entry so amdah so new delhi to kolkata so it is a very useful functionality but what i want is my start point should look green end point should look red and in between point should look yellow so let us see how to do that for adding this marker styling functionality what i have to do is i have to provide one more parameter inside the control variable so i'll just click here and you can see i have added the code this is the entire code for having a style marker so this is the code so what i have done is i have i am providing a create marker parameter and i am calling a function that function is taking three inputs i is basically the index of the marker or index of the waypoint waypoint is the in between points and n is the total number of points in the root so if it is just a source and destination then n will be 2 i will be the index of the point and way point is total number of points so now you can see here i have defined icon for start icon so this is the icon for that so i will be using green markers marker dash icon dot green dot png so that is the marker i am using so i am giving that url i am giving a shadow url i am setting the size of the icon anchor pop-up anchor and shadow size so basically these are all configuration for icon so this is for start icon similarly for in between icon i am setting it as a yellow and for destination icon i am setting it as a red and others are similar configuration parameters for setting the icon size and orientation so i have given start icon in between icon and destination icon now i have to provide the logic if i is equal to 0 means if index of the waypoint is 0 then i want to show start icon if index is from 1 2 n minus 1 that is the highest number of last marker so it should show in between marker and then if i is equal to n minus 1 then it should show destination marker so this is the logic i have provided and then now i'm creating a marker variable and then i'm setting the parameter like it should be draggable it should be bounce back and it should have some duration while bouncing back and basically i am setting the icon as a marker icon this micro marker icon is coming from this logic right so for start point it will be green for distinction it will be red and for in between points it will be yellow so basically this is the function which will provide those functionality of styling the icon so now let me save it and let me refresh it over here so you can see a start icon is green a destination icon is red and then the other routing applications and this routing dialog box so isn't it beautiful now what if i add some in between points so let me add some in between points over here so you can see automatically it has added a yellow because it is following my logic this is i is equal to 0 this is i is equal to n minus 1 and these are in between points so isn't it beautiful so we are able to add this functionality to the webgs now the only thing that is remaining is adding a context menu let me see if we if i am able to drag this point and change the start and end points yes i am able to drag this thing and i can change any start and end points and you can see it is showing me the updated navigation so i can drag and drop any of this marker from where it is coming it is coming from this particular configuration draggable is equal to true so we are able to do this thing now let us add a context menu over here for adding the context menu let me just scroll up and let us come here now from where the context menu functionality is coming it is coming from this plugin that is leaflet.contextmenu.js so this javascript file is providing that functionality so basically what i have to do is just press enter into this map variable configuration and add these parameters so i am setting context menu is equal to true width of the context menu should be 140 pixels and then context menu items what it should show it should show first item as start from here second item go to here and when i click that it should call this particular function start here and go here so we have to define what it should do in start here and go here so let us define that so i am adding some code over here you can see it is a simple start here and go here function now when i start it should take the control as a variable and then splice the points so it should enter some waypoint at a 0 index and this is the latitude and longitude so that is what it should provide it will take the e dot lat long as a latitude and longitude and so it will insert the start one similarly it will take uh same e dot let long for providing the end points the only thing that is changing is here i am adding start point as a zero index but here for adding the end point i have to take all the waypoints and then i have to insert the waypoint at the end so this is what it is doing so it is adding the waypoint at the end so it will become the destination point now there is an issue here i am using the control variable first but it is defined after that so i have to copy this code so i am removing this code from here and put it after the control variable so i am putting this code over here so that control variable is available when i am calling it so let me save it and let us go to the application let me refresh this now let me do right click here and see start here and go here available now if i click start here you can see the start position has changed and entire routing has changed i can also click the go here and my destination has changed and routing is also reflecting that so excellent everything is working fine so far so what is left now let us see here in our application what is left if i run the application it should show me such a beautiful spinning animation when it is doing some processing at the bracket so you can see over here if i change the source and destruction it is showing a spinner when it is doing some background activity in our case it is not showing the spinner as of now so let us add that functionality so that we can have a spinner to show the spinner first of all i'll go to index.html and i'm creating another div element with id loader so i have created this development now i will save this thing and i'll go to style.css and here i will define how my loader should look like so you can see the style parameter i have provided i want it to be positioned absolute and i want it to be shown at the middle of the screen so top is 50 left is 50 and i am giving some margin top and left so that it is perfectly at the center i want it to be displayed on top always so giving that index and then these are the parameter for providing those colors so blue red yellow and green these are the colors it will show and then width and height i am giving 50 pixels and then this is the animation parameter so it should basically spin every two second and then linear and infinite so what it should happen in speed it should transform from zero to hundred and zero degree to 360 degree so this is the spinning parameter so i have configured my loader now when it should show the loader not every time so right now if i go to the application and if i just refresh it it is showing me the loader you can see it is showing me the spinner but it is showing me everything but i want to show it only when it is doing some processing so let us go to the code and change that right now you can see it is showing every time so this will remain always on the screen irrespective of background activity so let us change that behavior so i will go to the javascript now where i change the behavior i will provide some configuration to this control parameter control variable so now let us come here when i am adding the control to the map before that i want to add these two lines so you can see over here when control is doing the routing application when means when it is starting the routing it should show the spinner when it has completed the routing application means it is founding the root or there is some error it should hide the spinner so basically spinner will show only when it is doing processing at the back end but then i have to define those functions show spinner and hide spinner so let us do that so here i have defined two functions show spinner and height spinner as per our requirement it is doing nothing but uh setting the display parameter to block and none as for their functionality but here it is using a variable spinner so you can see over here by default the spinner is true and then it is using this variable if the spinner is true it should show the block if the spinner is calling the hide spinner function then it will set it to none let us see how it works now let me refresh this application so it is doing the showing the spinner now when the routing is completed you can see the spinner is hidden let me change the source and destination spinner is available and now it is hidden but there is one issue if i do the zoom in or some zoom out activity you can see the spinner is showing i don't want to show the spinner when it is doing zooming and zoom out because otherwise it will remain there forever and it will not go so i have to do some configuration in javascript let us do that so i am adding two lines so what i am doing is when map starts zooming in it should set spinner variable to false so if the spinner variable is false it will not show the spinner through this line and when map has completed zoom activity i am setting the spinner as true so if the spinner is true and routing application starts then only it will show the spinner so it will solve the our problem of showing this winner every time i do zoom in and zoom out so let me save it and let us go back to back refresh it now it is showing the spinner when it is doing the routing so routing is finished so spinner is removed now if i move the source destination it will show the spinner and it will hide the spinner when it is done but let me zoom in excellent it is not showing the spinner when i'm doing zooming and zoom out it will show the spinner only when i am changing the source and distinction and system is doing something in the background now it should hide excellent let me add some in between points and now spinner is hidden when it has completed the routing back and processing excellent it is working fine so slowly and gradually we have added such excellent beautiful functionality into our web mapping application it is a routing application that everybody wants to have in there with gis application and it is working perfectly fine it is very much user friendly and let me tell you it is very much accurate also i'm sure you are excited and want to add this functionality to your wave gis and i will provide the source code for this and if you follow my video line by line and if you write along with me you will be able to add this functionality to your webgs application thank you for your time keep watching keep subscribing and share with your friends and colleagues i'll come out with more such exciting videos thank you

Channel: GIS Simplified

Views: 21,281

Keywords: GIS, geoserver, opensource, arcgis, esri, openlayers, wms, wfs, web mapping, leaflet, shapefile, qgis, geonode, freelancer, GIS analyst, GIS operator, gis jobs, webgis, development, gis professional, project management, geodatabase, GeoJSON, postgresql, postGIS, location intelligence, location based services, location allocation, geoprocessing, spatial query, attribute query, feature info, select by attribute, select by location, proximity analysis, overlay analysis, career development

Id: urOfcs7n4bA

Length: 175min 44sec (10544 seconds)

Published: Thu Jun 02 2022