Leaflet crash course | All you need to know about leaflet | Leaflet | Tekson

[@geodev]

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

[@no_justno]

You're video is a epitome of superior education. You are a wonderful teacher.

[@geodev]

Wow, thank you very much! Glad you liked the video!

[@compateur]

Thank you for your explanation. You have given me a clear overview of Leaflet.

[@geodev]

Glad it was helpful!

[@thanuumusic]

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❤❤

[@geodev]

Glad I could help! Happy coding!

[@thanuumusic]

@@geodev 💌

[@kushalnayak9363]

This is really very informative. Spacial for those who start GIS Web developing with leaflet & Javascript. Thanks for making this video

[@geodev]

Glad you liked it.

[@onyxelite312]

Thank you for taking the time to make this.

[@geodev]

Glad it was helpful!

[@topanime7563]

This really helps me with my capstone project, thank you !

[@geodev]

Great to hear!

[@deryabakiler1184]

Very instructive video, it was perfect for a total beginner like me! Thank you! :)

[@geodev]

You're very welcome!

[@SasankaMadawalagama]

Awsome tutorial tek ... You clearly explain all the stuff needed to up and running with leaflet.

[@geodev]

Glad you liked it Sasanka!

[@lionelgibaudan3592]

Good introduction .. it gives me envy to follow all the others video about leaflet... thanks

[@geodev]

Glad you liked it! I hope all videos are useful for designing the better webGIS portals.

[@emreaktas8169]

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?

[@pedinokilkis]

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

[@sabrinapyles563]

So helpful! Absolute banger of a tutorial. Thank you!!!

[@geodev]

Glad you liked it!

[@monsefm1268]

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 :)

[@geodev]

Yes, it is. I have created the tutorial on it. Check the tutorial here: kzbin.info/www/bejne/sGi1hIWXf7mqq9E

[@monsefm1268]

@@geodev oh, thank you so much! Im gonna check it

[@azlacullen638]

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 ?

[@sarojpaudel7479]

Hi brother, any plugins available for drawing the lines, areas wth different polygon shapes and perform crud features.

[@geodev]

Yes, I have created the video on that topic. Please watch here: kzbin.info/www/bejne/rHzCXoJ_aNWdjs0si=yZpd26dZ_2bGDGWU

[@sametcoban1604]

Very useful tutorial mate, better than Leaflet js crash courses in Udemy, thank you very much...

[@geodev]

Glad you liked it!

[@rkboy7628]

map is not showing properly when i am using in react without cdn. do you have any solution?

[@good114]

♥♥

[@EthanjMarchand]

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!!

[@geodev]

You can add the custom marker and the tooltip to show the price. Here is the demo: leafletjs.com/examples/custom-icons/

[@sarojpaudel7479]

Is this self contained web map? I dont think so..because its opening in the HTML page rather than in a separate window.

[@geodev]

Yes it is a web-app.

[@jonykatz]

Thank you very much! :) But how can I embed it into a post on my WordPress website?

[@geodev]

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.

[@ozodbekboriboyev1010]

I'm very thankful to you, thank you!

[@geodev]

You're very welcome!

[@ozodbekboriboyev1010]

@@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?

[@TGRockS13]

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 .

[@geodev]

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.

[@evelynliviabrito5647]

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!

[@omkar2589]

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?

[@filibertocarnal]

Very good beginner tutorial, I appreciate it!

[@geodev]

You're very welcome!

[@oscarsoto9545]

Very good! Question, how can to change colors in layer Geojson that contain so much objects (objects: 100 to more)

[@geodev]

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);

[@andipermadi5027]

​@@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

[@drazraut]

You are good at explaining stuffs dai. Thank you much for the tutorial.

[@geodev]

Always welcome! I am glad you liked

[@shrishti9431]

thank you so much. this tutorial really saved me.

[@geodev]

You're welcome!

[@snehabamane5794]

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"??

[@geodev]

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 KZbin.

[@margarethsimoes4652]

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

[@geodev]

Here it is: kzbin.info/aero/PLyWyQBSWLw1NH1wsA0wkSMTlQ45P0AqCj

[@roofroofconstruction]

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.

[@geodev]

Looks like you are searching for leaflet measure plugin. Just search for "leaflet measure geodev" in youtube

[@babiloon659]

Really awesome tutorial. You are amazing! Thanks for sharing your knowledge.

[@geodev]

Glad it was helpful!

[@GyanMedia]

Hello bro I just wanna ask if you have to make this with pointing the organization or place features how much do you charge

[@geodev]

Nice to meet you. We can discuss further on it

[@steffenlindner299]

Thank you a lot! Great start.

[@geodev]

You are welcome!

[@margarethsimoes4023]

Dear Dr thanks for your course, i would like to access leaflet: from zero to heroe. but it is not available

[@geodev]

You can follow this playlist for basic to advance guide: kzbin.info/aero/PLyWyQBSWLw1NH1wsA0wkSMTlQ45P0AqCj&si=_-GFPfv98j0DEEVK

[@TokyFandresena]

Thank you Guys ! Awesome Tutorial,

[@geodev]

Glad you liked it!

[@mohammadazhar2223]

Hi have mvc application with this All works fine im getting all markers but in ky staging only one is showing

[@FitChaser]

Thank you!

[@geodev]

You're welcome!

[@mynameisdinesh]

Too good. Thanks for the tutorial (y) keep up the great work

[@geodev]

😁❤️

[@fourshoesyeah71]

Thank you for the course

[@geodev]

You are welcome

[@mahdimirzaei1635]

Thank you very much. This video was super helpful.

[@geodev]

Glad you liked it.

[@PawsomeEnglish-0124]

Thank you! it is quite helpful

[@geodev]

Glad it was helpful!

[@fredtanada3388]

Dude. You're a god. God bless you man. You rock.

[@geodev]

Great! Glad you liked it!

[@Webspreed]

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]

For that, you can use the click event on both geojson.

[@Webspreed]

@@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

[@geodev]

@@Webspreed for large geojson, watch this tutorial: kzbin.info/www/bejne/rpbVnYRpqapre9k About your first question, I think you need to write a nested click event. I don't have any examples right now.

[@bengamrawiem3803]

Thank you ! Is there a way to make interactive map Once clicked on the region (governorate) show statistics.. charts ..in the same page ?

[@geodev]

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

[@kinjalpatel4030]

Hello sir, How to set boundaries in map? Example show only one particular country or country 's state only

[@geodev]

Hi Kinjal, for filtering the data you can use the geojson filter. Here is the example: stackoverflow.com/a/28753510/9354344

[@azarudeen6054]

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

[@geodev]

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

[@azarudeen6054]

@@geodev thank you

[@raymondmichael4987]

I call this leaflet docs on steroids, Thanks buddy, Subed

[@geodev]

Great!

[@rajjatav7246]

please help ..why SSL not working with leaflet map ? and please suggest which map support ssl for website ?

[@geodev]

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.

[@rajjatav7246]

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.

[@acantoscur]

Hi, How can I create a multiple marker selector and return this points with their's propierties.

[@geodev]

Sorry I didn't get your question.

[@Abbici]

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

[@vishalchauhan9832]

Hello sir could you pls help me in changing tiff file (raster data) color gradient from white -Black to white blue??

[@geodev]

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.

[@vishalchauhan9832]

@@geodev thank you sir. Yesterday I have already changed the color successfully 😇😇

[@vishalchauhan9832]

@@geodev I simply changed it with the help of QGIS

[@vishalchauhan9832]

@@geodev Hello sir ,how to use leaflet pluggins in our code

[@shrishti9431]

hi I tried to add googlestreet map but it is not showing. it is not even throwing any error. it shows blank screen

[@geodev]

Could you copy the code from github? Github link in video description

[@sayeddrissi4527]

nice course but how can i add a fullscreen control with leaflet ?

[@geodev]

Here is the tutorial for this: kzbin.info/www/bejne/aqGsnHV-iNOcrJI

[@veeshalkarki4202]

Sir यो real location अर्को user ले हेर्नु पर्यो भने कसरी हेर्न Give some information and code also..

[@francesca3998]

Great tutorial! congrats

[@geodev]

Thanks a lot!

[@enricoamniat]

Thank you so much for the effort, really useful

[@geodev]

Glad it was helpful!

[@bradleynesperos3134]

Hey can it be stored in database? I mean the markings and details of it?

[@geodev]

Yes you can! You have to link your database and add CRUD operation!

[@IftikharAliMashwani]

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.

[@geodev]

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.

[@eeeeeeee.e]

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

[@geodev]

Yes it is possible with some conditional statement. Create few markers with your requirements and render them based on your if else condition

[@eeeeeeee.e]

@@geodev tysm

[@SteveHartmanVideos]

thank you for this!

[@geodev]

You're so welcome!

[@javiersalazar8288]

Awesome explanation

[@geodev]

Glad you liked it!

[@sweetmelon3365]

Can I have a search bar on the leaflet map to search for locations manually?

[@geodev]

Yes you can. Please search for the leaflet-search plugin. I think the video tutorial is available in my channel.

[@sweetmelon3365]

@@geodev unfortunately it's not good with street names. it only goes for names that are very popular and well documented

[@pixelgamingpubglite]

How can split polygon with different area

[@krishnawijaya3953]

thank you for making this tutorial!

[@geodev]

You're very welcome!

[@yeeapril187]

thankyou!! very nice video that helped me alot!!!

[@geodev]

Glad it helped you😃

[@MarceGuerra]

Thanks! Excellent tutorial

[@geodev]

Glad it was helpful!

[@karthikr8905]

What I feel is.. When I use control switching the layers take multiple lines of code in Openlayers and leaflet is quite easy

[@geodev]

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.

[@vishalchauhan9832]

@@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

[@thegishub]

Thank you dai for this crash course

[@geodev]

You are welcome vai!

[@maahad767]

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?

[@maahad767]

I've tried Leaflet-Ajax plugin, but it also loads the entire file at the starting... so it slows down the process.

[@geodev]

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: kzbin.info/www/bejne/rH2ZnJqAorR2rsk

[@amannambisan6870]

Amazing video! saved my life!

[@geodev]

Glad it helped you😃

[@EcoresolveInc]

very informational and thanks a lot for taking the time to create this for educating others! 1 hour is a long long time!!!!

[@geodev]

You are welcome 😃😃 I am trying to explain all the basic things required for leaflet js that's why it is little bit longer

[@EcoresolveInc]

@@geodev yep yep I was appreciating you spending 1 hour to create a very detailed video. It was a compliment :)

[@geodev]

@@EcoresolveInc thank you very much Mikey, your comments are encouraging me to do more and more😃

[@EcoresolveInc]

@@geodev 🔥

[@futureprogrammers]

please how do i use leaflet with express without it crashing

[@geodev]

Sorry I haven't used express before. But I think it is quite stable library. It shouldn't crash with any other language integration

[@shivabhandari6259]

Great job...thanks for the video....it helps me alot..

[@geodev]

Glad it helped

[@arifosman8647]

Thanks, man for the nice video.

[@geodev]

Glad you liked it!

[@FatimaKhan-oq3ug]

my points geojson are not added to map i follow each step you told in video plz response fast

[@geodev]

Not sure, may be problem with your geojson file. Can you please recheck the video, whether you did the right thing or not?

[@FatimaKhan-oq3ug]

@@geodev I did double check the video many times I didn't found problem in code however in console I can share you screenshot

[@chrispamboris5253]

Awsome video mate. Great work.

[@geodev]

Glad you enjoyed it

[@mikojan85channel]

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.

[@geodev]

Great suggestion! I will try to explain only the required things from next videos. Thank you

[@JAZZMAINAWABBS]

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

[@sentientpoop9863]

Fantastic videos!

[@geodev]

Glad you think so!

[@youneshariz333]

How can i get my current position in leaflet

[@geodev]

To find out the current position, you can use HTML Geolocation API. I have created the video, you can check here: kzbin.info/www/bejne/bny7ZZJqg7BqkLs

[@muthuperumalm5638]

Very helpful sir , excellent lecture 👏💐

[@geodev]

Glad you liked it😃

[@wanshah-n8p]

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.

[@geodev]

Are you trying to load wms from geoserver? if so, please watch this video: kzbin.info/www/bejne/ppbbi2B-pZmYadE&ab_channel=GeoDev

[@wanshah-n8p]

@@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?

[@wanshah-n8p]

@@geodev i did it solve the problem, i forgot to put wms at L.tileLayer.wms, thank you so much

[@chinfoplaya]

brabissimo!

[@geodev]

Thanks:-)

[@anishadhikari5427]

Great tutorial!

[@geodev]

Thank you! Cheers!

[@karthikr8905]

Can you pls upload a video advatage and disadvantage of Openlayer and leaflet

[@geodev]

Thanks for the suggestion. I will consider to cover this topic in upcoming videos.

[@oldfootage]

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.

[@geodev]

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.

[@oldfootage]

@@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.

[@s.p.498]

thanks bro

[@geodev]

Welcome

[@younessmouni6768]

@GeoDev how to add leaflet offline maps in angular js pls?

[@geodev]

To be honest, I didn't used anjular js before. Sorry can not help

[@younessmouni6768]

@@geodev does it help to display in other technology offline leaflet map?

[@spaceremotesensingandgis5626]

Good information

[@geodev]

Thanks!

[@akhilchandran5193]

Nice explanation brother.. All the best.

[@geodev]

Glad you liked it!

[@arkochakraborty5573]

hi how can we use use leaflet if we install it using npm

[@geodev]

You can import it as "import L from 'leaflet'; "

[@arkochakraborty5573]

Yes but normally it is not working i used parcel there itnis working but map tiles are not loading properly

[@derekjin6034]

hey,bro why i didn't show Leaflet layer control icon.😵

[@geodev]

Can you check the full version of code in github?

[@Ali-bj3nn]

Can you show that how to find the nearest location ongeojson data

[@geodev]

I think it is possible using turfjs. Please check my crash course on KZbin.

[@diwesh-hakunamatata9037]

Very informative 👏👏

[@geodev]

Glad you think so!

[@jivtheshm.r1784]

@GeoDev how to add colour scale for maps in leaflet

[@geodev]

Sorry, I didn't get you.

[@jivtheshm.r1784]

@@geodev for map tile layers how can I add colour scale

[@jivtheshm.r1784]

@@geodev how to contact you your mail id ?

[@geodev]

@@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/

[@jivtheshm.r1784]

@@geodev not this bro

[@travisthayer8563]

dome or dom?

[@geodev]

DOM

[@maahad767]

Helped me enough

[@geodev]

I am glad that it helped you

[@maahad767]

@@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.

[@geodev]

@@maahad767 Sorry I didn't get you. What do you mean by multiple selections?

[@maahad767]

@@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.

[@geodev]

I think the easiest way to filter the data is to apply js filter function, something like this, stackoverflow.com/a/56415638/9354344

[@dgiri2333]

How to download wms layer offline

[@geodev]

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

[@dgiri2333]

@@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

[@dgiri2333]

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

[@dgiri2333]

Json Data

[@geodev]

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