offline_map_poc/index.html at master · kertechs/offline_map_poc · 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
<!DOCTYPE html>
<html>
<head>
    <title>Offline Mapping</title>
    <meta
        name="viewport"
        content="height=device-height,width=device-width,initial-scale=1.0"
    >

    <link rel="stylesheet" href="libs/leaflet/leaflet.css" />
    <link rel="stylesheet" href="libs/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="libs/bootstrap/css/bootstrap-responsive.min.css" />

    <!-- 3rd party libraries -->
    <script src="libs/jquery.min.js"></script>
    <script src="libs/leaflet/leaflet.js"></script>
    <script src="libs/bootstrap/js/bootstrap.min.js"></script>
    <script src="cordova.js"></script>

    <!-- offline mapping js -->
    <script src="utils/file.js"></script>
    <script src="utils/tile.js"></script>
    <script src="utils/map.js"></script>
    <script src="main.js"></script>
</head>
<body>
    <div id="map" style="height: 300px;"></div>
    <div style="text-align:center;margin-top:20px;">
      MapBox IDs:
      <input
        id="mapbox_id" type="text" size="30"
        placeholder="e.g. examples.map-yr0njcqy"
      /><br /><br />

      <button id="download" style="padding:20px;">Download Tiles</button>
      <button id="clear" style="padding:20px;">Clear Tiles</button>
    </div>

    <!-- modal for progressbar -->
	<div id="progress_modal" class="modal hide fade">
	  <div class="modal-header">
	    <h3>Downloading...</h3>
	  </div>
	  <div class="modal-body"></div>
	</div>

</body>
</html>