forked from allartk/leaflet.offline
-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.js
133 lines (118 loc) · 3.39 KB
/
index.js
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
/* global L,LeafletOffline, $ */
const urlTemplate = 'https://{s}.statkart.no/gatekeeper/gk/gk.open_gmaps?layers=topo4&zoom={z}&x={x}&y={y}';
function showTileList() {
LeafletOffline.getStorageInfo(urlTemplate).then((r) => {
const list = document.getElementById('tileinforows');
list.innerHTML = '';
for (let i = 0; i < r.length; i += 1) {
const createdAt = new Date(r[i].createdAt);
list.insertAdjacentHTML(
'beforeend',
`<tr><td>${i}</td><td>${r[i].url}</td><td>${
r[i].key
}</td><td>${createdAt.toDateString()}</td></tr>`,
);
}
});
}
$('#storageModal').on('show.bs.modal', () => {
showTileList();
});
const map = L.map('map');
// offline baselayer, will use offline source if available
const baseLayer = L.tileLayer
.offline(urlTemplate, {
attribution: 'Map data {attribution.OpenStreetMap}',
subdomains: ['opencache', 'opencache2', 'opencache3'],
})
.addTo(map);
// add buttons to save tiles in area viewed
const control = L.control.savetiles(baseLayer, {
zoomlevels: [4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19],
parallel: 1,
confirm(layer, succescallback) {
// eslint-disable-next-line no-alert
if (window.confirm(`Save ${layer._tilesforSave.length}`)) {
succescallback();
}
},
confirmRemoval(layer, successCallback) {
// eslint-disable-next-line no-alert
if (window.confirm('Remove all the tiles?')) {
successCallback();
}
},
saveText:
'<i class="fa fa-download" aria-hidden="true" title="Save tiles"></i>',
rmText: '<i class="fa fa-trash" aria-hidden="true" title="Remove tiles"></i>',
});
control.addTo(map);
map.setView(
{
lat: 58.970311,
lng: 5.730891,
},
16,
);
// layer switcher control
const layerswitcher = L.control
.layers({
'osm (offline)': baseLayer,
}, null, { collapsed: false })
.addTo(map);
let storageLayer;
const getGeoJsonData = () => LeafletOffline.getStorageInfo(urlTemplate)
.then((data) => LeafletOffline.getStoredTilesAsJson(baseLayer, data));
const addStorageLayer = () => {
getGeoJsonData().then((geojson) => {
storageLayer = L.geoJSON(geojson).bindPopup(
(clickedLayer) => clickedLayer.feature.properties.key,
);
layerswitcher.addOverlay(storageLayer, 'stored tiles');
});
};
addStorageLayer();
document.getElementById('remove_tiles').addEventListener('click', () => {
control._rmTiles();
});
document.getElementById('save_tiles').addEventListener('click', () => {
control._saveTiles();
})
baseLayer.on('storagesize', (e) => {
document.getElementById('storage').innerHTML = e.storagesize;
if (storageLayer) {
storageLayer.clearLayers();
getGeoJsonData().then((data) => {
storageLayer.addData(data);
});
}
});
// events while saving a tile layer
let progress;
baseLayer.on('savestart', (e) => {
progress = 0;
document.getElementById('total').innerHTML = e._tilesforSave.length;
});
baseLayer.on('savetileend', () => {
progress += 1;
document.getElementById('progress').innerHTML = progress;
});
var i = 0;
function move() {
if (i == 0) {
i = 1;
var elem = document.getElementById("myBar");
var width = 10;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
i = 0;
} else {
width++;
elem.style.width = width + "%";
elem.innerHTML = width + "%";
}
}
}
}