Vanilla JS, Leaflet Maps, and IP Geolocation API

Community feedback

• 

  John•250

  @JohnBroersPosted about 3 years ago

  Really nice job on your solution. Looking spot on with the design. Your sass and javascript is looking well structured. Nice job on using mixins for breakpoints and using css variables.

  A couple things that i noticed in your javascript:

  1. I don't think you need to declare lat and lng variable in the global scope. You only set it once in the function, and pass is on to other functions as arguments. No need to declare it global i think.
  2. I see one 'var' variable which you might wanna change into a const.

  Another thing i noticed here in the accessibility report is that the submit button is missing a text label for screen readers. You might wanna add a screenreader only text element or add an aria-label to fix that issue.

  I agree with you that it was a fun challenge to work on, had a great time working on it as well.

  Marked as helpful

  1

  ---

  

  Genevieve•380

  @bibmodePosted about 3 years ago

  @JohnBroers this is a really, really helpful comment. Thanks! I'll def work on these suggestions tomorrow. :D

  1
• 

  Harmanjot Singh•985

  @arkharman12Posted about 3 years ago

  I am getting "Insert a valid IP address" on every IP address I tried to enter?! 🤔

  Marked as helpful

  1

  ---

  

  Genevieve•380

  @bibmodePosted about 3 years ago

  @arkharman12 what could it be? It's working on my end. I tried to input 8.8.8.8, 123.34.5.6, and 5.5.5.5. I tried a couple more random IP addresses and it's working :o

  0

  

  John•250

  @JohnBroersPosted about 3 years ago

  @arkharman12 @BibMode That's probably because of a browser extension that is blocking the API request (adblock or ublock). Had the same issues while i was working on my solution. Testing in incognito or disabling the plugin for this website should fix it ;)

  Marked as helpful

  2

  

  Genevieve•380

  @bibmodePosted about 3 years ago

  @arkharman12 It could be because the google maps tile I used is only compatible with these browsers: google, IE, firefox & safari. :( I might have to remove it and stick to openmaps instead. Thank you for bringing this to light.

  0

  

  Genevieve•380

  @bibmodePosted about 3 years ago

  @JohnBroers Oh man, thanks! This might be it but I'm thinking of just changing the tile altogether. Did you change yours, perhaps?

  0

  

  Harmanjot Singh•985

  @arkharman12Posted about 3 years ago

  @JohnBroers was right! It seems to be working now, so no worries @BibMode :)

  Marked as helpful

  1

  

  John•250

  @JohnBroersPosted about 3 years ago

  @BibMode The problem was not the maps but the Geoipify API call. When i check my console while opening the website i see:

  GET https://geo.ipify.org/api/v1..... net::ERR_BLOCKED_BY_CLIENT

  Probably uBlock or any other add blocker extension sees this API call as a tracking script and blocks it. I think it's a little bit out of scope for this project to come up with a solution for it. Your solution is working fine :)

  Marked as helpful

  1

  

  Genevieve•380

  @bibmodePosted about 3 years ago

  @JohnBroers ahh so that's what it is. I did not encounter this kind of problem during production since I am not very familiar with testing methods just yet since I'm still a 1 month newbie so I probably would not know what the prob is without you pointing it out XD. I'm just gonna have to leave this solution as is until I get into testing stuffs. Anyways thanks a bunch!

  0