-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex copy.html
111 lines (97 loc) · 3.37 KB
/
index copy.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Leaflet in Electron with Multiple Markers</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" />
<style>
#map {
width: 100%;
height: 100vh;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
<script>
const map = L.map('map').setView([28.704060, 77.102493], 15);
// Use Esri World Imagery for satellite view
L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
maxZoom: 19
}).addTo(map);
// Define the custom icon
const customIcon = L.icon({
iconUrl: 'round.png',
iconSize: [20, 20],
iconAnchor: [22, 38],
popupAnchor: [-3, -76],
});
// Array of 10 coordinates (latitude and longitude)
const coordinates = [
{ lat: 28.704060, lon: 77.102493 },
{ lat: 28.705060, lon: 77.103493 },
{ lat: 28.706060, lon: 77.104493 },
{ lat: 28.707060, lon: 77.105493 },
{ lat: 28.708060, lon: 77.106493 },
{ lat: 28.709060, lon: 77.107493 },
{ lat: 28.710060, lon: 77.108493 },
{ lat: 28.711060, lon: 77.109493 },
{ lat: 28.712060, lon: 77.110493 },
{ lat: 28.713060, lon: 77.111493 }
];
let index = 0;
function placeMarker() {
if (index < coordinates.length) {
const { lat, lon } = coordinates[index];
// Add a new marker at the given coordinates
const marker = L.marker([lat, lon], { icon: customIcon }).addTo(map);
marker.bindPopup(`Latitude: ${lat}, Longitude: ${lon}`).openPopup();
index++;
} else {
clearInterval(markerInterval);
}
}
// Call placeMarker every 1 second
const markerInterval = setInterval(placeMarker, 1000);
</script>
</body>
</html>
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Leaflet in Electron with Custom Icon</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" />
<style>
#map {
width: 100%;
height: 100vh;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
<script>
const map = L.map('map').setView([28.749846, 77.114525], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
}).addTo(map);
// Define the custom icon
const customIcon = L.icon({
iconUrl: 'round.png', // Path to your custom icon image
iconSize: [20, 20], // Size of the icon
iconAnchor: [22, 38], // Point of the icon which will correspond to marker's location
popupAnchor: [-3, -76], // Point from which the popup should open relative to the iconAnchor
});
// Add a marker with the custom icon at the specified coordinates
L.marker([28.749846, 77.114525], { icon: customIcon }).addTo(map)
.bindPopup('Coordinates [],[] <br> AQI: 300')
.openPopup();
</script>
</body>
</html> -->