{"id":30372194,"url":"https://github.com/daniilgurski/ip-tracker","last_synced_at":"2025-08-20T06:44:15.406Z","repository":{"id":308890474,"uuid":"1030489601","full_name":"DaniilGurski/IP-tracker","owner":"DaniilGurski","description":"The IP Tracker app using the IP geolocation API and LeafletJS.","archived":false,"fork":false,"pushed_at":"2025-08-08T12:54:26.000Z","size":664,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-08T14:43:01.451Z","etag":null,"topics":["leaflet-reactjs","tanstack-query"],"latest_commit_sha":null,"homepage":"https://ip-tracker-nu-two.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DaniilGurski.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-08-01T18:19:41.000Z","updated_at":"2025-08-08T12:54:30.000Z","dependencies_parsed_at":"2025-08-08T14:43:03.227Z","dependency_job_id":"cd28cb1c-2ce8-4635-8060-47bb2d0846de","html_url":"https://github.com/DaniilGurski/IP-tracker","commit_stats":null,"previous_names":["daniilgurski/ip-tracker"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/DaniilGurski/IP-tracker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DaniilGurski%2FIP-tracker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DaniilGurski%2FIP-tracker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DaniilGurski%2FIP-tracker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DaniilGurski%2FIP-tracker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DaniilGurski","download_url":"https://codeload.github.com/DaniilGurski/IP-tracker/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DaniilGurski%2FIP-tracker/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271279796,"owners_count":24731902,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-20T02:00:09.606Z","response_time":69,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["leaflet-reactjs","tanstack-query"],"created_at":"2025-08-20T06:44:14.792Z","updated_at":"2025-08-20T06:44:15.323Z","avatar_url":"https://github.com/DaniilGurski.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# IP tracker\n\nThe IP Tracker app using the IP geolocation API and LeafletJS.\n\n## Project hightlights\n\n- Leaflet map\n\n## Leaflet map\n\nTo make working with **LeafletJS** easier, I used **React Leaflet**. The leaflet map component consists of four layers: **MapContainer**, **TileLayer**, **Marker**, and **Popup** (not used in this project). Tilelayer is the map tiles themselves, and **OpenStreetMap** is used for them. This is a free resource, but make sure to comply with the **Tile Usage Policy**. React Leaflet helps with this through properties such as **attribution**.\n\n**Useful resources:**\n\n- [LeafletJS Docs](https://leafletjs.com/reference.html)\n- [React Leaflet Docs](https://react-leaflet.js.org/)\n- [Tile Usage Policy](https://operations.osmfoundation.org/policies/tiles/)\n- [React Leaflet Tutorial for Beginners (2023)](https://www.youtube.com/watch?v=jD6813wGdBA\u0026t=751s)\n\n### Dynamic change of the map center\n\nIn the MapContainer component, the center property is **immutable**. The only way to change it is to use the useMap hook, but that is only available to components inside MapContainer. In my case, I needed to change the map view separately from the MapContainer. I found an interesting solution to this problem demonstrated in one CodeSandbox project. The trick is to create a special component (**SetViewOnSubmit.tsx**) that accepts state (or simply reads the value of jotai atom), and pass it to the setView method. This way, I was able to change the state independently of MapContainer and dynamically change the map view.\n\n**SetViewOnSubmit.tsx**:\n\n```js\nimport { ipAddressCoordsAtom } from \"@/atoms\";\nimport { useAtomValue } from \"jotai\";\nimport { useMap } from \"react-leaflet\";\n\nexport default function SetViewOnSubmit() {\n  const ipAddressCoords = useAtomValue(ipAddressCoordsAtom);\n  const map = useMap();\n  map.setView(ipAddressCoords, map.getZoom());\n\n  return null;\n}\n```\n\n**Note:** I think that in this project, I didn't even need to create a state, but simply read the location coordinates from the data obtained from useQuery(), as I did with the error object (as in the IpInfoContainerPlaceholder component).\n\n**Useful resources:**\n\n- [How to change center dynamically in React-Leaflet v.3.x](https://codesandbox.io/p/sandbox/how-to-change-center-dynamically-in-react-leaflet-v3x-d8rn7?file=%2Fsrc%2FMapComp.jsx)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaniilgurski%2Fip-tracker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdaniilgurski%2Fip-tracker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaniilgurski%2Fip-tracker/lists"}