Build a coronavirus map with fetch & mapbox

Поделиться
HTML-код
  • Опубликовано: 31 дек 2024

Комментарии • 61

  • @JadJoubran
    @JadJoubran  4 года назад +3

    Learn JavaScript 👉 learnjavascript.online
    React Tutorial 👉 react-tutorial.app

  • @TinaNiaki
    @TinaNiaki 4 года назад +15

    This is one of the most helpful programming videos I've EVER come across. Amazing way to break things down and explain your logic as you progress through the code Jad. Thank you and please keep these coming.

    • @JadJoubran
      @JadJoubran  4 года назад

      Thank you so much 😁 I already started planning the next one

  • @jonahg6564
    @jonahg6564 4 года назад +2

    SImple and extremely clear! A good teacher can explain and you did very well! Ive been trying to figure this out for a while now! Earned a sub for sure

    • @JadJoubran
      @JadJoubran  4 года назад

      Thanks Jonah :D happy o hear! Make sure to checkout my courses, they follow the same teaching style ;)

  • @byslyrten
    @byslyrten 2 года назад

    You made it look so simple. This is great.

  • @Justin-tq3em
    @Justin-tq3em 3 года назад +1

    I enjoyed the video. Currently retaking your fundamentals course then moving to the next course. I like seeing HOW you are setting up the file structure and getting the data.

  • @edisvelicanin8854
    @edisvelicanin8854 4 года назад +3

    you should be making more of these videos. very insightfull. definitely cheking your course.

  • @tasaduqhaqaq979
    @tasaduqhaqaq979 4 года назад +1

    i want to find the user location and based on user's location i want to show the user the available restaurants in his/her area. Could you please guide me for that

  • @BotsOne
    @BotsOne 4 года назад +1

    Thanks a lot Jad! I just got this working using a free coronavirus API from rapidAPI. I added a few more colors and a popup that says the country name and how many cases there are when you hover over a marker too. Planning on adding global stats to the corner next! Great tutorial can't wait for more!

    • @JadJoubran
      @JadJoubran  4 года назад

      oh nice awesome! Feel free to share the link if you end up deploying it, would be nice to check it out :D

    • @brianwachira
      @brianwachira 4 года назад

      Yeah can you explain how you did this. I am trying to add hover effects and I cant find clear tutorials

    • @gitikasonker
      @gitikasonker 4 года назад

      can you share the link?

  • @ritsk4338
    @ritsk4338 4 года назад +1

    You are awesome. Subscribed. From India

  • @drashtikaneriya3138
    @drashtikaneriya3138 4 года назад +1

    Can I fetch value from Autocomplete Searchbox to database?

  • @jatinc6058
    @jatinc6058 4 года назад +1

    Thanks for this. Why did you not use Live Server within VSCode? Also, are you using Fetch to get your maps via API?

  • @thelazygunner
    @thelazygunner 4 года назад

    is it possible to style the marker other than just changing the color such as making it a circle or displaying the case number when hovered? I checked mapbox on custom markers but the tutorials use geoJson to populate the map so I don't know how to do this without using the geojson and instead use a API which returns the long and lat values just like you have in your video.

  • @justpassingbylearning
    @justpassingbylearning 4 года назад +1

    so there isnt a get-latest anymore just checkpoints and places

  • @pellegrinoernesto
    @pellegrinoernesto 4 года назад +2

    you deserve 100x subs 😎

  • @naghamalsayegh4551
    @naghamalsayegh4551 3 года назад

    Thanks for making this.
    I just wanna ask if you can help me with plotting circles instead of markers as in the app of coronavirus

  • @hellyski
    @hellyski 4 года назад +6

    Great video! Would love to see more of this type of material. 🙏

    • @JadJoubran
      @JadJoubran  4 года назад

      Thanks! Already planning the next video ;)

  • @EscOfficial
    @EscOfficial 4 года назад +1

    Yo Brother, can you show us how to hover each country and display a popup with the infected ammount?

  • @thebinsohail
    @thebinsohail 4 года назад

    I request you to make a JavaScript Series like beginners to pro.
    Your teaching style is amazing

    • @JadJoubran
      @JadJoubran  4 года назад

      It's already there as an interactive course ;)
      Programming concepts for beginners: learnprogramming.online
      JavaScript for developers who already know the programming concepts: learnjavascript.online
      Same teaching style, more interactive.

  • @munjikahalah
    @munjikahalah 4 года назад

    where can I find this data you guys?

  • @huzaifabinzahoor
    @huzaifabinzahoor 4 года назад +1

    Absolutely Great work. Can you please provide the code as well?

  • @dylanlalonde
    @dylanlalonde 4 года назад +1

    Thanks for making this Jad!

    • @JadJoubran
      @JadJoubran  4 года назад

      :D

    • @JadJoubran
      @JadJoubran  4 года назад

      @Dylan Lalonde Looks like it, thanks! For some reason I didn't get a notification about this comment

  • @khanas1000
    @khanas1000 4 года назад

    while using it with node.js on server side i am getting this error
    ReferenceError: self is not defined
    any fix??
    (I am using node with Express.js for backEnd and EJS for templating )

  • @zoro3048
    @zoro3048 4 года назад +1

    It would be so helpful, if you can provide the source code for this..

  • @ArpitDhamija
    @ArpitDhamija 4 года назад

    from where i can get the dataset

  • @PedroFerrareziGamer
    @PedroFerrareziGamer 4 года назад

    Hello, I'm from Brazil, I have some doubts about the map of the covid-19.
    I need to do a job for school, I'm in the last year, can you take any questions from me?
    Can I make a heat map using google API?
    Can I use the firebase on the backend?
    my goal is to make a heat map of covid-19 to teach at school, but i can't find tutorials on the internet demonstrating how to make such a map with google API and using firebase as a database.
    Would it be too much to ask you to make a video demonstrating how to do such projects? I would be very grateful, hug from Brazil
    * used translator *

  • @fabricioaraujo7642
    @fabricioaraujo7642 4 года назад +1

    Please make some content about PWA, thanks for nice content :)

  • @oumarsekisinde797
    @oumarsekisinde797 4 года назад

    Hello Jad, thanx for the great work, however, i was trying out this with every step you took, but got errors , i sued thoug a phar file but it does not work either
    1have failed to copy that json url link from the site ,
    2 VM85:1 Uncaught SyntaxError: Unexpected end of JSON input
    at JSON.parse ()
    at showNeg.js:241
    at XMLHttpRequest.onDefaultReadyStateChangeHandler (s
    3 the "report" reference un defined
    I thank

    • @JadJoubran
      @JadJoubran  4 года назад +1

      It's most likely because coronavirus.app changed their API completely

    • @oumarsekisinde797
      @oumarsekisinde797 4 года назад

      Jad Joubran , thanx though man

  • @gmstabloid
    @gmstabloid 4 года назад +2

    Thank youuuuuu!!!!!!!!!!!!!

  • @jaedon01
    @jaedon01 4 года назад

    Do you know sketchware

  • @GeeksDen
    @GeeksDen 4 года назад

    Sir please provide link of data which you used in that map
    Please sir

    • @GeeksDen
      @GeeksDen 4 года назад

      Thank you sir I got that 😎😎

    • @AnandaChaudharyOfficial
      @AnandaChaudharyOfficial 4 года назад

      Can you provide me that link of data of current cases??

  • @SteveNgaiCheeWeng
    @SteveNgaiCheeWeng 4 года назад

    Map starts at 11:52

  • @nafiaaaitmoh8270
    @nafiaaaitmoh8270 4 года назад

    salut vous pouvez donnez code source ????

    • @JadJoubran
      @JadJoubran  4 года назад

      github.com/jadjoubran/coronavirus-map

  • @nahida4444
    @nahida4444 4 года назад

    Anyone knows why my map is not showing up in chrome? In firefox, it works well.

    • @JadJoubran
      @JadJoubran  4 года назад

      do you have the height on the map?

    • @nahida4444
      @nahida4444 4 года назад

      @@JadJoubran -I set height = 100vh in style

  • @ChillerDragon
    @ChillerDragon 4 года назад +1

    Riding the hype :D

  • @Matonias
    @Matonias 4 года назад +1

    Real life Plague Inc.