tes

2026-03-31 12:07:34 +07:00
parent affd5be688
commit c64c82df74
1 changed files with 93 additions and 0 deletions
--- a/index.html
+++ b/index.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title>Map dengan Efek Pulse</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <!-- Leaflet CSS -->
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
+
+    <style>
+        #map {
+            height: 100vh;
+        }
+
+        /* Container untuk marker pulse */
+        .pulse-marker {
+            position: relative;
+            width: 20px;
+            height: 20px;
+        }
+
+        /* Titik utama */
+        .pulse-marker .dot {
+            width: 20px;
+            height: 20px;
+            background: #ff0000;
+            border-radius: 50%;
+            position: absolute;
+            z-index: 2;
+        }
+
+        /* Efek pulse */
+        .pulse-marker .pulse {
+            width: 20px;
+            height: 20px;
+            background: rgba(255, 0, 0, 0.5);
+            border-radius: 50%;
+            position: absolute;
+            animation: pulse-animation 1.5s infinite;
+            z-index: 1;
+        }
+
+        @keyframes pulse-animation {
+            0% {
+                transform: scale(1);
+                opacity: 1;
+            }
+            100% {
+                transform: scale(3);
+                opacity: 0;
+            }
+        }
+    </style>
+</head>
+<body>
+
+<div id="map"></div>
+
+<!-- Leaflet JS -->
+<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+
+<script>
+    // Inisialisasi map
+    var map = L.map('map').setView([-6.200000, 106.816666], 13); // Jakarta
+
+    // Tambahkan tile layer
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '&copy; OpenStreetMap contributors'
+    }).addTo(map);
+
+    // Custom div icon untuk efek pulse
+    var pulseIcon = L.divIcon({
+        className: '',
+        html: `
+            <div class="pulse-marker">
+                <div class="pulse"></div>
+                <div class="dot"></div>
+            </div>
+        `,
+        iconSize: [20, 20],
+        iconAnchor: [10, 10]
+    });
+
+    // Tambahkan marker dengan efek pulse
+    L.marker([-6.200000, 106.816666], { icon: pulseIcon }).addTo(map);
+
+    // Contoh tambahan marker lain
+    L.marker([-6.210000, 106.820000], { icon: pulseIcon }).addTo(map);
+</script>
+
+</body>
+</html>