This is a solution to the IP address tracker challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
- Your challenge is to build out this IP Address Tracker app and get it looking as close to the design as possible.
- To get the IP Address locations, you'll be using the IP Geolocation API by IPify.
- To generate the map, we recommend using LeafletJS.
- Your users should be able to:
- View the optimal layout for each page depending on their device's screen size
- See hover states for all interactive elements on the page
- See their own IP Address on the map on the initial page load
- Search for any IP addresses or domains and see the key information and location
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Vanilla JS
- Leaflet JS
/* ------------ MAP DISPLAY ------------ */
const map_url = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
const map = L.map("map").setView([0, 0], 16);
const tiles = L.tileLayer(map_url, {
attribution:
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
});
tiles.addTo(map);
const icon = L.icon({
iconUrl: "./assets/icon-location.svg",
iconSize: [46, 56], // size of the icon
iconAnchor: [23, 56], // point of the icon which will correspond to marker's location
});
const marker = L.marker([0, 0], { icon: icon });
marker.addTo(map);
function loadMapView(lat, lng) {
map.setView([lat, lng], 16);
marker.setLatLng([lat, lng]);
}
- Leaflet Quick Start Guide
- Markers With Custom Icons
- IP Geolocation API Docs
- Using Fetch | MDN Web Docs
- LinkedIn - @anushka-chauhan
- GitHub - @anushkachauhxn
- Behance - @anushkachauhan
- Twitter - @anushkachauhxn