Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title></title>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
- <style>
- @media only screen and (min-width: 600px) {
- body {
- margin-right: 200px;
- margin-left: 200px;
- margin-top: 20px;
- }
- }
- #map {
- height: 100%;
- }
- html, body {
- height: 100%;
- margin: 0px;
- }
- </style>
- </head>
- <body>
- <div id="map"> </div>
- </body>
- <script type="text/javascript" src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
- <script type="module">
- import {Tween, Easing} from 'https://unpkg.com/@tweenjs/tween.js@23.1.3/dist/tween.esm.js'
- var zoom = 15;
- const coords = [
- {lat: 26.1635173, lng: -81.5693298},
- {lat: 26.1635273, lng: -81.5584298},
- {lat: 26.1605273, lng: -81.5584298},
- {lat: 26.1505273, lng: -81.5504298},
- {lat: 26.1605273, lng: -81.5594298},
- {lat: 26.1635173, lng: -81.5693298}
- ]
- var map = L.map('map').setView([coords[0].lat,coords[0].lng], zoom);
- L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
- maxZoom: 19,
- attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
- }).addTo(map);
- var marker = L.marker([coords[0].lat,coords[0].lng]).addTo(map);
- var i = 0;
- moveMarker();
- function moveMarker(){
- i++;
- if(i > coords.length){i=1};
- let tween = new Tween(coords[0]); // Create a new tween that modifies 'coords'.
- tween.to(coords[i], 1000) // Move over 5 seconds.
- tween.easing(Easing.Quadratic.InOut) // Use an easing function to make the animation smooth.
- tween.onUpdate(() => {
- // Called after tween.js updates 'coords'.
- let newLatLng = L.latLng(coords[0].lat,coords[0].lng);
- marker.setLatLng(newLatLng);// move marker
- })
- tween.start(); // Start the tween immediately.
- tween.onComplete(() =>{
- moveMarker();
- });
- // Setup the animation loop.
- function animate() {
- tween.update()
- requestAnimationFrame(animate)
- }
- requestAnimationFrame(animate)
- }
- </script>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement