Attempt to create a new, more react friendly slippy map library.
This commit is contained in:
parent
a154a5aa44
commit
9e8aec244e
|
|
@ -19,7 +19,6 @@
|
|||
"@capacitor/status-bar": "4.0.1",
|
||||
"@ionic/react": "^6.0.0",
|
||||
"@ionic/react-router": "^6.0.0",
|
||||
"@reduxjs/toolkit": "^1.8.5",
|
||||
"@testing-library/jest-dom": "^5.11.9",
|
||||
"@testing-library/react": "^11.2.5",
|
||||
"@testing-library/user-event": "^12.6.3",
|
||||
|
|
@ -31,11 +30,11 @@
|
|||
"@types/react-router": "^5.1.11",
|
||||
"@types/react-router-dom": "^5.1.7",
|
||||
"cordova-plugin-geolocation": "^4.1.0",
|
||||
"gpx-parser-builder": "^1.0.2",
|
||||
"ionicons": "^6.0.3",
|
||||
"pigeon-maps": "^0.21.0",
|
||||
"lodash": "^4.17.21",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-redux": "^8.0.2",
|
||||
"react-router": "^6.3.0",
|
||||
"react-router-dom": "^6.3.0",
|
||||
"react-scripts": "^5.0.0",
|
||||
|
|
@ -55,7 +54,8 @@
|
|||
"workbox-streams": "^5.1.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@capacitor/cli": "4.1.0"
|
||||
"@capacitor/cli": "4.1.0",
|
||||
"@types/lodash": "^4.14.184"
|
||||
}
|
||||
},
|
||||
"node_modules/@adobe/css-tools": {
|
||||
|
|
@ -3157,29 +3157,6 @@
|
|||
"prettier": ">=2.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@reduxjs/toolkit": {
|
||||
"version": "1.8.5",
|
||||
"resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.8.5.tgz",
|
||||
"integrity": "sha512-f4D5EXO7A7Xq35T0zRbWq5kJQyXzzscnHKmjnu2+37B3rwHU6mX9PYlbfXdnxcY6P/7zfmjhgan0Z+yuOfeBmA==",
|
||||
"dependencies": {
|
||||
"immer": "^9.0.7",
|
||||
"redux": "^4.1.2",
|
||||
"redux-thunk": "^2.4.1",
|
||||
"reselect": "^4.1.5"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.9.0 || ^17.0.0 || ^18",
|
||||
"react-redux": "^7.2.1 || ^8.0.2"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"react": {
|
||||
"optional": true
|
||||
},
|
||||
"react-redux": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@rollup/plugin-babel": {
|
||||
"version": "5.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
|
||||
|
|
@ -4040,15 +4017,6 @@
|
|||
"resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
|
||||
"integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA=="
|
||||
},
|
||||
"node_modules/@types/hoist-non-react-statics": {
|
||||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
|
||||
"integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
|
||||
"dependencies": {
|
||||
"@types/react": "*",
|
||||
"hoist-non-react-statics": "^3.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/html-minifier-terser": {
|
||||
"version": "6.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
|
||||
|
|
@ -4139,6 +4107,12 @@
|
|||
"resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
|
||||
"integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="
|
||||
},
|
||||
"node_modules/@types/lodash": {
|
||||
"version": "4.14.184",
|
||||
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.184.tgz",
|
||||
"integrity": "sha512-RoZphVtHbxPZizt4IcILciSWiC6dcn+eZ8oX9IWEYfDMcocdd42f7NPI6fQj+6zI8y4E0L7gu2pcZKLGTRaV9Q==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/mime": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
|
||||
|
|
@ -4292,11 +4266,6 @@
|
|||
"resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz",
|
||||
"integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg=="
|
||||
},
|
||||
"node_modules/@types/use-sync-external-store": {
|
||||
"version": "0.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
|
||||
"integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
|
||||
},
|
||||
"node_modules/@types/ws": {
|
||||
"version": "8.5.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz",
|
||||
|
|
@ -4305,6 +4274,14 @@
|
|||
"@types/node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/xml2js": {
|
||||
"version": "0.4.11",
|
||||
"resolved": "https://registry.npmjs.org/@types/xml2js/-/xml2js-0.4.11.tgz",
|
||||
"integrity": "sha512-JdigeAKmCyoJUiQljjr7tQG3if9NkqGUgwEUqBvV0N7LM4HyQk7UXCnusRa1lnvXAEYJ8mw8GtZWioagNztOwA==",
|
||||
"dependencies": {
|
||||
"@types/node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/yargs": {
|
||||
"version": "16.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.4.tgz",
|
||||
|
|
@ -9089,6 +9066,14 @@
|
|||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/gpx-parser-builder": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/gpx-parser-builder/-/gpx-parser-builder-1.0.2.tgz",
|
||||
"integrity": "sha512-zCTGKANSytYLIicVYUUFTYhz3mbDEtIemWZvC3Vb0j8DhwPMbDSCIl9blMClxSLrr7gGbwLAk1nhj3Z41oC5sw==",
|
||||
"dependencies": {
|
||||
"isomorphic-xml2js": "~0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/graceful-fs": {
|
||||
"version": "4.2.10",
|
||||
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
|
||||
|
|
@ -9249,19 +9234,6 @@
|
|||
"@babel/runtime": "^7.7.6"
|
||||
}
|
||||
},
|
||||
"node_modules/hoist-non-react-statics": {
|
||||
"version": "3.3.2",
|
||||
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
|
||||
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
|
||||
"dependencies": {
|
||||
"react-is": "^16.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/hoist-non-react-statics/node_modules/react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
||||
},
|
||||
"node_modules/hoopy": {
|
||||
"version": "0.1.4",
|
||||
"resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
|
||||
|
|
@ -10008,6 +9980,15 @@
|
|||
"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
|
||||
"integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
|
||||
},
|
||||
"node_modules/isomorphic-xml2js": {
|
||||
"version": "0.1.3",
|
||||
"resolved": "https://registry.npmjs.org/isomorphic-xml2js/-/isomorphic-xml2js-0.1.3.tgz",
|
||||
"integrity": "sha512-dIkT2U9ritKVWF/HfHfGwm5tTnlMnknYsv7l12oJlQQgOV2CNV65pX+FHy6HFL9YP8q0JcrlNQAFRJIN2agUmQ==",
|
||||
"dependencies": {
|
||||
"@types/xml2js": "^0.4.2",
|
||||
"xml2js": "^0.4.19"
|
||||
}
|
||||
},
|
||||
"node_modules/istanbul-lib-coverage": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz",
|
||||
|
|
@ -12599,14 +12580,6 @@
|
|||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/pigeon-maps": {
|
||||
"version": "0.21.0",
|
||||
"resolved": "https://registry.npmjs.org/pigeon-maps/-/pigeon-maps-0.21.0.tgz",
|
||||
"integrity": "sha512-p3GaGday5nmufHVGZW/36LnSXfYVh6qfzYisqcC87nqFr0eXIKkqQcDuPP9g4F1OXL1JeJe4x6JEnAE9HB+zWQ==",
|
||||
"peerDependencies": {
|
||||
"react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/pirates": {
|
||||
"version": "4.0.5",
|
||||
"resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz",
|
||||
|
|
@ -14275,49 +14248,6 @@
|
|||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
|
||||
},
|
||||
"node_modules/react-redux": {
|
||||
"version": "8.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.2.tgz",
|
||||
"integrity": "sha512-nBwiscMw3NoP59NFCXFf02f8xdo+vSHT/uZ1ldDwF7XaTpzm+Phk97VT4urYBl5TYAPNVaFm12UHAEyzkpNzRA==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.12.1",
|
||||
"@types/hoist-non-react-statics": "^3.3.1",
|
||||
"@types/use-sync-external-store": "^0.0.3",
|
||||
"hoist-non-react-statics": "^3.3.2",
|
||||
"react-is": "^18.0.0",
|
||||
"use-sync-external-store": "^1.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "^16.8 || ^17.0 || ^18.0",
|
||||
"@types/react-dom": "^16.8 || ^17.0 || ^18.0",
|
||||
"react": "^16.8 || ^17.0 || ^18.0",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0",
|
||||
"react-native": ">=0.59",
|
||||
"redux": "^4"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
},
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
},
|
||||
"react-native": {
|
||||
"optional": true
|
||||
},
|
||||
"redux": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-redux/node_modules/react-is": {
|
||||
"version": "18.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
|
||||
"integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
|
||||
},
|
||||
"node_modules/react-refresh": {
|
||||
"version": "0.11.0",
|
||||
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
|
||||
|
|
@ -14630,22 +14560,6 @@
|
|||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/redux": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmjs.org/redux/-/redux-4.2.0.tgz",
|
||||
"integrity": "sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.9.2"
|
||||
}
|
||||
},
|
||||
"node_modules/redux-thunk": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.1.tgz",
|
||||
"integrity": "sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q==",
|
||||
"peerDependencies": {
|
||||
"redux": "^4"
|
||||
}
|
||||
},
|
||||
"node_modules/regenerate": {
|
||||
"version": "1.4.2",
|
||||
"resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
|
||||
|
|
@ -15037,11 +14951,6 @@
|
|||
"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
|
||||
"integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
|
||||
},
|
||||
"node_modules/reselect": {
|
||||
"version": "4.1.6",
|
||||
"resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.6.tgz",
|
||||
"integrity": "sha512-ZovIuXqto7elwnxyXbBtCPo9YFEr3uJqj2rRbcOOog1bmu2Ag85M4hixSwFWyaBMKXNgvPaJ9OSu9SkBPIeJHQ=="
|
||||
},
|
||||
"node_modules/resolve": {
|
||||
"version": "1.22.1",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
|
||||
|
|
@ -15307,8 +15216,7 @@
|
|||
"node_modules/sax": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/sax/-/sax-1.1.4.tgz",
|
||||
"integrity": "sha512-5f3k2PbGGp+YtKJjOItpg3P99IMD84E4HOvcfleTb5joCHNXYLsR9yWFPOYGgaeMPDubQILTCMdsFb2OMeOjtg==",
|
||||
"dev": true
|
||||
"integrity": "sha512-5f3k2PbGGp+YtKJjOItpg3P99IMD84E4HOvcfleTb5joCHNXYLsR9yWFPOYGgaeMPDubQILTCMdsFb2OMeOjtg=="
|
||||
},
|
||||
"node_modules/saxes": {
|
||||
"version": "5.0.1",
|
||||
|
|
@ -16904,14 +16812,6 @@
|
|||
"requires-port": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/use-sync-external-store": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
|
||||
"integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/util-deprecate": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
|
||||
|
|
@ -17993,7 +17893,6 @@
|
|||
"version": "0.4.23",
|
||||
"resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.23.tgz",
|
||||
"integrity": "sha512-ySPiMjM0+pLDftHgXY4By0uswI3SPKLDw/i3UXbnO8M/p28zqexCUoPmQFrYD+/1BzhGJSs2i1ERWKJAtiLrug==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"sax": ">=0.6.0",
|
||||
"xmlbuilder": "~11.0.0"
|
||||
|
|
@ -18006,7 +17905,6 @@
|
|||
"version": "11.0.1",
|
||||
"resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-11.0.1.tgz",
|
||||
"integrity": "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=4.0"
|
||||
}
|
||||
|
|
@ -20223,17 +20121,6 @@
|
|||
"prettier": ">=2.3"
|
||||
}
|
||||
},
|
||||
"@reduxjs/toolkit": {
|
||||
"version": "1.8.5",
|
||||
"resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.8.5.tgz",
|
||||
"integrity": "sha512-f4D5EXO7A7Xq35T0zRbWq5kJQyXzzscnHKmjnu2+37B3rwHU6mX9PYlbfXdnxcY6P/7zfmjhgan0Z+yuOfeBmA==",
|
||||
"requires": {
|
||||
"immer": "^9.0.7",
|
||||
"redux": "^4.1.2",
|
||||
"redux-thunk": "^2.4.1",
|
||||
"reselect": "^4.1.5"
|
||||
}
|
||||
},
|
||||
"@rollup/plugin-babel": {
|
||||
"version": "5.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
|
||||
|
|
@ -20883,15 +20770,6 @@
|
|||
"resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
|
||||
"integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA=="
|
||||
},
|
||||
"@types/hoist-non-react-statics": {
|
||||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
|
||||
"integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
|
||||
"requires": {
|
||||
"@types/react": "*",
|
||||
"hoist-non-react-statics": "^3.3.0"
|
||||
}
|
||||
},
|
||||
"@types/html-minifier-terser": {
|
||||
"version": "6.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
|
||||
|
|
@ -20978,6 +20856,12 @@
|
|||
"resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
|
||||
"integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="
|
||||
},
|
||||
"@types/lodash": {
|
||||
"version": "4.14.184",
|
||||
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.184.tgz",
|
||||
"integrity": "sha512-RoZphVtHbxPZizt4IcILciSWiC6dcn+eZ8oX9IWEYfDMcocdd42f7NPI6fQj+6zI8y4E0L7gu2pcZKLGTRaV9Q==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/mime": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
|
||||
|
|
@ -21131,11 +21015,6 @@
|
|||
"resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz",
|
||||
"integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg=="
|
||||
},
|
||||
"@types/use-sync-external-store": {
|
||||
"version": "0.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
|
||||
"integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
|
||||
},
|
||||
"@types/ws": {
|
||||
"version": "8.5.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz",
|
||||
|
|
@ -21144,6 +21023,14 @@
|
|||
"@types/node": "*"
|
||||
}
|
||||
},
|
||||
"@types/xml2js": {
|
||||
"version": "0.4.11",
|
||||
"resolved": "https://registry.npmjs.org/@types/xml2js/-/xml2js-0.4.11.tgz",
|
||||
"integrity": "sha512-JdigeAKmCyoJUiQljjr7tQG3if9NkqGUgwEUqBvV0N7LM4HyQk7UXCnusRa1lnvXAEYJ8mw8GtZWioagNztOwA==",
|
||||
"requires": {
|
||||
"@types/node": "*"
|
||||
}
|
||||
},
|
||||
"@types/yargs": {
|
||||
"version": "16.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.4.tgz",
|
||||
|
|
@ -24628,6 +24515,14 @@
|
|||
"slash": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"gpx-parser-builder": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/gpx-parser-builder/-/gpx-parser-builder-1.0.2.tgz",
|
||||
"integrity": "sha512-zCTGKANSytYLIicVYUUFTYhz3mbDEtIemWZvC3Vb0j8DhwPMbDSCIl9blMClxSLrr7gGbwLAk1nhj3Z41oC5sw==",
|
||||
"requires": {
|
||||
"isomorphic-xml2js": "~0.1"
|
||||
}
|
||||
},
|
||||
"graceful-fs": {
|
||||
"version": "4.2.10",
|
||||
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
|
||||
|
|
@ -24740,21 +24635,6 @@
|
|||
"@babel/runtime": "^7.7.6"
|
||||
}
|
||||
},
|
||||
"hoist-non-react-statics": {
|
||||
"version": "3.3.2",
|
||||
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
|
||||
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
|
||||
"requires": {
|
||||
"react-is": "^16.7.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"hoopy": {
|
||||
"version": "0.1.4",
|
||||
"resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
|
||||
|
|
@ -25273,6 +25153,15 @@
|
|||
"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
|
||||
"integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
|
||||
},
|
||||
"isomorphic-xml2js": {
|
||||
"version": "0.1.3",
|
||||
"resolved": "https://registry.npmjs.org/isomorphic-xml2js/-/isomorphic-xml2js-0.1.3.tgz",
|
||||
"integrity": "sha512-dIkT2U9ritKVWF/HfHfGwm5tTnlMnknYsv7l12oJlQQgOV2CNV65pX+FHy6HFL9YP8q0JcrlNQAFRJIN2agUmQ==",
|
||||
"requires": {
|
||||
"@types/xml2js": "^0.4.2",
|
||||
"xml2js": "^0.4.19"
|
||||
}
|
||||
},
|
||||
"istanbul-lib-coverage": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz",
|
||||
|
|
@ -27212,12 +27101,6 @@
|
|||
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
|
||||
"integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog=="
|
||||
},
|
||||
"pigeon-maps": {
|
||||
"version": "0.21.0",
|
||||
"resolved": "https://registry.npmjs.org/pigeon-maps/-/pigeon-maps-0.21.0.tgz",
|
||||
"integrity": "sha512-p3GaGday5nmufHVGZW/36LnSXfYVh6qfzYisqcC87nqFr0eXIKkqQcDuPP9g4F1OXL1JeJe4x6JEnAE9HB+zWQ==",
|
||||
"requires": {}
|
||||
},
|
||||
"pirates": {
|
||||
"version": "4.0.5",
|
||||
"resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz",
|
||||
|
|
@ -28247,26 +28130,6 @@
|
|||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
|
||||
},
|
||||
"react-redux": {
|
||||
"version": "8.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.2.tgz",
|
||||
"integrity": "sha512-nBwiscMw3NoP59NFCXFf02f8xdo+vSHT/uZ1ldDwF7XaTpzm+Phk97VT4urYBl5TYAPNVaFm12UHAEyzkpNzRA==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.12.1",
|
||||
"@types/hoist-non-react-statics": "^3.3.1",
|
||||
"@types/use-sync-external-store": "^0.0.3",
|
||||
"hoist-non-react-statics": "^3.3.2",
|
||||
"react-is": "^18.0.0",
|
||||
"use-sync-external-store": "^1.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"react-is": {
|
||||
"version": "18.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
|
||||
"integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-refresh": {
|
||||
"version": "0.11.0",
|
||||
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
|
||||
|
|
@ -28509,20 +28372,6 @@
|
|||
"strip-indent": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"redux": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmjs.org/redux/-/redux-4.2.0.tgz",
|
||||
"integrity": "sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.9.2"
|
||||
}
|
||||
},
|
||||
"redux-thunk": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.1.tgz",
|
||||
"integrity": "sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q==",
|
||||
"requires": {}
|
||||
},
|
||||
"regenerate": {
|
||||
"version": "1.4.2",
|
||||
"resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
|
||||
|
|
@ -28826,11 +28675,6 @@
|
|||
"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
|
||||
"integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
|
||||
},
|
||||
"reselect": {
|
||||
"version": "4.1.6",
|
||||
"resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.6.tgz",
|
||||
"integrity": "sha512-ZovIuXqto7elwnxyXbBtCPo9YFEr3uJqj2rRbcOOog1bmu2Ag85M4hixSwFWyaBMKXNgvPaJ9OSu9SkBPIeJHQ=="
|
||||
},
|
||||
"resolve": {
|
||||
"version": "1.22.1",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
|
||||
|
|
@ -28993,8 +28837,7 @@
|
|||
"sax": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/sax/-/sax-1.1.4.tgz",
|
||||
"integrity": "sha512-5f3k2PbGGp+YtKJjOItpg3P99IMD84E4HOvcfleTb5joCHNXYLsR9yWFPOYGgaeMPDubQILTCMdsFb2OMeOjtg==",
|
||||
"dev": true
|
||||
"integrity": "sha512-5f3k2PbGGp+YtKJjOItpg3P99IMD84E4HOvcfleTb5joCHNXYLsR9yWFPOYGgaeMPDubQILTCMdsFb2OMeOjtg=="
|
||||
},
|
||||
"saxes": {
|
||||
"version": "5.0.1",
|
||||
|
|
@ -30195,12 +30038,6 @@
|
|||
"requires-port": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"use-sync-external-store": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
|
||||
"integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
|
||||
"requires": {}
|
||||
},
|
||||
"util-deprecate": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
|
||||
|
|
@ -31096,7 +30933,6 @@
|
|||
"version": "0.4.23",
|
||||
"resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.23.tgz",
|
||||
"integrity": "sha512-ySPiMjM0+pLDftHgXY4By0uswI3SPKLDw/i3UXbnO8M/p28zqexCUoPmQFrYD+/1BzhGJSs2i1ERWKJAtiLrug==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"sax": ">=0.6.0",
|
||||
"xmlbuilder": "~11.0.0"
|
||||
|
|
@ -31105,8 +30941,7 @@
|
|||
"xmlbuilder": {
|
||||
"version": "11.0.1",
|
||||
"resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-11.0.1.tgz",
|
||||
"integrity": "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA==",
|
||||
"dev": true
|
||||
"integrity": "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA=="
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@
|
|||
"@capacitor/status-bar": "4.0.1",
|
||||
"@ionic/react": "^6.0.0",
|
||||
"@ionic/react-router": "^6.0.0",
|
||||
"@reduxjs/toolkit": "^1.8.5",
|
||||
"@testing-library/jest-dom": "^5.11.9",
|
||||
"@testing-library/react": "^11.2.5",
|
||||
"@testing-library/user-event": "^12.6.3",
|
||||
|
|
@ -26,11 +25,11 @@
|
|||
"@types/react-router": "^5.1.11",
|
||||
"@types/react-router-dom": "^5.1.7",
|
||||
"cordova-plugin-geolocation": "^4.1.0",
|
||||
"gpx-parser-builder": "^1.0.2",
|
||||
"ionicons": "^6.0.3",
|
||||
"pigeon-maps": "^0.21.0",
|
||||
"lodash": "^4.17.21",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-redux": "^8.0.2",
|
||||
"react-router": "^6.3.0",
|
||||
"react-router-dom": "^6.3.0",
|
||||
"react-scripts": "^5.0.0",
|
||||
|
|
@ -74,7 +73,8 @@
|
|||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"@capacitor/cli": "4.1.0"
|
||||
"@capacitor/cli": "4.1.0",
|
||||
"@types/lodash": "^4.14.184"
|
||||
},
|
||||
"description": "An Ionic project"
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -16,23 +16,19 @@
|
|||
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
|
||||
<link rel="shortcut icon" type="image/png" href="%PUBLIC_URL%/assets/icon/favicon.png" />
|
||||
<link
|
||||
rel="shortcut icon"
|
||||
type="image/png"
|
||||
href="%PUBLIC_URL%/assets/icon/favicon.png"
|
||||
/>
|
||||
|
||||
<!-- add to homescreen for ios -->
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-title" content="Ionic App" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
|
||||
|
||||
<!-- Leaflet -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/react-leaflet-markercluster/dist/styles.min.css"
|
||||
/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -16,15 +16,12 @@ import '@ionic/react/css/text-transformation.css';
|
|||
import '@ionic/react/css/flex-utils.css';
|
||||
import '@ionic/react/css/display.css';
|
||||
|
||||
import { Provider } from 'react-redux';
|
||||
|
||||
/* Theme variables */
|
||||
import './theme/variables.css';
|
||||
|
||||
/* Components */
|
||||
|
||||
import LiveMap from './components/live-map';
|
||||
import store from './store/index';
|
||||
import Map from './components/map';
|
||||
import React from 'react';
|
||||
|
||||
setupIonicReact();
|
||||
|
|
@ -32,9 +29,7 @@ setupIonicReact();
|
|||
const App: React.FC = () => (
|
||||
<IonApp>
|
||||
<React.StrictMode>
|
||||
<Provider store={store}>
|
||||
<LiveMap />
|
||||
</Provider>
|
||||
<Map />
|
||||
</React.StrictMode>
|
||||
</IonApp>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,55 @@
|
|||
import React from 'react';
|
||||
|
||||
import { PigeonProps, Point } from 'pigeon-maps';
|
||||
import GPX from 'gpx-parser-builder';
|
||||
import { round } from 'lodash';
|
||||
|
||||
const GPXFigure: React.FC<PigeonProps> = (props: PigeonProps) => {
|
||||
const gpx = GPX.parse(localStorage.getItem('gpx'));
|
||||
|
||||
const dirtyLatLngToPixel = (point: Point) => {
|
||||
if (props.mapState === undefined) {
|
||||
return undefined;
|
||||
}
|
||||
const latRange = props.mapState.bounds.ne[0] - props.mapState.bounds.sw[0];
|
||||
const lonRange = props.mapState.bounds.ne[1] - props.mapState.bounds.sw[1];
|
||||
const x = round(
|
||||
((point[0] - props.mapState.bounds.sw[0]) * props.mapState.width) /
|
||||
lonRange
|
||||
);
|
||||
const y = round(
|
||||
((point[1] - props.mapState.bounds.sw[1]) * props.mapState.height) /
|
||||
latRange
|
||||
);
|
||||
return [x, props.mapState.height - y];
|
||||
};
|
||||
|
||||
const trkToPolyline = (gpxData: any) => {
|
||||
const latLongs: string[] = gpxData.trk[0].trkseg[0].trkpt.map(
|
||||
(trkpt: any) => {
|
||||
if (props.latLngToPixel === undefined) {
|
||||
return '';
|
||||
}
|
||||
const point: Point = [trkpt.$.lat, trkpt.$.lon];
|
||||
const pixelPoint = dirtyLatLngToPixel(point);
|
||||
if (pixelPoint === undefined) {
|
||||
return '';
|
||||
}
|
||||
return pixelPoint.join(' ');
|
||||
}
|
||||
);
|
||||
console.log('latLongs: ' + latLongs);
|
||||
return latLongs.join(' ');
|
||||
};
|
||||
|
||||
return (
|
||||
<polyline
|
||||
points={trkToPolyline(gpx)}
|
||||
stroke='black'
|
||||
strokeWidth='3'
|
||||
fill='none'
|
||||
></polyline>
|
||||
);
|
||||
};
|
||||
|
||||
export default GPXFigure;
|
||||
|
|
@ -1,52 +1,23 @@
|
|||
import { Overlay, MapState, Point } from 'pigeon-maps';
|
||||
import React from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
|
||||
const GPXOverlay: React.FC<{
|
||||
mapState: any;
|
||||
latLngToPixel: any;
|
||||
}> = (props: {
|
||||
mapState: MapState;
|
||||
latLngToPixel:
|
||||
| ((
|
||||
latLng: Point,
|
||||
center?: Point | undefined,
|
||||
zoom?: number | undefined
|
||||
) => Point)
|
||||
| undefined;
|
||||
}) => {
|
||||
const track = useSelector((state: { gpx: { current: any; }; }) => state.gpx.current.trk[0]);
|
||||
const trkToPolyline = (trk: any) => {
|
||||
const latLongs: string[] = trk.trkseg[0].trkpt.map((trkpt: any) => {
|
||||
if (props.latLngToPixel === undefined) {
|
||||
return '';
|
||||
}
|
||||
const point: Point = [trkpt['$'].lat, trkpt['$'].lon];
|
||||
const pixelPoint = props.latLngToPixel(point);
|
||||
if (pixelPoint === undefined) {
|
||||
return '';
|
||||
}
|
||||
return pixelPoint.join(' ');
|
||||
});
|
||||
console.log('latLongs: ' + latLongs);
|
||||
return latLongs.join(' ');
|
||||
};
|
||||
import { Overlay, PigeonProps } from 'pigeon-maps';
|
||||
|
||||
import GPXFigure from './gpx-figure';
|
||||
|
||||
const GPXOverlay: React.FC<PigeonProps> = (props: PigeonProps) => {
|
||||
return (
|
||||
<Overlay mapState={props.mapState} latLngToPixel={props.latLngToPixel}>
|
||||
{props.mapState.width > 0 && (
|
||||
<Overlay >
|
||||
{props.mapState && props.mapState.width > 0 && (
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
viewBox={'0 0 ' + props.mapState.width + ' ' + props.mapState.height}
|
||||
width={props.mapState.width}
|
||||
height={props.mapState.height}
|
||||
>
|
||||
<polyline
|
||||
points={trkToPolyline(track)}
|
||||
stroke='black'
|
||||
strokeWidth='3'
|
||||
fill='none'
|
||||
></polyline>
|
||||
<GPXFigure
|
||||
mapState={props.mapState}
|
||||
latLngToPixel={props.latLngToPixel}
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
</Overlay>
|
||||
|
|
|
|||
|
|
@ -1,68 +0,0 @@
|
|||
import react, { useState } from 'react';
|
||||
import { Map, Marker, ZoomControl } from 'pigeon-maps';
|
||||
import { useDispatch } from 'react-redux';
|
||||
|
||||
import { gpxActions } from '../store/gpx';
|
||||
import GPXOverlay from './gpx-overlay';
|
||||
import { registerBackgroundGeolocation } from '../lib/geolocation';
|
||||
|
||||
const LiveMap: react.FC = () => {
|
||||
const initialCenter: [number, number] = [43.57154, 3.94351];
|
||||
const initialZoom: number = 15;
|
||||
const [initialized, setInitialized] = useState(false);
|
||||
const [center, setCenter] = useState(initialCenter);
|
||||
const [position, setPosition] = useState(initialCenter);
|
||||
const [zoom, setZoom] = useState(initialZoom);
|
||||
|
||||
const dispatch = useDispatch();
|
||||
|
||||
if (!initialized) {
|
||||
dispatch(
|
||||
gpxActions.clearGPX({
|
||||
trkKey: 'current',
|
||||
})
|
||||
);
|
||||
dispatch(
|
||||
gpxActions.appendTrkpt({
|
||||
trkKey: 'current',
|
||||
trkpt: {
|
||||
$: {
|
||||
lat: 43.57154,
|
||||
lon: 3.94351,
|
||||
},
|
||||
},
|
||||
})
|
||||
);
|
||||
dispatch(
|
||||
gpxActions.appendTrkpt({
|
||||
trkKey: 'current',
|
||||
trkpt: {
|
||||
$: {
|
||||
lat: 43.56922,
|
||||
lon: 3.94228,
|
||||
},
|
||||
},
|
||||
})
|
||||
);
|
||||
registerBackgroundGeolocation(dispatch);
|
||||
setInitialized(true);
|
||||
}
|
||||
|
||||
return (
|
||||
<Map
|
||||
center={center}
|
||||
zoom={zoom}
|
||||
onBoundsChanged={({ center, zoom }) => {
|
||||
setCenter(center);
|
||||
setZoom(zoom);
|
||||
}}
|
||||
animate={true}
|
||||
>
|
||||
<GPXOverlay mapState={undefined} latLngToPixel={undefined} />
|
||||
<Marker width={20} anchor={position} />
|
||||
<ZoomControl />
|
||||
</Map>
|
||||
);
|
||||
};
|
||||
|
||||
export default LiveMap;
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
import _, { round } from 'lodash';
|
||||
import react, { useState, useEffect } from 'react';
|
||||
|
||||
import GPXOverlay from './gpx-overlay';
|
||||
import Tile from './tile';
|
||||
|
||||
import '../theme/map.css';
|
||||
|
||||
export const tileSize = 256;
|
||||
|
||||
// cf https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#ECMAScript_(JavaScript/ActionScript,_etc.)
|
||||
|
||||
const lon2tile = (lon: number, zoom: number) => {
|
||||
const real = ((lon + 180) / 360) * Math.pow(2, zoom);
|
||||
const floor = Math.floor(real);
|
||||
return [floor, real - floor];
|
||||
};
|
||||
const lat2tile = (lat: number, zoom: number) => {
|
||||
const real =
|
||||
((1 -
|
||||
Math.log(
|
||||
Math.tan((lat * Math.PI) / 180) + 1 / Math.cos((lat * Math.PI) / 180)
|
||||
) /
|
||||
Math.PI) /
|
||||
2) *
|
||||
Math.pow(2, zoom);
|
||||
const floor = Math.floor(real);
|
||||
return [floor, real - floor];
|
||||
};
|
||||
|
||||
const Map: react.FC = () => {
|
||||
const initialCenter: [number, number] = [43.57029965, 3.94242897];
|
||||
const initialZoom: number = 15;
|
||||
const [center, setCenter] = useState(initialCenter);
|
||||
const [zoom, setZoom] = useState(initialZoom);
|
||||
|
||||
const [dimensions, setDimensions] = useState({
|
||||
height: window.innerHeight,
|
||||
width: window.innerWidth,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
setDimensions({
|
||||
height: window.innerHeight,
|
||||
width: window.innerWidth,
|
||||
});
|
||||
};
|
||||
window.addEventListener('resize', handleResize);
|
||||
});
|
||||
|
||||
const nbTilesY = _.ceil(dimensions.height / tileSize) + 2;
|
||||
const nbTilesX = _.ceil(dimensions.width / tileSize) + 2;
|
||||
const [tileCenterY, deltaY] = lat2tile(center[0], zoom);
|
||||
const [tileCenterX, deltaX] = lon2tile(center[1], zoom);
|
||||
const firstTileY = tileCenterY - _.ceil(nbTilesY / 2);
|
||||
const firstTileX = tileCenterX - _.ceil(nbTilesX / 2);
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div className='tiles'>
|
||||
{_.range(nbTilesY).map((iy) => (
|
||||
<div key={'y' + iy} className='tilesRow'>
|
||||
{_.range(nbTilesX).map((ix) => (
|
||||
<Tile
|
||||
key={'x' + ix}
|
||||
iy={iy}
|
||||
ix={ix}
|
||||
x={firstTileX + ix}
|
||||
y={firstTileY + iy}
|
||||
deltaX ={deltaX}
|
||||
deltaY ={deltaY}
|
||||
zoom={zoom}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Map;
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
import React from 'react';
|
||||
import { tileSize } from './map';
|
||||
|
||||
const tileProvider = (zoom: number, x: number, y: number) =>
|
||||
'https://tile.openstreetmap.org/' + zoom + '/' + x + '/' + y + '.png';
|
||||
|
||||
const Tile: React.FC<{
|
||||
ix: number;
|
||||
iy: number;
|
||||
x: number;
|
||||
y: number;
|
||||
deltaX: number;
|
||||
deltaY: number;
|
||||
zoom: number;
|
||||
}> = (props: {
|
||||
ix: number;
|
||||
iy: number;
|
||||
x: number;
|
||||
y: number;
|
||||
deltaX: number;
|
||||
deltaY: number;
|
||||
zoom: number;
|
||||
}) => {
|
||||
const style = {
|
||||
width: tileSize + 'px',
|
||||
height: tileSize + 'px',
|
||||
transform:
|
||||
'translate3d(' +
|
||||
(props.ix - props.deltaX -1) * tileSize +
|
||||
'px, ' +
|
||||
(props.iy - props.deltaY -1) * tileSize +
|
||||
'px, 0px)',
|
||||
};
|
||||
return <img src={tileProvider(props.zoom, props.x, props.y)} style={style} />;
|
||||
};
|
||||
|
||||
export default Tile;
|
||||
|
|
@ -0,0 +1 @@
|
|||
declare module 'gpx-parser-builder'
|
||||
|
|
@ -1,104 +0,0 @@
|
|||
|
||||
|
||||
import { BackgroundGeolocationPlugin } from '@capacitor-community/background-geolocation';
|
||||
import { registerPlugin } from '@capacitor/core';
|
||||
import { gpxActions } from '../store/gpx';
|
||||
|
||||
|
||||
export const registerBackgroundGeolocation = (dispatch: (arg0: any) => void) => {
|
||||
const BackgroundGeolocation = registerPlugin<BackgroundGeolocationPlugin>(
|
||||
'BackgroundGeolocation'
|
||||
);
|
||||
console.log('com.dyomedea.dyomedea LOG', ' - Adding the watcher');
|
||||
BackgroundGeolocation.addWatcher(
|
||||
{
|
||||
// If the "backgroundMessage" option is defined, the watcher will
|
||||
// provide location updates whether the app is in the background or the
|
||||
// foreground. If it is not defined, location updates are only
|
||||
// guaranteed in the foreground. This is true on both platforms.
|
||||
|
||||
// On Android, a notification must be shown to continue receiving
|
||||
// location updates in the background. This option specifies the text of
|
||||
// that notification.
|
||||
backgroundMessage: 'Cancel to prevent battery drain.',
|
||||
|
||||
// The title of the notification mentioned above. Defaults to "Using
|
||||
// your location".
|
||||
backgroundTitle: 'Tracking You.',
|
||||
|
||||
// Whether permissions should be requested from the user automatically,
|
||||
// if they are not already granted. Defaults to "true".
|
||||
requestPermissions: true,
|
||||
|
||||
// If "true", stale locations may be delivered while the device
|
||||
// obtains a GPS fix. You are responsible for checking the "time"
|
||||
// property. If "false", locations are guaranteed to be up to date.
|
||||
// Defaults to "false".
|
||||
stale: false,
|
||||
|
||||
// The minimum number of metres between subsequent locations. Defaults
|
||||
// to 0.
|
||||
distanceFilter: 1,
|
||||
},
|
||||
function callback(location, error) {
|
||||
console.log('com.dyomedea.dyomedea LOG', ' - Callback');
|
||||
if (error) {
|
||||
if (error.code === 'NOT_AUTHORIZED') {
|
||||
if (
|
||||
window.confirm(
|
||||
'This app needs your location, ' +
|
||||
'but does not have permission.\n\n' +
|
||||
'Open settings now?'
|
||||
)
|
||||
) {
|
||||
// It can be useful to direct the user to their device's
|
||||
// settings when location permissions have been denied. The
|
||||
// plugin provides the 'openSettings' method to do exactly
|
||||
// this.
|
||||
BackgroundGeolocation.openSettings();
|
||||
}
|
||||
}
|
||||
return console.error(
|
||||
'com.dyomedea.dyomedea LOG',
|
||||
' - error: ',
|
||||
error
|
||||
);
|
||||
}
|
||||
console.log(location);
|
||||
if (location !== undefined) {
|
||||
//setCenter([location.latitude, location.longitude]);
|
||||
//setPosition([location.latitude, location.longitude]);
|
||||
dispatch(
|
||||
gpxActions.appendTrkpt({
|
||||
trkKey: 'current',
|
||||
trkpt: {
|
||||
$: {
|
||||
lat: location.latitude,
|
||||
lon: location.longitude,
|
||||
},
|
||||
},
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
return console.log(
|
||||
'com.dyomedea.dyomedea LOG',
|
||||
' - location: ',
|
||||
location
|
||||
);
|
||||
}
|
||||
)
|
||||
.then(function after_the_watcher_has_been_added(watcher_id) {
|
||||
// When a watcher is no longer needed, it should be removed by calling
|
||||
// 'removeWatcher' with an object containing its ID.
|
||||
console.log('com.dyomedea.dyomedea LOG', ' - Watcher added');
|
||||
/*BackgroundGeolocation.removeWatcher({
|
||||
id: watcher_id,
|
||||
}); */
|
||||
})
|
||||
.catch((reason) => {
|
||||
console.error('com.dyomedea.dyomedea LOG', ' - reason: ', reason);
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
import _ from 'lodash';
|
||||
|
||||
const initialState: any = {
|
||||
current: {
|
||||
$: {},
|
||||
trk: [
|
||||
{
|
||||
trkseg: [{ trkpt: [] }],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export const appendTrkpt = (gpx:any , trkpt:any) => {
|
||||
var updatedGpx = _.cloneDeep(gpx);
|
||||
updatedGpx.trk[0].trkseg[0].trkpt.push(trkpt);
|
||||
return updatedGpx;
|
||||
};
|
||||
|
||||
export const clearTrkpt = (gpx:any) => {
|
||||
var updatedGpx = _.cloneDeep(gpx);
|
||||
updatedGpx.trk[0]=[];
|
||||
return updatedGpx;
|
||||
};
|
||||
|
||||
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
import { createSlice } from '@reduxjs/toolkit';
|
||||
|
||||
const initialState: any = {
|
||||
current: {
|
||||
$: {},
|
||||
trk: [
|
||||
{
|
||||
trkseg: [{ trkpt: [] }],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
const slice = createSlice({
|
||||
name: 'gpx',
|
||||
initialState: initialState,
|
||||
reducers: {
|
||||
appendTrkpt(state, action) {
|
||||
state[action.payload.trkKey].trk[0].trkseg[0].trkpt.push(
|
||||
action.payload.trkpt
|
||||
);
|
||||
},
|
||||
clearGPX(state, action) {
|
||||
state[action.payload.trkKey] = initialState.current;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const gpxActions = slice.actions;
|
||||
|
||||
export default slice.reducer;
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import { configureStore } from '@reduxjs/toolkit';
|
||||
|
||||
import gpxReducer from './gpx';
|
||||
|
||||
const store = configureStore({
|
||||
reducer: { gpx: gpxReducer },
|
||||
});
|
||||
|
||||
export default store;
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
.tiles {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.tiles img {
|
||||
max-width: none;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue