Animation.html 1.69 KB
Newer Older
Boris Mericskay's avatar
Boris Mericskay committed
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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>MapLibreGL / Animation</title>
    <meta name="robots" content="noindex, nofollow" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
  <script src="https://cdn.maptiler.com/maplibre-gl-js/v1.13.0-rc.4/mapbox-gl.js"></script>
  <link href="https://cdn.maptiler.com/maplibre-gl-js/v1.13.0-rc.4/mapbox-gl.css" rel="stylesheet" />
    <style>
    #map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}  

	  .marker {
  background-image: url('mapbox-icon.png');
  background-size: cover;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
}

    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>


// Map configuration

      var map = new mapboxgl.Map({
        container: 'map',
        style: 'https://api.maptiler.com/maps/streets/style.json?key=rrASqj6frF6l2rrOFR4A',
        minZoom: 6,
        maxZoom: 18,
        center: [-1.702, 48.119]      });

// Animation configuration


      function rotate() {
        map.easeTo({ bearing: 100, duration: 8000, pitch: 80, zoom: 17 });
        window.setTimeout(function () {
          map.easeTo({ bearing: 180, duration: 5000, pitch: 0, zoom: 14 });
          window.setTimeout(function () {
            map.easeTo({ bearing: 270, duration: 5000, pitch: 50, zoom: 18 });
            window.setTimeout(function () {
              rotator();
            }, 8000);
          }, 5000);
        }, 5000);
      }

      map.on('load', function () {
        rotate();
		

 // Add marker 	
 
var marker = new mapboxgl.Marker()
.setLngLat([-1.702, 48.119])

.addTo(map);
  
      });
    </script>
  </body>
</html>