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

Пікірлер: 20

  • @detrom.h1819
    @detrom.h18195 ай бұрын

    very clear ,thank youu

  • @petchalucklimprasert4634
    @petchalucklimprasert46344 ай бұрын

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

  • @exnoob6773
    @exnoob6773Ай бұрын

    THX

  • @raphaelsomtochukwu4211
    @raphaelsomtochukwu42117 ай бұрын

    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

  • @xzchc
    @xzchc Жыл бұрын

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

  • @OpenJavaScript

    @OpenJavaScript

    Жыл бұрын

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

  • @edgartavaresdias2365
    @edgartavaresdias2365 Жыл бұрын

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

  • @OpenJavaScript

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

    @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

    @mohammadazhar2223

    Жыл бұрын

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

  • @farhanakram9188
    @farhanakram9188 Жыл бұрын

    Thanks 👍

  • @OpenJavaScript

    @OpenJavaScript

    Жыл бұрын

    You're welcome!

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

  • @jhansirani4265
    @jhansirani42658 ай бұрын

    how to get a tile layer link? on line 28

  • @arsalanhanif9185
    @arsalanhanif91853 ай бұрын

    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?

  • @ashokkumarSa
    @ashokkumarSa Жыл бұрын

    Hii this is free api or paid

  • @OpenJavaScript

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

  • @anthemsofeurope2408
    @anthemsofeurope2408 Жыл бұрын

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

  • @OpenJavaScript

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