Rustem/services.html at main · Russ312/Rustem · GitHub

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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.71/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.71/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
  <div id="cesiumContainer" style="width: 700px; height:400px"></div>
  <script>
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwODkxMjE4Zi0zNWJkLTRmOTgtYmVkYy1mNjM1ZjI0OWQ2ZjEiLCJpZCI6MzE5MzEsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1OTYxNzQ4MjB9.H7TXp7Vy9jk0enHBUOsfRJXdL8MUVjRQQvqwRMEmkoE';
    var viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProvider: Cesium.createWorldTerrain()
});
    // var viewer = new Cesium.Viewer('cesiumContainer');
    // viewer.scene.primitives.add(Cesium.createOsmBuildings());
  </script>
</body>
</html>


    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,user-scalable=no"
    />
    <title>Services</title>
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
    />
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
    <style>
      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map = L.map("map").setView([0, 0], 1);

      L.tileLayer(
        "https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=ifM6JB8yYniIGnVSqLzJ",
        {
          attribution:
            '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>',
          crossOrigin: true,
        }
      ).addTo(map);
      var marker = L.marker([51.1605, 71.4704]).addTo(map);

      var circle = L.circle([51.16, 71.5], {
        color: "red",
        fillColor: "#f03",
        fillOpacity: 0.5,
        radius: 50000,
      }).addTo(map);

      var polygon = L.polygon([
        [51.16, 71.5],
        [51.5, 71.7],
        [51.7, 71.3],
      ]).addTo(map);

      marker
        .bindPopup("<b> Hey there! </b><br> I am Russ and I'm here!")
        .openPopup();
      circle.bindPopup(
        "<b> This is our initial area of activity</b><br> Let's change it for the better!"
      );
      polygon.bindPopup("I am a polygon");
    </script>
  </body>
</html>