Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

IP tracker with simple Map functionality using leaflet js and mapbox.

@RahulKumarGautam1636

Desktop design screenshot for the IP Address Tracker coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


I wanted it to be more than just a IP tracker, so tried to add some basic functions of a map.

  1. Tap and mark a location/place on the map with your desired name.
  2. Double tap on the markers to zoom in to that place for a closer view.
  3. Get satellite view by tapping layer icon.
  4. Added a slide Bar to see the list of marked places in the current map. tap on these list names to visit that place on map.
  5. Added a recenter button. click on it to recenter the map to your current location.

I tried ipify to get location details with ip address but it always shown me wrong location. the difference was in thousands of kilometers, don't know if its ok or not. so i used ipinfo.io which was more accurate but still was wrong by few kilometers. hence i added the option for Geolocation to get users location which uses GPS to give most possible accurate location. mobiles work perfectly with geolocation.

  1. Double tap on the Recenter button to activate the GPS and you will see your GPS location on the map.
  2. I've used local storage to save the list items so the marked places will not vanish even if you refresh the page.

please share your views about this and let me know if you have any suggestion or idea to improve this. Feedbacks are always welcome.

Community feedback

@obinneji

Posted

This work is great and works well. The only thing is that your active state for the button is not working. Add Hover properties to the submit button using CSS

0
bunee• 2,060

@buneeIsSlo

Posted

@Rhaul, This is honestly the best solution I've seen to this challenge! You've done an incredible job on this one. There's a couple of things I'd like to address...

  • The Layer and Zoom controls can be positioned at a better place(bottomright/bottomleft), Since it becomes un-usable at screen sizes below 700px.(Here's my Solution if you wish to take a look at it.)
  • There's no focus style on any of your input elements Which is needed for accessibility.
  • The form input needs to be reset back to emty.

Apart from these, You did Amazing!

0

@RahulKumarGautam1636

Posted

@buneeIsSlo yes bro i will fix this, thanks for the valuable feedback😊

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord