-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
85 lines (67 loc) · 2.31 KB
/
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
const loader = document.querySelector("#loading");
let mymap = null;
function displayLoading() {
loader.classList.add("display");
setTimeout(() => {
loader.classList.remove("display");
}, 20000);
}
function hideLoading() {
loader.classList.remove("display");
}
let ipTracker = {
key: "at_AmOTQApybsh7EYLZgDtnZeOLPtMjL",
domain: "",
fetchIp: function (ipAddress) {
displayLoading();
fetch(`https://geo.ipify.org/api/v1?apiKey=${this.key}&ipAddress=${ipAddress}`) // &domain=${this.domain}
.then((response) => response.json())
.then((data) => {
this.displayData(data);
console.log(data);
})
.catch((error) => this.handleErrors(error));
},
displayData: function (data) {
hideLoading();
let { lat } = data.location;
let { lng } = data.location;
mymap = L.map("mapid").setView([lat, lng], 12);
L.tileLayer("https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}", {
attribution:
'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: "mapbox/streets-v11",
tileSize: 512,
zoomOffset: -1,
accessToken: "pk.eyJ1IjoiaXRzbWlsYWQiLCJhIjoiY2twdHg4YTJ2MDc1bzJvbnpkMzM1NTNnZCJ9.ES0tgt90-43JoRJEPO9RHg",
}).addTo(mymap);
// let myIcon = L.icon({
// iconUrl: "./img/icon-location.svg",
// iconSize: [30, 40],
// iconAnchor: [22, 94],
// popupAnchor: [-3, -76],
// shadowSize: [68, 95],
// shadowAnchor: [22, 94],
// });
L.marker([lat, lng]).addTo(mymap);
let { ip, isp } = data;
let { city, country, region, timezone } = data.location;
document.querySelector("#ipaddresss").innerHTML = ip;
document.querySelector("#location").innerHTML = `${city}, ${country}, ${region}`;
document.querySelector("#timezone").innerHTML = `UTC ${timezone}`;
document.querySelector("#isp").innerHTML = isp;
},
handleErrors: function (error) {
console.log(error);
},
search: function () {
mymap.remove();
this.fetchIp(document.querySelector("#ip-input").value);
},
};
document.querySelector("#search-btn").addEventListener("click", () => {
ipTracker.search();
});
// default ip
ipTracker.fetchIp("8.8.8.8");