-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
133 lines (122 loc) · 4.51 KB
/
index.html
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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
<script type="text/javascript" charset="utf-8" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<style>
body {
width: 100%;
height: 100%;
position: absolute;
margin: 0px;
padding: 0px;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
}
#input {
position: absolute;
top: 10px;
left: 10px;
z-index: 1;
}
.ip-tracker {
position: relative;
bottom: 42vh;
background-color: rgba(0, 0, 0, 0.5);
color: white;
padding: 10px;
border-radius: 5px;
margin-bottom: 20px;
}
.input-container {
display: flex;
align-items: center;
justify-content: center;
}
input[type="text"] {
padding: 10px;
border: 2px solid #ccc;
border-radius: 5px;
font-size: 16px;
margin-left: 10px; /* Add margin to create space between input and button */
}
button {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
</style>
<title>IP-finder</title>
</head>
<body>
<div id="map"></div>
<div id="input">
<input type="text" id="ipInput" placeholder="Enter IP Address" />
<button id="searchBtn">Search</button>
</div>
<div class="ip-tracker">IP Address Tracker</div>
<script>
const platform = new H.service.Platform({
apikey: 'aeBu0GkfKm7QWDg1tXqpul8XcdwwzqpFljU0XxPfeiU' // Replace with your HERE API key
});
const defaultLayers = platform.createDefaultLayers();
const map = new H.Map(
document.getElementById('map'),
defaultLayers.vector.normal.map, {
zoom: 7,
center: { lat: 12.981271, lng: 79.166130 }
}
);
const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
window.addEventListener('resize', () => map.getViewPort().resize());
const ui = H.ui.UI.createDefault(map, defaultLayers);
const control = ui.getControl('zoom');
const ipInput = document.getElementById('ipInput');
const searchBtn = document.getElementById('searchBtn');
searchBtn.addEventListener('click', async () => {
const ipAddress = ipInput.value;
// Fetch the IP geolocation data
const ipApiResponse = await fetch(`https://ipinfo.io/${ipAddress}/json`);
const ipLocationData = await ipApiResponse.json();
console.log("IP Geolocation Data:", ipLocationData); // Log the IP geolocation data
// Extract latitude and longitude from the IP location data
const [latitude, longitude] = ipLocationData.loc.split(',');
// Use the obtained coordinates to center the map
map.setCenter({ lat: parseFloat(latitude), lng: parseFloat(longitude) });
//smooth zoom with animation
map.setZoom(14, {duration:1000});
// Display a marker at the location
const marker = new H.map.Marker({ lat: parseFloat(latitude), lng: parseFloat(longitude) });
map.addObject(marker);
});
</script>
</body>
</html>