Advertisement
metalx1000

Open Street Maps Leaflet Move Marker example 1

Sep 5th, 2024 (edited)
110
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <title></title>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
  8.     <style>
  9. @media only screen and (min-width: 600px) {
  10.   body {
  11.     margin-right: 200px;
  12.     margin-left: 200px;
  13.     margin-top: 20px;
  14.   }
  15. }
  16.     #map {
  17.       height: 100%;
  18.     }
  19.  
  20.  
  21.     html, body {
  22.       height: 100%;
  23.       margin: 0px;
  24.     }
  25.     </style>
  26.   </head>
  27.  
  28.   <body>
  29.     <div id="map"> </div>
  30.   </body>
  31.   <script type="text/javascript" src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
  32.   <script>
  33.     var lat = 26.1635173;
  34.     var lng = -81.5583298;
  35.     var zoom = 15;
  36.  
  37.     var map = L.map('map').setView([lat,lng], zoom);
  38.     L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
  39.       maxZoom: 19,
  40.       attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
  41.     }).addTo(map);
  42.  
  43.     var marker = L.marker([lat,lng]).addTo(map);
  44.     setInterval(function(){
  45.       lng += 0.0001;
  46.       let newLatLng = L.latLng(lat,lng);
  47.       marker.setLatLng(newLatLng);
  48.     },100);
  49.  
  50.     setInterval(function(){
  51.       map.panTo([lat, lng]);
  52.     },5000);
  53.   </script>
  54. </html>
  55.  
  56.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement