+
-
+
-
+
+
+
+ Step 2
+ Create reference pairs
+
+ + Tap “Start pair” and select a pixel on the photo followed by its real-world location on the map. +
+
+
+
+
+
+
+
+
-
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Step 1
+
+ Import map photo
+Choose a sharp, well-lit image of your trailboard or printed map. Snap2Map keeps only an optimized copy on your device.
+ +Tip: Mobile browsers let you take a new photo or pick one from your gallery when you tap the button above.
+
+
+
+
+
+
+
+
+ No calibration
+ Add at least two reference pairs to calibrate the photo.
+
+
+ Import a map photo to get started.
-
-
+
+
diff --git a/service-worker.js b/service-worker.js
index c21d5d2..59282be 100644
--- a/service-worker.js
+++ b/service-worker.js
@@ -1,4 +1,4 @@
-const CACHE_NAME = 'snap2map-shell-v1';
+const CACHE_NAME = 'snap2map-shell-v2';
const SHELL_ASSETS = [
'/',
'/index.html',
@@ -8,31 +8,91 @@ const SHELL_ASSETS = [
self.addEventListener('install', (event) => {
event.waitUntil(
- caches.open(CACHE_NAME).then((cache) => cache.addAll(SHELL_ASSETS)).then(() => self.skipWaiting()),
+ caches
+ .open(CACHE_NAME)
+ .then((cache) => cache.addAll(SHELL_ASSETS))
+ .catch(() => null)
+ .finally(() => self.skipWaiting()),
);
});
self.addEventListener('activate', (event) => {
event.waitUntil(
- caches.keys().then((keys) => Promise.all(keys.filter((key) => key !== CACHE_NAME).map((key) => caches.delete(key)))).then(() => self.clients.claim()),
+ caches
+ .keys()
+ .then((keys) => Promise.all(keys.filter((key) => key !== CACHE_NAME).map((key) => caches.delete(key))))
+ .then(() => self.clients.claim()),
);
});
self.addEventListener('fetch', (event) => {
- const { request } = event;
- if (request.method !== 'GET') {
+ if (event.request.method !== 'GET') {
return;
}
+
+ const url = new URL(event.request.url);
+ const isSameOrigin = url.origin === self.location.origin;
+ const isNavigation = event.request.mode === 'navigate';
+ const isShellResource = isSameOrigin && SHELL_ASSETS.includes(url.pathname);
+
+ if (!isSameOrigin) {
+ return;
+ }
+
event.respondWith(
- caches.match(request).then((cached) => {
+ caches.open(CACHE_NAME).then(async (cache) => {
+ const cached = await cache.match(event.request);
+
+ const fetchAndUpdate = async () => {
+ const response = await fetch(event.request);
+ if (response && response.ok) {
+ cache.put(event.request, response.clone());
+ }
+ return response;
+ };
+
+ const getNavigationFallback = async () => {
+ const fallback = (await cache.match('/index.html')) || (await cache.match('/'));
+ return fallback || null;
+ };
+
+ if (isNavigation || isShellResource) {
+ try {
+ const response = await fetchAndUpdate();
+ if (response) {
+ return response;
+ }
+ } catch (error) {
+ // network request failed, fall back to cache if possible
+ }
+
+ if (cached) {
+ return cached;
+ }
+
+ if (isNavigation) {
+ const fallback = await getNavigationFallback();
+ if (fallback) {
+ return fallback;
+ }
+ }
+
+ return Response.error();
+ }
+
if (cached) {
+ fetchAndUpdate().catch(() => null);
return cached;
}
- return fetch(request).then((response) => {
- const clone = response.clone();
- caches.open(CACHE_NAME).then((cache) => cache.put(request, clone));
- return response;
- });
- }).catch(() => caches.match('/index.html')),
+
+ try {
+ return await fetchAndUpdate();
+ } catch (error) {
+ if (cached) {
+ return cached;
+ }
+ return Response.error();
+ }
+ }),
);
});
diff --git a/src/index.js b/src/index.js
index 6be2c58..47924ab 100644
--- a/src/index.js
+++ b/src/index.js
@@ -30,6 +30,8 @@ const state = {
geoWatchId: null,
lastPosition: null,
lastGpsUpdate: null,
+ photoPendingCenter: false,
+ osmPendingCenter: false,
// Prompt geolocation when OSM tab opened the first time
osmGeoPrompted: false,
guidedPairing: {
@@ -187,6 +189,15 @@ function updateStatusText() {
}
}
+function setPhotoImportState(hasImage) {
+ if (dom.photoPlaceholder) {
+ dom.photoPlaceholder.classList.toggle('hidden', hasImage);
+ }
+ if (dom.replacePhotoButton) {
+ dom.replacePhotoButton.classList.toggle('hidden', !hasImage);
+ }
+}
+
function clearMarkers(markers) {
markers.forEach((marker) => marker.remove());
return [];
@@ -234,18 +245,18 @@ function renderPairList() {
state.pairs.forEach((pair, index) => {
const row = document.createElement('tr');
- row.className = index % 2 === 0 ? 'bg-white' : 'bg-gray-50';
+ row.className = index % 2 === 0 ? 'bg-slate-900/40' : 'bg-slate-900/20';
const residual = state.calibration && state.calibration.residuals ? state.calibration.residuals[index] : null;
const inlier = state.calibration && state.calibration.inliers ? state.calibration.inliers[index] : false;
const indicatorClass = !state.calibration ? 'bg-blue-500' : inlier ? 'bg-green-500' : 'bg-red-500';
const indicator = ``;
row.innerHTML = `
-
- No calibration
- Add at least two reference pairs to calibrate the photo.
+
+
-
-
+
-
-
+
+ Reference pairs
+ +
+
+
+
+
| Pixel (x, y) | +World (lat, lon) | +Residual | +Actions | +
|---|
Import a map photo to get started.
-
-
- Reference pairs
-
-
-
-
-
- | Pixel (x, y) | -World (lat, lon) | -Residual | -Actions | -
|---|