Make a SVG world map to tell the time of every country | html, css & javascript

Поділитися
Вставка
  • Опубліковано 13 січ 2025

КОМЕНТАРІ • 57

  • @techywebdev
    @techywebdev  Рік тому +5

    Many people are asking for the source code. So here it is : github.com/jahid28/Other_JS_Projects/tree/main/WorldMapTime

  • @ricardorivera3385
    @ricardorivera3385 Рік тому +3

    Hello TechyWebDev, I had my first encounter with your worldmap today. I find it amazing, and your tutorial very thorough, to say nothing of the source code available. It's mighty generous of you to share with the world. Thank you very much.

    • @jahid973
      @jahid973 Рік тому +1

      It's available in the description

  • @ladyAgnis
    @ladyAgnis 9 місяців тому

    I tried following this tutorial as practice to make a United States version for different states, the main issues i came across while following this specific tutorial were the base SVG code that aren't OOP, they have svg class with names of places and not with a primary branch like "AllPaths" + svg.id . Another issue was onmouse client px adjustment, - 20 for each was too close so had to increase the distance otherwise it never registers the mouse as mouseonleave.

  • @temyraverdana6421
    @temyraverdana6421 10 місяців тому +1

    Thanks a lot, very instructive video

  • @WEBADDA07
    @WEBADDA07 Рік тому +1

    Nice explanation and good work

  • @manuel.camelo
    @manuel.camelo 27 днів тому +2

    So Friggin COOL !!! 👁️👃👁️🙏

  • @nisarop
    @nisarop Рік тому +2

    Many many thanks 👍👍👍👍

  • @rishimalik3738
    @rishimalik3738 Рік тому +1

    Hi TechyWebDev I found this video a very interesting and simple way for a maps related project, I have created a pull request for a small change that would highlight all parts of the country even if they are not connected like northen bits of Canda, try it out and merge it if you liked it. let me know your views.

    • @techywebdev
      @techywebdev  Рік тому +2

      Yes, I have already merged your pull request because it is a great feature to add to this project.

  • @farhan-gl7si
    @farhan-gl7si 5 днів тому

    Very nice sir

  • @MichaelDunsin
    @MichaelDunsin 6 місяців тому +1

    Thanks bro..
    This really helped

  • @FransGamingLow
    @FransGamingLow Рік тому +1

    thanks for this video, help a lot!

  • @FeDourado
    @FeDourado Рік тому +1

    Hello! thanks for this video, help a lot!

  • @almighysanti3061
    @almighysanti3061 Рік тому +2

    do you need professional Abstract to run this API?

    • @almighysanti3061
      @almighysanti3061 Рік тому +1

      I am getting this email and the names arent showing for the country,
      " Your recent request on Abstract failed because you tried to make more requests per second than your plan allows.

      Your current Timezone API plan (Free) only supports 1 request per second."

    • @jahid973
      @jahid973 Рік тому +2

      @@almighysanti3061 it is a limited time api, so you can request for few times in a day. For unlimited, you have to purchase the subscription

  • @a1ex3d
    @a1ex3d 2 роки тому +3

    Hello! For now this image have no class allPaths... Can`t find original one (((

    • @techywebdev
      @techywebdev  2 роки тому +6

      You have to write the class on your own,
      Just find

  • @azlacullen638
    @azlacullen638 Рік тому +2

    Hello! Do you know how to use hover that use data in onEachFeature: function(feature, layer) instead of svg path like you showed in the video?

    • @techywebdev
      @techywebdev  Рік тому +1

      I didn't understand it, can you explain exactly what feature you want.

    • @azlacullen638
      @azlacullen638 Рік тому

      @@techywebdev It's okay now. I already solved the issue. Thank you tho!

    • @HabiburRahman-od7dd
      @HabiburRahman-od7dd Рік тому

      Hi how did you sold that?

    • @azlacullen638
      @azlacullen638 Рік тому +2

      @@HabiburRahman-od7dd First, I have to declare mouseout and mouseover outside of the function that needs mouse events. Then, I put them on the function like this :
      onEachFeature: function(feature, layer) {
      layer.on({
      mouseout: highlightReset,
      mouseover: highlightFeature
      });
      note : highlightReset and highlightFeature are the names of the functions for the mouse events

  • @ezraplaygames
    @ezraplaygames Рік тому +1

    I have and it doesn't work. is there anyway to have it work without pasting svg code to html?

  • @brandonmilitti4118
    @brandonmilitti4118 7 місяців тому +1

    Nice Video. For my college class I have to do something similar in Angular. Does anyone know how similar would the coding structure be from this to angular?

    • @techywebdev
      @techywebdev  7 місяців тому +2

      Actually it will not be that difficult if you know how to control the click event as the main part is the svg

  • @lolkoninkjes1551
    @lolkoninkjes1551 9 місяців тому

    Thanks for the video. Is it also possible to create a map where you can select several different countries and have them labeled in a legend-like box?

  • @Mastershifu707
    @Mastershifu707 Рік тому

    how to replace all class name to "allPaths". and after replace what about the previous classes. should i have to fdelete them manually ?

  • @poojatrendtracker
    @poojatrendtracker Рік тому

    hello , actually meri ek query thi , mujhe aisa hi ek map banana h but bo map mujhe text lable and pointable map banana h taki main use game ki tarh play karu to usme sari countries sequence wise point ho with name
    .
    can uou please tell me ki main aisi website ya map kese bana shakti hoon?
    ASAP reply

  • @hanjarraess2923
    @hanjarraess2923 Рік тому +1

    thanks you, so help for me

  • @sharad2033
    @sharad2033 Рік тому +1

    hi can u tell how to do the same but for the GDP of countries instead of time. would be a great help. thanks

    • @techywebdev
      @techywebdev  Рік тому +1

      Yes it is easy, you just have to find an API for the gdp of all countries and replace that with the existing one.

  • @evothenew3333
    @evothenew3333 2 роки тому +1

    Is the SVG file free/legal to use commercially?

  • @Letbuildme
    @Letbuildme Рік тому

    hi thank you for the informative video but the time says undefined, can you help?

  • @8888-t4d
    @8888-t4d Рік тому +1

    Hi dear, l really like your video and very helpfully for me. But l have a question about country name, l want to write country name over the map(on the country location), but l can't writed can you show me, please?

    • @techywebdev
      @techywebdev  Рік тому +1

      Do you want country name on top of page like the time or on the country itself

    • @8888-t4d
      @8888-t4d Рік тому

      @@techywebdev hi bro, yes l want to show on the country but l can't do that, exactly l check many ways but l don't do that. Can you explain please.

    • @8888-t4d
      @8888-t4d Рік тому

      @@techywebdev l was writed but country name showing behind the country area, l using z-index, position...
      Tags but its not working

  • @AnjaliSharma-lq8ut
    @AnjaliSharma-lq8ut 11 місяців тому +1

    Thank you so much

  • @itshpstylepune9178
    @itshpstylepune9178 Рік тому +1

    Time = undefined undefined coming while running plz give solution

  • @BiceWeg
    @BiceWeg 2 місяці тому

    how to write the path ???????????????????????????????????????????????????????????????

  • @SanjanaChinnu-tp6cg
    @SanjanaChinnu-tp6cg 7 місяців тому +1

    Bro, current time is not showing.. It's showing that, time:undefined how.. Fast reply

    • @techywebdev
      @techywebdev  7 місяців тому +1

      Maybe your api request has reached the max limit, wait for some hours or a day and it will be fine.

  • @soniyaraut8958
    @soniyaraut8958 Рік тому

    Can u provide wholecode plz Asia's not working

  • @soniyaraut8958
    @soniyaraut8958 Рік тому

    Can u provide whole code plz it's not working

  • @vikashsaini4611
    @vikashsaini4611 Рік тому

    hii bro i need your help

  • @thechoosen4240
    @thechoosen4240 10 місяців тому +3

    Good job bro, JESUS IS COMING BACK VERY SOON; WATCH AND PREPARE

  • @JakubUnton
    @JakubUnton Рік тому

    it shows the same time for every country

    • @shivamjadoun-dk5gn
      @shivamjadoun-dk5gn 11 місяців тому

      This problem also happened with me, but we have to create our own abstractapi ID and paste it in the URL but take care of the backtick sign.

  • @hereseverything7737
    @hereseverything7737 8 місяців тому

    India ka map toh sehi se pehele dikha de vai

  • @shivangrawat7208
    @shivangrawat7208 Рік тому +1

    India's map is wrong. Shame on you!!

    • @Tazy50
      @Tazy50 Рік тому

      many maps are wrong. don't take it so seriously