https://regiony.eu/cykloatlas/index.html

1<!DOCTYPE HTML>
2<html lang="en">
3
4<head>
5  <meta charset="UTF-8">
6  <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width">
7
8  <title>Cykloatlas</title>
9
10  <!-- include leaflet css and javascript -->
11  <link rel="stylesheet" href="assets/css/bootstrap.min.css">
12  <link rel="stylesheet" href="assets/css/font-awesome.min.css">
13
14  <link rel="stylesheet" href="assets/leaf/leaflet.css" />
15  <link rel="stylesheet" href="assets/leaf/leaflet.zoomdisplay.css">
16  <link rel="stylesheet" href="assets/leaf/L.Grid.css">
17  <link rel="stylesheet" href="assets/leaf/leaflet-sidepanel.css">
18  <link rel="stylesheet" href="assets/leaf/Control.MiniMap.min.css">
19  <link rel="stylesheet" href="assets/leaf/leaflet-gps.src.css">
20  <link rel="stylesheet" href="assets/leaf/leaflet-compass.src.css">
21
22  <link rel="stylesheet" href="assets/leaflet-groupedlayercontrol/leaflet.groupedlayercontrol.css">
23
24  <link rel="stylesheet" href="assets/css/app.css" />
25
26
27  <style type="text/css">
28    html,
29    body,
30    #map {
31      margin: 0;
32      font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
33      height: 100%;
34      color: #1f1412;
35      font-weight: 400;
36    }
37
38  </style>
39
40</head>
41
42<body>
43
44  <div id="map">
45
46    <div id="mySidepanelLeft" class="sidepanel" aria-label="side panel" aria-hidden="false">
47      <div class="sidepanel-inner-wrapper">
48        <nav class="sidepanel-tabs-wrapper" aria-label="sidepanel tab navigation">
49          <ul class="sidepanel-tabs">
50            <li class="sidepanel-tab">
51              <a href="#" class="sidebar-tab-link" role="tab" data-tab-link="tab-1"> <i class="fa fa-2x fa-globe white"></i> </a>
52            </li>
53            <li class="sidepanel-tab">
54              <a href="#" class="sidebar-tab-link" role="tab" data-tab-link="tab-2"> <i class="fa fa-2x fa-map-o white"></i> </a>
55            </li>
56            <li class="sidepanel-tab">
57              <a href="#" class="sidebar-tab-link" role="tab" data-tab-link="tab-3"> <i class="fa fa-2x fa-question-circle white"></i> </a>
58            </li>
59            <li class="sidepanel-tab">
60              <a href="#" class="sidebar-tab-link" role="tab" data-tab-link="tab-4"> <i class="fa  fa-2x fa-pencil white"></i>  </a>
61            </li>
62            <li class="sidepanel-tab">
63              <a href="#" class="sidebar-tab-link" role="tab" data-tab-link="tab-5"> <i class="fa fa-2x fa-navicon white"></i>  </a>
64            </li>
65          </ul>
66        </nav>
67
68        <div class="sidepanel-content-wrapper">
69          <div class="sidepanel-content">
70
71            <div class="sidepanel-tab-content" data-tab-content="tab-1">
72              <h4>Content 1</h4>
73            </div>
74            <div class="sidepanel-tab-content" data-tab-content="tab-2">
75              <h4>Content 2</h4>
76            </div>
77            <div class="sidepanel-tab-content" data-tab-content="tab-3">
78              <h4>Content 3</h4>
79            </div>
80            <div class="sidepanel-tab-content" data-tab-content="tab-4">
81              <h4>Content 4</h4>
82            </div>
83            <div class="sidepanel-tab-content" data-tab-content="tab-5">
84              <h4>Content 5</h4>
85            </div>
86
87
88          </div>
89        </div>
90      </div>
91
92      <div class="sidepanel-toggle-container">
93        <button class="sidepanel-toggle-button" type="button" aria-label="toggle side panel"></button>
94      </div>
95
96    </div>
97  </div>
98
99
100
101
102  

102<script type="text/javascript" src="assets/js/jquery-3.7.1.min.js"></script>

102
103  

103<script type="text/javascript" src="assets/js/bootstrap.bundle.min.js"></script>

103
104
105  

105<script type="text/javascript" src="assets/leaf/leaflet.js"></script>

105
106  

106<script type="text/javascript" src="assets/leaf/leaflet.zoomdisplay.js"></script>

106
107  

107<script type="text/javascript" src="assets/leaf/L.Grid.js"></script>

107
108  

108<script type="text/javascript" src="assets/leaf/L.TileGrid.js"></script>

108
109  

109<script type="text/javascript" src="assets/leaf/leaflet-sidepanel.min.js"></script>

109
110  

110<script type="text/javascript" src="assets/leaf/Control.MiniMap.min.js"></script>

110
111  

111<script type="text/javascript" src="assets/leaf/leaflet-gps.min.js"></script>

111
112  

112<script type="text/javascript" src="assets/leaf/leaflet-compass.min.js"></script>

112
113
114  

114<script src="assets/leaflet-groupedlayercontrol/leaflet.groupedlayercontrol.js"></script>

114
115  

115<script src="assets/js/appmap.js"></script>

115
116
117</body>
118
119</html>