Skip to content
Submitted almost 2 years ago

IP ADDRESS TRACKER USING REACT JS, GEO IPFY AND LEAFLET

newton•330
@newton-w
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

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

Community feedback

  • dragi-ns•270
    @dragi-nsPosted almost 2 years ago

    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
    0
    newton•330
    @newton-wPosted almost 2 years ago

    @dragi-ns thanks for the tips.

    Everything is working as it should now

    0

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