Skip to content
Submitted over 3 years ago

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

Rahul kumar Gautam•655
@RahulKumarGautam1636
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...IP Address Tracker
  • HTML
  • CSS
  • JS
  • API
3intermediate

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 Chibuzor Francis•270
    @obinnejiPosted over 2 years ago

    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,020
    @buneeIsSloPosted over 3 years ago

    @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
    Rahul kumar Gautam•655
    @RahulKumarGautam1636Posted over 3 years ago

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

    1

Please log in to post a comment

Log in with GitHub

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