Skip to content
Submitted over 2 years ago

IP ADDRESS TRACKER USING REACT JS, GEO IPFY AND LEAFLET

accessibility, fetch
newton•330
@newton-w
A solution to the IP Address Tracker challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Was not able to add the custom marker icon, tried implementing the FlyTo for when the ip changes the map centers the marker icon.......i need help😂😂 any advice??

I think i'll try out the google maps instead of leaflet

Code

Please log in to post a comment

Log in

Community feedback

  • dragi-ns•270
    @dragi-ns

    Hi, looks good! I also just finished this challenge.

    You can add a custom marker with the Icon class from leaflet package and then you pass that instance to the icon prop on the Marker component from react-leaflet package.

    As for why doesn't map change when the position is updated take a look at this stackoverflow answer. MapContainer props are immutable: changing them after they have been set a first time will have no effect on the Map instance or its container. So that means you need to create another component as a child of MapContainer that will update map with map.setView.

    Hope this helps!

    Marked as helpful

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