Skip to content
Submitted almost 4 years ago

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

Rahul kumar Gautam•655
@RahulKumarGautam1636
A solution to the IP Address Tracker challenge
Preview (opens in new tab)Code (opens in new tab)

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.

Code

Please log in to post a comment

Log in

Community feedback

  • Obinneji Chibuzor Francis•270
    @obinneji

    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

  • bunee•2,020
    @buneeIsSlo

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

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