0:00 Video topics and introduction 1:35 Leafletjs basic setup 8:45 Leaflet Tile layer 15:33 Leaflet marker 25:06 Leaflet layer control 33:47 GeoJSON data in leaflet 49:57 How to load other data type (SHP, Tiff, WMS) 57:13 Leafletjs events (mouseover, mousemove etc) 1:05:04 Styling leaflet components
I was so stuck for not being able to register for google cloud to get the map service and without it whole my project was down.But you came in the way and saved my project brother. Thank you so much you are a real life saviour.Much love frlm Sri Lanka.Wish you all the best for your future❤❤
Leaflet.FileLayer loads files (GeoJSON, GPX, KML) into the map using the HTML5 FileReader API (i.e. locally without a server). Leaflet.FileLayer can you make a video about this process?
I just found your channel and I'm excited to explore more of your videos regarding leaflet. Your instructions were pretty clear and easy to understand. I'm making an interactive map using my own layers with data in it. But I'm stuck with how I'm gonna create a feature where the user can input any numbers on the website and that number will determine the amount of area divided by color. For example, when the user inputs number 5, then there will be 5 different colors dividing the area based on existing data in each region (the data : 0-5, 6-10, 11-15, 16-20, 21-25). Please, could you give me some pointers or tutorial ?
Awesome tutorial ! Thank you ! Is there a way to add a button on the map, that moves with the map , like the polygon does ? Once clicked on the button , send user to another page .
Great tutorial is it possible to make a separate video for different types of filters on map showing like check box, combo box to get the gejson features automatically in such controls and show the map.
i need to make a interactive map , it changes a specific marker icon when someone donates , its a donation for planting trees and the markers changes from icon to an icon (the other icon is a tree icon) , is this possible ? how ? and how can i let the donator add pics on the marker? like when click the marker i can see pics that only the donator can add to this specific marker
You have to add the style parameter on the geojson object something like this; L.Geojson(data, { style: {color: "red", fillOpacity: 0.5} }).addTo(map);
@@geodev how to change color for geoJson properties, example : I have geoJson properties NAMEOBJ I will change the color red for NAMEOBJ.India The color blue for NAMEOBJ.indonesia Maybe using array and object ?? Please how to code this case
It should work with SSL. There is no any such error. If you can not fix the problem, download leaflet.css and leaflet.js file from leaflet official github repo.
Then why my developer said to me leaflet is not working with ssl and I stopped my work only for the reason. Please provide me link that shows leaflet support ssl certificate so that I can show them to fix the issue.
Hi, it's possible to get current location when mobile screen off using leaflet, like delivery person location displaying to customer even the person in driving
Hi Azarudeen, I am not entirely sure, how the location information is shared via mobile. But I got this explanation, can you check it? stackoverflow.com/a/21146876
Yes It is possible. You can use the onClick event on map. For more info, visit the leaflet documentation: leafletjs.com/SlavaUkraini/reference.html#map-click
Hallo... I would like to use overlayadd to know the array id of the elements on the overlays to use it with mysql... I tried with map.on('overlayadd', function (e) { pathid = e.layer._leaflet_id; alert(pathid); }); but i don't understand why it gives me ids that are not part of the array. Thanks @}-,-'--------- Gianfranco
Hello sir, Can you inform me how I will read data from the multilayer when someone clicks on it, I have 2 GEOJSON files and it's like the overlayer base map is an open street map. Already projected just I need some different information layer bases.
@@geodev user click one time I will get 3 layer date? it's over layer 3 . is there any link or example? another thing is how to handle large geo JSON like 200-300MB
@@Webspreed for large geojson, watch this tutorial: ua-cam.com/video/xerlQ3tE8Ew/v-deo.html About your first question, I think you need to write a nested click event. I don't have any examples right now.
The required section is explained clearly here: geoserver-rest.readthedocs.io/en/latest/how_to_use.html#creating-and-applying-dynamic-styles-based-on-the-raster-coverages. Please have a look and let me know still if you have an issue.
Great stuff. You could make it more concise by not explaining things unrelated to leaflet, e.g. how remove default html margins, or explaining order of execution of lines of code.
For certain region, I also feel like leaflet is more easier than openlayer. Only the issue with leaflet js is now the issues on github are increasing. And no one is properly maintaining the code.
@@geodev sir pls help me in layer switching ,,i have first layer representing roads and second one is representing water bodies ..these two shape file data is showing on my map ..i want to add functionality of switching between both of them by adding radio button or checkbox
To find out the current position, you can use HTML Geolocation API. I have created the video, you can check here: ua-cam.com/video/8KX4_4NK7ZY/v-deo.html
Bro I need a solution. I want to load a file of 100+ MB of geoJson file. It takes a lot of time loading. How can I load it faster and is there any way to partially load or something like that?
The simple answer is use WMS using map servers such as geoserver, mapserver etc. First of all you need to convert your geojson data to shapefile. After that you need to load it to the geoserver and get the WMS. If you don't know how to do that, watch my video tutorial on geoserver here: ua-cam.com/video/vL6kgJmOCxg/v-deo.html
You say latitude and longitude but that is not really what leaflet uses. It goes crazy when crossing the dateline. Polylines need to be extended past lng 180 in order to work properly. That's not lat lng.
I don't know which part of the video are you talking about. But generally leaflet visualize the data based on the latitude and longitude of the feature geometry.
@@geodev One would think. It appears that way at first glance with simple examples. Try to draw a polyline from Japan to California. It can be done only if you extend longitude past 180. Longitude bounds are 180. If you do manage to draw a polyline it appears or disappears as you move the map left/right over the dateline. Show a map with arctic and antarctic on it. Given the proportions you will need to double up the map features on the left and right. Try to add markers in those far areas on the left/right. With lat/lng the marker will appear on the left or right side only. If you add a marker past 180 the system will let you. When you click and access lat/lng it an error will occur.
@@geodev for example a map has many tiled markers. And I want to select those and get the data of those markers. That's what I am suggesting. I have implemented it in my ways. But I think you can do it in better ways than me.
@@jivtheshm.r1784 The tile layer comes with the default style. We can't change it through the leaflet. But if you want to generate the costume tile layer then you may need to check the Mapbox tiles. Please check the Mapbox studio here: studio.mapbox.com/
0:00 Video topics and introduction
1:35 Leafletjs basic setup
8:45 Leaflet Tile layer
15:33 Leaflet marker
25:06 Leaflet layer control
33:47 GeoJSON data in leaflet
49:57 How to load other data type (SHP, Tiff, WMS)
57:13 Leafletjs events (mouseover, mousemove etc)
1:05:04 Styling leaflet components
You're video is a epitome of superior education. You are a wonderful teacher.
Wow, thank you very much! Glad you liked the video!
I was so stuck for not being able to register for google cloud to get the map service and without it whole my project was down.But you came in the way and saved my project brother. Thank you so much you are a real life saviour.Much love frlm Sri Lanka.Wish you all the best for your future❤❤
Glad I could help! Happy coding!
@@geodev 💌
This is really very informative. Spacial for those who start GIS Web developing with leaflet & Javascript.
Thanks for making this video
Glad you liked it.
Thank you for your explanation. You have given me a clear overview of Leaflet.
Glad it was helpful!
Thank you for taking the time to make this.
Glad it was helpful!
Awsome tutorial tek ... You clearly explain all the stuff needed to up and running with leaflet.
Glad you liked it Sasanka!
Very instructive video, it was perfect for a total beginner like me! Thank you! :)
You're very welcome!
Good introduction .. it gives me envy to follow all the others video about leaflet... thanks
Glad you liked it! I hope all videos are useful for designing the better webGIS portals.
Very useful tutorial mate, better than Leaflet js crash courses in Udemy, thank you very much...
Glad you liked it!
So helpful! Absolute banger of a tutorial. Thank you!!!
Glad you liked it!
This really helps me with my capstone project, thank you !
Great to hear!
Dude. You're a god. God bless you man. You rock.
Great! Glad you liked it!
Really awesome tutorial. You are amazing! Thanks for sharing your knowledge.
Glad it was helpful!
Very good beginner tutorial, I appreciate it!
You're very welcome!
You are good at explaining stuffs dai. Thank you much for the tutorial.
Always welcome!
I am glad you liked
I call this leaflet docs on steroids,
Thanks buddy,
Subed
Great!
very informational and thanks a lot for taking the time to create this for educating others! 1 hour is a long long time!!!!
You are welcome 😃😃 I am trying to explain all the basic things required for leaflet js that's why it is little bit longer
@@geodev yep yep I was appreciating you spending 1 hour to create a very detailed video. It was a compliment :)
@@EcoresolveInc thank you very much Mikey, your comments are encouraging me to do more and more😃
@@geodev 🔥
Too good. Thanks for the tutorial (y) keep up the great work
😁❤️
thank you so much. this tutorial really saved me.
You're welcome!
Leaflet.FileLayer loads files (GeoJSON, GPX, KML) into the map using the HTML5 FileReader API (i.e. locally without a server). Leaflet.FileLayer can you make a video about this process?
Thank you! it is quite helpful
Glad it was helpful!
Awesome explanation
Glad you liked it!
Thank you very much. This video was super helpful.
Glad you liked it.
Thank you a lot! Great start.
You are welcome!
Thank you Guys !
Awesome Tutorial,
Glad you liked it!
I'm very thankful to you, thank you!
You're very welcome!
@@geodev i'm sorry, could you answer my question?
How can i add location to this map, and is it possible to add addressing too?
Lets say someone wanted to place a pin on a map, but instead of a pin, wanted to use a dynamic price of each pin. How would you do that? TIA!!
You can add the custom marker and the tooltip to show the price. Here is the demo: leafletjs.com/examples/custom-icons/
Thank you so much for the effort, really useful
Glad it was helpful!
Awsome video mate. Great work.
Glad you enjoyed it
Amazing video! saved my life!
Glad it helped you😃
thankyou!! very nice video that helped me alot!!!
Glad it helped you😃
I just found your channel and I'm excited to explore more of your videos regarding leaflet. Your instructions were pretty clear and easy to understand. I'm making an interactive map using my own layers with data in it. But I'm stuck with how I'm gonna create a feature where the user can input any numbers on the website and that number will determine the amount of area divided by color. For example, when the user inputs number 5, then there will be 5 different colors dividing the area based on existing data in each region (the data : 0-5, 6-10, 11-15, 16-20, 21-25). Please, could you give me some pointers or tutorial ?
Great tutorial! congrats
Thanks a lot!
I haven't yet gone through all of them, but I'd like to learn how to put a home address and have leaflet tell me the roof square footage.
Looks like you are searching for leaflet measure plugin. Just search for "leaflet measure geodev" in youtube
Thank you dai for this crash course
You are welcome vai!
Dear Dr thanks for your course, i would like to access leaflet: from zero to heroe. but it is not available
You can follow this playlist for basic to advance guide: ua-cam.com/play/PLyWyQBSWLw1NH1wsA0wkSMTlQ45P0AqCj.html&si=_-GFPfv98j0DEEVK
Is this self contained web map? I dont think so..because its opening in the HTML page rather than in a separate window.
Yes it is a web-app.
Dear Sir. How can I access the class: " leaflet from zero to heroe" ? Can you open the access again ? I can not acces ! Many thanks
Here it is: ua-cam.com/play/PLyWyQBSWLw1NH1wsA0wkSMTlQ45P0AqCj.html
Great job...thanks for the video....it helps me alot..
Glad it helped
Fantastic videos!
Glad you think so!
Very helpful sir , excellent lecture 👏💐
Glad you liked it😃
Awesome tutorial ! Thank you !
Is there a way to add a button on the map, that moves with the map , like the polygon does ? Once clicked on the button , send user to another page .
I think for that you need to add the marker on your required lat. long. After that you can change the marker custom icon which is looks like a button.
Thanks! Excellent tutorial
Glad it was helpful!
Nice explanation brother.. All the best.
Glad you liked it!
hi I tried to add googlestreet map but it is not showing. it is not even throwing any error. it shows blank screen
Could you copy the code from github? Github link in video description
Hi brother, any plugins available for drawing the lines, areas wth different polygon shapes and perform crud features.
Yes, I have created the video on that topic. Please watch here: ua-cam.com/video/vK_-OI3pjXk/v-deo.htmlsi=yZpd26dZ_2bGDGWU
thank you for this!
You're so welcome!
brabissimo!
Thanks:-)
thank you for making this tutorial!
You're very welcome!
Thank you for the course
You are welcome
Thanks, man for the nice video.
Glad you liked it!
Great tutorial!
Thank you! Cheers!
Awesome Video, bro
Thanks for the visit
Great tutorial is it possible to make a separate video for different types of filters on map showing like check box, combo box to get the gejson features automatically in such controls and show the map.
Yes it is possible to filter the data using checkbox, combo box etc. I will create the video on it if I get time. Thanks for the suggestion.
Very informative 👏👏
Glad you think so!
Hi have mvc application with this
All works fine im getting all markers but in ky staging only one is showing
Hi, do you know if there is any way of putting netcdf data into a map in leaflet? thx for the video, keep the good work!
Sir i don't have knowledge of Django. can i enroll in your Udemy course "Web Mapping and Web-GIS from Dev to Deployment: GeoDjango"??
Yes, you can. I tried to explain the things used in Django. But if you stuck somewhere, please watch some free tutorials in Django in UA-cam.
Thank you very much! :)
But how can I embed it into a post on my WordPress website?
It will be only possible if you can add the custom js code in the wordpress. I am not sure about it, whether it is possible or not.
Hi, thank you for the tutorial. I would like to know if there is any way to change the language for all the names in the map?
Good information
Thanks!
♥♥
Hello sir,
How to set boundaries in map?
Example show only one particular country or country 's state only
Hi Kinjal, for filtering the data you can use the geojson filter. Here is the example: stackoverflow.com/a/28753510/9354344
please how do i use leaflet with express without it crashing
Sorry I haven't used express before. But I think it is quite stable library. It shouldn't crash with any other language integration
Thank you !
You are welcome
i need to make a interactive map , it changes a specific marker icon when someone donates , its a donation for planting trees and the markers changes from icon to an icon (the other icon is a tree icon) , is this possible ? how ? and how can i let the donator add pics on the marker? like when click the marker i can see pics that only the donator can add to this specific marker
Yes it is possible with some conditional statement. Create few markers with your requirements and render them based on your if else condition
@@geodev tysm
nice course but how can i add a fullscreen control with leaflet ?
Here is the tutorial for this:
ua-cam.com/video/4pIkBHSniv0/v-deo.html
Amazing tutorial, but I have a question. Is there possible export or download the map with its tileLayers as image?. Thank you for you answer :)
Yes, it is. I have created the tutorial on it. Check the tutorial here: ua-cam.com/video/z7RSRaJTwuo/v-deo.html
@@geodev oh, thank you so much! Im gonna check it
Very good! Question, how can to change colors in layer Geojson that contain so much objects (objects: 100 to more)
You have to add the style parameter on the geojson object something like this;
L.Geojson(data, {
style: {color: "red", fillOpacity: 0.5}
}).addTo(map);
@@geodev how to change color for geoJson properties, example :
I have geoJson properties NAMEOBJ
I will change
the color red for NAMEOBJ.India
The color blue for NAMEOBJ.indonesia
Maybe using array and object ?? Please how to code this case
Hey can it be stored in database? I mean the markings and details of it?
Yes you can! You have to link your database and add CRUD operation!
please help ..why SSL not working with leaflet map ? and please suggest which map support ssl for website ?
It should work with SSL. There is no any such error. If you can not fix the problem, download leaflet.css and leaflet.js file from leaflet official github repo.
Then why my developer said to me leaflet is not working with ssl and I stopped my work only for the reason. Please provide me link that shows leaflet support ssl certificate so that I can show them to fix the issue.
Hi, it's possible to get current location when mobile screen off using leaflet, like delivery person location displaying to customer even the person in driving
Hi Azarudeen, I am not entirely sure, how the location information is shared via mobile. But I got this explanation, can you check it? stackoverflow.com/a/21146876
@@geodev thank you
Can I have a search bar on the leaflet map to search for locations manually?
Yes you can. Please search for the leaflet-search plugin. I think the video tutorial is available in my channel.
@@geodev unfortunately it's not good with street names. it only goes for names that are very popular and well documented
Hi, How can I create a multiple marker selector and return this points with their's propierties.
Sorry I didn't get your question.
Sir यो real location अर्को user ले हेर्नु पर्यो भने कसरी हेर्न
Give some information and code also..
How can split polygon with different area
Hello bro I just wanna ask if you have to make this with pointing the organization or place features how much do you charge
Nice to meet you. We can discuss further on it
my points geojson are not added to map i follow each step you told in video plz response fast
Not sure, may be problem with your geojson file. Can you please recheck the video, whether you did the right thing or not?
@@geodev I did double check the video many times I didn't found problem in code however in console I can share you screenshot
Thank you !
Is there a way to make interactive map Once clicked on the region (governorate) show statistics.. charts ..in the same page ?
Yes It is possible. You can use the onClick event on map. For more info, visit the leaflet documentation: leafletjs.com/SlavaUkraini/reference.html#map-click
Hallo...
I would like to use overlayadd to know the array id of the elements on the overlays to use it with mysql...
I tried with
map.on('overlayadd', function (e) {
pathid = e.layer._leaflet_id;
alert(pathid);
});
but i don't understand why it gives me ids that are not part of the array.
Thanks
@}-,-'---------
Gianfranco
Hello sir, Can you inform me how I will read data from the multilayer when someone clicks on it, I have 2 GEOJSON files and it's like the overlayer base map is an open street map. Already projected just I need some different information layer bases.
For that, you can use the click event on both geojson.
@@geodev user click one time I will get 3 layer date? it's over layer 3 . is there any link or example? another thing is how to handle large geo JSON like 200-300MB
@@Webspreed for large geojson, watch this tutorial: ua-cam.com/video/xerlQ3tE8Ew/v-deo.html
About your first question, I think you need to write a nested click event. I don't have any examples right now.
Hello sir could you pls help me in changing tiff file (raster data) color gradient from white -Black to white blue??
The required section is explained clearly here: geoserver-rest.readthedocs.io/en/latest/how_to_use.html#creating-and-applying-dynamic-styles-based-on-the-raster-coverages. Please have a look and let me know still if you have an issue.
@@geodev thank you sir. Yesterday I have already changed the color successfully 😇😇
@@geodev I simply changed it with the help of QGIS
@@geodev Hello sir ,how to use leaflet pluggins in our code
Great stuff. You could make it more concise by not explaining things unrelated to leaflet, e.g. how remove default html margins, or explaining order of execution of lines of code.
Great suggestion! I will try to explain only the required things from next videos. Thank you
Not everyone is a pro. I think he is okay. A good teacher does not assume and not all students are on the same level
Can you pls upload a video advatage and disadvantage of Openlayer and leaflet
Thanks for the suggestion. I will consider to cover this topic in upcoming videos.
thanks bro
Welcome
hi how can we use use leaflet if we install it using npm
You can import it as "import L from 'leaflet';
"
Yes but normally it is not working i used parcel there itnis working but map tiles are not loading properly
Can you show that how to find the nearest location ongeojson data
I think it is possible using turfjs. Please check my crash course on UA-cam.
What I feel is.. When I use control switching the layers take multiple lines of code in Openlayers and leaflet is quite easy
For certain region, I also feel like leaflet is more easier than openlayer. Only the issue with leaflet js is now the issues on github are increasing. And no one is properly maintaining the code.
@@geodev sir pls help me in layer switching ,,i have first layer representing roads and second one is representing water bodies ..these two shape file data is showing on my map ..i want to add functionality of switching between both of them by adding radio button or checkbox
How can i get my current position in leaflet
To find out the current position, you can use HTML Geolocation API. I have created the video, you can check here: ua-cam.com/video/8KX4_4NK7ZY/v-deo.html
Bro I need a solution. I want to load a file of 100+ MB of geoJson file. It takes a lot of time loading. How can I load it faster and is there any way to partially load or something like that?
I've tried Leaflet-Ajax plugin, but it also loads the entire file at the starting... so it slows down the process.
The simple answer is use WMS using map servers such as geoserver, mapserver etc. First of all you need to convert your geojson data to shapefile. After that you need to load it to the geoserver and get the WMS. If you don't know how to do that, watch my video tutorial on geoserver here: ua-cam.com/video/vL6kgJmOCxg/v-deo.html
dome or dom?
DOM
You say latitude and longitude but that is not really what leaflet uses. It goes crazy when crossing the dateline. Polylines need to be extended past lng 180 in order to work properly. That's not lat lng.
I don't know which part of the video are you talking about. But generally leaflet visualize the data based on the latitude and longitude of the feature geometry.
@@geodev One would think. It appears that way at first glance with simple examples. Try to draw a polyline from Japan to California. It can be done only if you extend longitude past 180. Longitude bounds are 180. If you do manage to draw a polyline it appears or disappears as you move the map left/right over the dateline. Show a map with arctic and antarctic on it. Given the proportions you will need to double up the map features on the left and right. Try to add markers in those far areas on the left/right. With lat/lng the marker will appear on the left or right side only. If you add a marker past 180 the system will let you. When you click and access lat/lng it an error will occur.
Awesome!!!!
Thank you😊
very cool tutorial, i want to ask..i want to used geoserver wms data, but its show CORS error. How i want to fix that.
Are you trying to load wms from geoserver? if so, please watch this video: ua-cam.com/video/pexZ-Hp4e3o/v-deo.html&ab_channel=GeoDev
@@geodev i already did it same as you show on video but no have luck for me..may i ask you running your web on iis?
@@geodev i did it solve the problem, i forgot to put wms at L.tileLayer.wms, thank you so much
Helped me enough
I am glad that it helped you
@@geodev also if possible make a video on multiple selection. I didn't find a single resource on this. I think many will get benefited.
@@maahad767 Sorry I didn't get you. What do you mean by multiple selections?
@@geodev for example a map has many tiled markers. And I want to select those and get the data of those markers. That's what I am suggesting. I have implemented it in my ways. But I think you can do it in better ways than me.
I think the easiest way to filter the data is to apply js filter function, something like this, stackoverflow.com/a/56415638/9354344
@GeoDev how to add leaflet offline maps in angular js pls?
To be honest, I didn't used anjular js before. Sorry can not help
@@geodev does it help to display in other technology offline leaflet map?
hey,bro
why i didn't show Leaflet layer control icon.😵
Can you check the full version of code in github?
@GeoDev how to add colour scale for maps in leaflet
Sorry, I didn't get you.
@@geodev for map tile layers how can I add colour scale
@@geodev how to contact you your mail id ?
@@jivtheshm.r1784 The tile layer comes with the default style. We can't change it through the leaflet. But if you want to generate the costume tile layer then you may need to check the Mapbox tiles. Please check the Mapbox studio here: studio.mapbox.com/
@@geodev not this bro
thumbnail ko photo chai epic xa hai :p
Thank you! This is my first try