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?
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 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 ?
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
Hi, how can i add the IntelliSense in VS Code for leaflet? i found some extension called leaflet but dort think it's the correct one. My env seems to get some of the methods etc but don't think it's working as well as yours. Thank you
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.
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.
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
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
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
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.
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.
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
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
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
@@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.
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
@@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/
You can download the wms layer by simply changing the output format on the url parameter. These are the available output format in geoserver: docs.geoserver.org/latest/en/user/services/wms/outputformats.html
@@geodev This is wms layer link i wont for json data from that link apsac.ap.gov.in/gisserver/services/REVENUE/cadastral_ap_cache/MapServer/WMSServer?SERVICE=WMS&REQUEST=GetMap&FORMAT=image/png&TRANSPARENT=TRUE&STYLES=&VERSION=1.3.0&LAYERS=0&WIDTH=740&HEIGHT=313&CRS=EPSG:3857&BBOX=8822459.610214943,1637165.9828724624,8836581.35119061,1643147.1803357694
I think you need to apply WFS instead of WMS since you need the output as JSON data. The basic syntax of the WMF will be looks like this: localhost:8080/geoserver/geoapp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=geoapp%3Aadmin&maxFeatures=50&outputFormat=application%2Fjson You will get more information in this link: docs.geoserver.org/stable/en/user/services/wfs/reference.html
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 taking the time to make this.
Glad it was helpful!
Thank you for your explanation. You have given me a clear overview of Leaflet.
Glad it was helpful!
Very useful tutorial mate, better than Leaflet js crash courses in Udemy, thank you very much...
Glad you liked it!
Very instructive video, it was perfect for a total beginner like me! Thank you! :)
You're very welcome!
So helpful! Absolute banger of a tutorial. Thank you!!!
Glad you liked it!
I call this leaflet docs on steroids,
Thanks buddy,
Subed
Great!
Dude. You're a god. God bless you man. You rock.
Great! Glad you liked it!
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.
Awsome tutorial tek ... You clearly explain all the stuff needed to up and running with leaflet.
Glad you liked it Sasanka!
This really helps me with my capstone project, thank you !
Great to hear!
Very good beginner tutorial, I appreciate it!
You're very welcome!
Really awesome tutorial. You are amazing! Thanks for sharing your knowledge.
Glad it was helpful!
You are good at explaining stuffs dai. Thank you much for the tutorial.
Always welcome!
I am glad you liked
Awsome video mate. Great work.
Glad you enjoyed it
Too good. Thanks for the tutorial (y) keep up the great work
😁❤️
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 🔥
Amazing video! saved my life!
Glad it helped you😃
Thank you Guys !
Awesome Tutorial,
Glad you liked it!
thank you so much. this tutorial really saved me.
You're welcome!
Thank you a lot! Great start.
You are welcome!
Great tutorial! congrats
Thanks a lot!
Nice explanation brother.. All the best.
Glad you liked it!
thankyou!! very nice video that helped me alot!!!
Glad it helped you😃
Thank you very much. This video was super helpful.
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?
Awesome explanation
Glad you liked it!
Thank you! it is quite helpful
Glad it was helpful!
Thank you so much for the effort, really useful
Glad it was helpful!
Thanks, man for the nice video.
Glad you liked it!
Fantastic videos!
Glad you think so!
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?
Very helpful sir , excellent lecture 👏💐
Glad you liked it😃
Thanks! Excellent tutorial
Glad it was helpful!
Thank you dai for this crash course
You are welcome vai!
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 informative 👏👏
Glad you think so!
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.
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 ?
thank you for making this tutorial!
You're very welcome!
brabissimo!
Thanks:-)
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
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 the course
Any time!
Great job...thanks for the video....it helps me alot..
Glad it helped
Awesome Video, bro
Thanks for the visit
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.
thank you for this!
You're so welcome!
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
Hi, how can i add the IntelliSense in VS Code for leaflet? i found some extension called leaflet but dort think it's the correct one. My env seems to get some of the methods etc but don't think it's working as well as yours. Thank you
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.
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!
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.
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
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
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?
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
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/
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.
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
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
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
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.
Thank you !
You are welcome
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!
♥♥
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
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
map is not showing properly when i am using in react without cdn. do you have any solution?
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
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
Hi, How can I create a multiple marker selector and return this points with their's propierties.
Sorry I didn't get your question.
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
How can split polygon with different area
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
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
Hi have mvc application with this
All works fine im getting all markers but in ky staging only one is showing
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
Good information
Thanks!
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
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.
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
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
@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?
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
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
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
hey,bro
why i didn't show Leaflet layer control icon.😵
Can you check the full version of code in github?
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
@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
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.
thanks bro
Welcome
Awesome!!!!
Thank you😊
dome or dom?
DOM
Sir यो real location अर्को user ले हेर्नु पर्यो भने कसरी हेर्न
Give some information and code also..
How to download wms layer offline
You can download the wms layer by simply changing the output format on the url parameter. These are the available output format in geoserver: docs.geoserver.org/latest/en/user/services/wms/outputformats.html
@@geodev
This is wms layer link i wont for json data from that link
apsac.ap.gov.in/gisserver/services/REVENUE/cadastral_ap_cache/MapServer/WMSServer?SERVICE=WMS&REQUEST=GetMap&FORMAT=image/png&TRANSPARENT=TRUE&STYLES=&VERSION=1.3.0&LAYERS=0&WIDTH=740&HEIGHT=313&CRS=EPSG:3857&BBOX=8822459.610214943,1637165.9828724624,8836581.35119061,1643147.1803357694
apsac.ap.gov.in/gisserver/services/REVENUE/cadastral_ap_cache/MapServer/WMSServer?SERVICE=WMS&REQUEST=GetMap&FORMAT=image/png&TRANSPARENT=TRUE&STYLES=&VERSION=1.3.0&LAYERS=0&WIDTH=740&HEIGHT=313&CRS=EPSG:3857&BBOX=8822459.610214943,1637165.9828724624,8836581.35119061,1643147.1803357694
Json Data
I think you need to apply WFS instead of WMS since you need the output as JSON data. The basic syntax of the WMF will be looks like this: localhost:8080/geoserver/geoapp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=geoapp%3Aadmin&maxFeatures=50&outputFormat=application%2Fjson
You will get more information in this link: docs.geoserver.org/stable/en/user/services/wfs/reference.html