Map with Markers using Leaflet | JavaScript Tutorial

👉 Map current location tutorial: • Map Live User Location...
⚡ Need hosting for a website, WordPress blog or Node.js app? We use HostWithLove: bit.ly/3V2RM9Q ❤️
This tutorial shows you how to create a map with location markers using Leaflet and data from OpenStreetMap, including with custom icons, popups on click and a scalable solution for multiple markers.
#javascript #map #markers #leaflet #webdevelopment #frontend #tutorial #javascript_tutorial

[@raphaelsomtochukwu4211]

The video helped me a lot, am using pug, so I will convert the html to pug and it will run smoothly. I have done it with html and it worked perfectly as seen in the video. Thank you very much. The video is very straight forward

[@petchalucklimprasert4634]

very clear and easy to learn about google map thank you very much.

[@xzchc]

Thank you, very nice tutorial, clear and easy to follow along.

[@OpenJavaScript]

You are welcome, glad you found it useful. Thanks for reaching out with this feedback :)

[@edgartavaresdias2365]

Congratulations. This tutorial helped me to change de icon in my code.😀

[@OpenJavaScript]

That's great, I'm pleased this video helped you out. It's hard for me to gauge the real impact of my videos beyond views and likes so thanks, it's nice of you to reach out and let me know that this :)

[@StevieB86]

Not had chance to watch this yet, however, will be going through it later. I have to build a full-stack project using Leaflet and it's going to be a real struggle. I'm a beginner and I have to utilise JS or jQuery to make AJAX calls to PHP routines which will extract data from various APIs. This data will be used to populate various features on the map. I've only just found this channel but love your content so far. Thanks a million!

[@OpenJavaScript]

I'm wishing you the best of luck with your project! Hope this video helps you to get started. Let me know if something comes up that you think I might be able to help you with (also as it may be relevant to other watching this video).

[@mohammadazhar2223]

I have mvc app with this my markers are showing in my local but in staging env no marker is coming

[@detrom.h1819]

very clear ,thank youu

[@brians4265]

Hi , great tutorial . I have question. How do you pinpoint all the airports in the world ? I am doing a full stack project and I need to extract all the airports, borders,etc and need to assign an icon to them. Thank you

[@arsalanhanif9185]

If we want to add a small popup when clicked on that marker (with some information or links to another page) how can we do that?

[@jhansirani4265]

how to get a tile layer link? on line 28

[@farhanakram9188]

Thanks 👍

[@OpenJavaScript]

You're welcome!

[@rakeshreddysarikonda9540]

could you please share the code link

[@exnoob6773]

THX

[@anthemsofeurope2408]

I set ' instead of ` and it didnt worked. Just a little reminder for everyone who dont have a english keyboard: Use `

[@OpenJavaScript]

Thanks for pointing this out for others! Maybe someone else encounters this issue as well.
It is indeed very important to use backticks for all multiline string in this video as regular quotation marks don't support this or inserting JS values using ${} syntax.

[@ashokkumarSa]

Hii this is free api or paid

[@OpenJavaScript]

Here are some relevant parts of the usage policy for the tile server I'm using in this tutorial:
"OpenStreetMap data is free for everyone to use. Our tile servers are not...Heavy use (e.g. distributing a heavy-usage app that uses tiles from openstreetmap.org) is forbidden without prior permission from the Operations Working Group. See below for alternatives."
So it seems like for a project or any kind of serious use you should find an alternative provider of the data (they provide a list on their website) or host the data yourself.