MapBox - maps, markers, locations

package-lock.json

@@ -8,6 +8,8 @@
 			"name": "geohry",
 			"version": "0.0.0",
 			"dependencies": {
+				"@beyonk/svelte-mapbox": "^8.1.4",
+				"mapbox-gl": "^2.10.0",
 				"svelte-routing": "^1.6.0",
 				"yallist": "^4.0.0"
 			},
@@ -23,6 +25,11 @@
 				"vite": "^3.0.9"
 			}
 		},
+		"node_modules/@beyonk/svelte-mapbox": {
+			"version": "8.1.4",
+			"resolved": "https://registry.npmjs.org/@beyonk/svelte-mapbox/-/svelte-mapbox-8.1.4.tgz",
+			"integrity": "sha512-H7c5i+iWReb3try5Vk2rIeIXJ6BqmO3eb8OeBntrdKAiKEA0ye7n5t4C13Ne4vvMrfqqzyHuV6kGsM0y/g+lJg=="
+		},
 		"node_modules/@esbuild/linux-loong64": {
 			"version": "0.15.7",
 			"resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.15.7.tgz",
@@ -39,6 +46,67 @@
 				"node": ">=12"
 			}
 		},
+		"node_modules/@mapbox/geojson-rewind": {
+			"version": "0.5.2",
+			"resolved": "https://registry.npmjs.org/@mapbox/geojson-rewind/-/geojson-rewind-0.5.2.tgz",
+			"integrity": "sha512-tJaT+RbYGJYStt7wI3cq4Nl4SXxG8W7JDG5DMJu97V25RnbNg3QtQtf+KD+VLjNpWKYsRvXDNmNrBgEETr1ifA==",
+			"dependencies": {
+				"get-stream": "^6.0.1",
+				"minimist": "^1.2.6"
+			},
+			"bin": {
+				"geojson-rewind": "geojson-rewind"
+			}
+		},
+		"node_modules/@mapbox/geojson-types": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/@mapbox/geojson-types/-/geojson-types-1.0.2.tgz",
+			"integrity": "sha512-e9EBqHHv3EORHrSfbR9DqecPNn+AmuAoQxV6aL8Xu30bJMJR1o8PZLZzpk1Wq7/NfCbuhmakHTPYRhoqLsXRnw=="
+		},
+		"node_modules/@mapbox/jsonlint-lines-primitives": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
+			"integrity": "sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ==",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/@mapbox/mapbox-gl-supported": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-2.0.1.tgz",
+			"integrity": "sha512-HP6XvfNIzfoMVfyGjBckjiAOQK9WfX0ywdLubuPMPv+Vqf5fj0uCbgBQYpiqcWZT6cbyyRnTSXDheT1ugvF6UQ=="
+		},
+		"node_modules/@mapbox/point-geometry": {
+			"version": "0.1.0",
+			"resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
+			"integrity": "sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ=="
+		},
+		"node_modules/@mapbox/tiny-sdf": {
+			"version": "2.0.5",
+			"resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-2.0.5.tgz",
+			"integrity": "sha512-OhXt2lS//WpLdkqrzo/KwB7SRD8AiNTFFzuo9n14IBupzIMa67yGItcK7I2W9D8Ghpa4T04Sw9FWsKCJG50Bxw=="
+		},
+		"node_modules/@mapbox/unitbezier": {
+			"version": "0.0.0",
+			"resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz",
+			"integrity": "sha512-HPnRdYO0WjFjRTSwO3frz1wKaU649OBFPX3Zo/2WZvuRi6zMiRGui8SnPQiQABgqCf8YikDe5t3HViTVw1WUzA=="
+		},
+		"node_modules/@mapbox/vector-tile": {
+			"version": "1.3.1",
+			"resolved": "https://registry.npmjs.org/@mapbox/vector-tile/-/vector-tile-1.3.1.tgz",
+			"integrity": "sha512-MCEddb8u44/xfQ3oD+Srl/tNcQoqTw3goGk2oLsrFxOTc3dUp+kAnby3PvAeeBYSMSjSPD1nd1AJA6W49WnoUw==",
+			"dependencies": {
+				"@mapbox/point-geometry": "~0.1.0"
+			}
+		},
+		"node_modules/@mapbox/whoots-js": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/@mapbox/whoots-js/-/whoots-js-3.1.0.tgz",
+			"integrity": "sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q==",
+			"engines": {
+				"node": ">=6.0.0"
+			}
+		},
 		"node_modules/@nodelib/fs.scandir": {
 			"version": "2.1.5",
 			"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -357,6 +425,11 @@
 			"integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
 			"dev": true
 		},
+		"node_modules/csscolorparser": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz",
+			"integrity": "sha512-umPSgYwZkdFoUrH5hIq5kf0wPSXiro51nPw0j2K/c83KflkPSTBGMz6NJvMB+07VlL0y7VPo6QJcDjcgKTTm3w=="
+		},
 		"node_modules/cssesc": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -444,6 +517,11 @@
 			"integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
 			"dev": true
 		},
+		"node_modules/earcut": {
+			"version": "2.2.4",
+			"resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.4.tgz",
+			"integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ=="
+		},
 		"node_modules/electron-to-chromium": {
 			"version": "1.4.249",
 			"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.249.tgz",
@@ -903,6 +981,27 @@
 			"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
 			"dev": true
 		},
+		"node_modules/geojson-vt": {
+			"version": "3.2.1",
+			"resolved": "https://registry.npmjs.org/geojson-vt/-/geojson-vt-3.2.1.tgz",
+			"integrity": "sha512-EvGQQi/zPrDA6zr6BnJD/YhwAkBP8nnJ9emh3EnHQKVMfg/MRVtPbMYdgVy/IaEmn4UfagD2a6fafPDL5hbtwg=="
+		},
+		"node_modules/get-stream": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+			"integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/gl-matrix": {
+			"version": "3.4.3",
+			"resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.4.3.tgz",
+			"integrity": "sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA=="
+		},
 		"node_modules/glob": {
 			"version": "7.2.3",
 			"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -941,6 +1040,11 @@
 			"integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
 			"dev": true
 		},
+		"node_modules/grid-index": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
+			"integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA=="
+		},
 		"node_modules/has": {
 			"version": "1.0.3",
 			"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -953,6 +1057,25 @@
 				"node": ">= 0.4.0"
 			}
 		},
+		"node_modules/ieee754": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+			"integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/feross"
+				},
+				{
+					"type": "patreon",
+					"url": "https://www.patreon.com/feross"
+				},
+				{
+					"type": "consulting",
+					"url": "https://feross.org/support"
+				}
+			]
+		},
 		"node_modules/immutable": {
 			"version": "4.1.0",
 			"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
@@ -1029,6 +1152,11 @@
 				"node": ">=0.12.0"
 			}
 		},
+		"node_modules/kdbush": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/kdbush/-/kdbush-3.0.0.tgz",
+			"integrity": "sha512-hRkd6/XW4HTsA9vjVpY9tuXJYLSlelnkTmVFu4M9/7MIYQtFcHpbugAU7UbOfjOiVSVYl2fqgBuJ32JUmRo5Ew=="
+		},
 		"node_modules/kleur": {
 			"version": "4.1.5",
 			"resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
@@ -1067,6 +1195,35 @@
 				"node": ">=12"
 			}
 		},
+		"node_modules/mapbox-gl": {
+			"version": "2.10.0",
+			"resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-2.10.0.tgz",
+			"integrity": "sha512-ZAlCe55LXlbg60l15okSBs70NQAPLw3yRO3SSJMTB1uU7uj2QQbLCQPy1Ds+3B4wlaa5W3ewv8FNOZPQOoSSPA==",
+			"dependencies": {
+				"@mapbox/geojson-rewind": "^0.5.1",
+				"@mapbox/geojson-types": "^1.0.2",
+				"@mapbox/jsonlint-lines-primitives": "^2.0.2",
+				"@mapbox/mapbox-gl-supported": "^2.0.1",
+				"@mapbox/point-geometry": "^0.1.0",
+				"@mapbox/tiny-sdf": "^2.0.5",
+				"@mapbox/unitbezier": "^0.0.0",
+				"@mapbox/vector-tile": "^1.3.1",
+				"@mapbox/whoots-js": "^3.1.0",
+				"csscolorparser": "~1.0.3",
+				"earcut": "^2.2.4",
+				"geojson-vt": "^3.2.1",
+				"gl-matrix": "^3.4.3",
+				"grid-index": "^1.1.0",
+				"murmurhash-js": "^1.0.0",
+				"pbf": "^3.2.1",
+				"potpack": "^1.0.2",
+				"quickselect": "^2.0.0",
+				"rw": "^1.3.3",
+				"supercluster": "^7.1.4",
+				"tinyqueue": "^2.0.3",
+				"vt-pbf": "^3.1.3"
+			}
+		},
 		"node_modules/merge2": {
 			"version": "1.4.1",
 			"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -1113,8 +1270,7 @@
 		"node_modules/minimist": {
 			"version": "1.2.6",
 			"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
-			"integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==",
+			"integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q=="
-			"dev": true
 		},
 		"node_modules/mkdirp": {
 			"version": "0.5.6",
@@ -1134,6 +1290,11 @@
 			"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
 			"dev": true
 		},
+		"node_modules/murmurhash-js": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/murmurhash-js/-/murmurhash-js-1.0.0.tgz",
+			"integrity": "sha512-TvmkNhkv8yct0SVBSy+o8wYzXjE4Zz3PCesbfs8HiCXXdcTuocApFv11UWlNFWKYsP2okqrhb7JNlSm9InBhIw=="
+		},
 		"node_modules/nanoid": {
 			"version": "3.3.4",
 			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
@@ -1221,6 +1382,18 @@
 			"integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
 			"dev": true
 		},
+		"node_modules/pbf": {
+			"version": "3.2.1",
+			"resolved": "https://registry.npmjs.org/pbf/-/pbf-3.2.1.tgz",
+			"integrity": "sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==",
+			"dependencies": {
+				"ieee754": "^1.1.12",
+				"resolve-protobuf-schema": "^2.1.0"
+			},
+			"bin": {
+				"pbf": "bin/pbf"
+			}
+		},
 		"node_modules/picocolors": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -1375,6 +1548,16 @@
 			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
 			"dev": true
 		},
+		"node_modules/potpack": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/potpack/-/potpack-1.0.2.tgz",
+			"integrity": "sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ=="
+		},
+		"node_modules/protocol-buffers-schema": {
+			"version": "3.6.0",
+			"resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz",
+			"integrity": "sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw=="
+		},
 		"node_modules/queue-microtask": {
 			"version": "1.2.3",
 			"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -1407,6 +1590,11 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/quickselect": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
+			"integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw=="
+		},
 		"node_modules/read-cache": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -1445,6 +1633,14 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/resolve-protobuf-schema": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz",
+			"integrity": "sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==",
+			"dependencies": {
+				"protocol-buffers-schema": "^3.3.1"
+			}
+		},
 		"node_modules/reusify": {
 			"version": "1.0.4",
 			"resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
@@ -1505,6 +1701,11 @@
 				"queue-microtask": "^1.2.2"
 			}
 		},
+		"node_modules/rw": {
+			"version": "1.3.3",
+			"resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+			"integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ=="
+		},
 		"node_modules/sander": {
 			"version": "0.5.1",
 			"resolved": "https://registry.npmjs.org/sander/-/sander-0.5.1.tgz",
@@ -1576,6 +1777,14 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/supercluster": {
+			"version": "7.1.5",
+			"resolved": "https://registry.npmjs.org/supercluster/-/supercluster-7.1.5.tgz",
+			"integrity": "sha512-EulshI3pGUM66o6ZdH3ReiFcvHpM3vAigyK+vcxdjpJyEbIIrtbmBdY23mGgnI24uXiGFvrGq9Gkum/8U7vJWg==",
+			"dependencies": {
+				"kdbush": "^3.0.0"
+			}
+		},
 		"node_modules/supports-preserve-symlinks-flag": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
@@ -1797,6 +2006,11 @@
 				"node": ">= 6"
 			}
 		},
+		"node_modules/tinyqueue": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-2.0.3.tgz",
+			"integrity": "sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA=="
+		},
 		"node_modules/to-regex-range": {
 			"version": "5.0.1",
 			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -1900,6 +2114,16 @@
 				}
 			}
 		},
+		"node_modules/vt-pbf": {
+			"version": "3.1.3",
+			"resolved": "https://registry.npmjs.org/vt-pbf/-/vt-pbf-3.1.3.tgz",
+			"integrity": "sha512-2LzDFzt0mZKZ9IpVF2r69G9bXaP2Q2sArJCmcCgvfTdCCZzSyz4aCLoQyUilu37Ll56tCblIZrXFIjNUpGIlmA==",
+			"dependencies": {
+				"@mapbox/point-geometry": "0.1.0",
+				"@mapbox/vector-tile": "^1.3.1",
+				"pbf": "^3.2.1"
+			}
+		},
 		"node_modules/wrappy": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
@@ -1931,6 +2155,11 @@
 		}
 	},
 	"dependencies": {
+		"@beyonk/svelte-mapbox": {
+			"version": "8.1.4",
+			"resolved": "https://registry.npmjs.org/@beyonk/svelte-mapbox/-/svelte-mapbox-8.1.4.tgz",
+			"integrity": "sha512-H7c5i+iWReb3try5Vk2rIeIXJ6BqmO3eb8OeBntrdKAiKEA0ye7n5t4C13Ne4vvMrfqqzyHuV6kGsM0y/g+lJg=="
+		},
 		"@esbuild/linux-loong64": {
 			"version": "0.15.7",
 			"resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.15.7.tgz",
@@ -1938,6 +2167,58 @@
 			"dev": true,
 			"optional": true
 		},
+		"@mapbox/geojson-rewind": {
+			"version": "0.5.2",
+			"resolved": "https://registry.npmjs.org/@mapbox/geojson-rewind/-/geojson-rewind-0.5.2.tgz",
+			"integrity": "sha512-tJaT+RbYGJYStt7wI3cq4Nl4SXxG8W7JDG5DMJu97V25RnbNg3QtQtf+KD+VLjNpWKYsRvXDNmNrBgEETr1ifA==",
+			"requires": {
+				"get-stream": "^6.0.1",
+				"minimist": "^1.2.6"
+			}
+		},
+		"@mapbox/geojson-types": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/@mapbox/geojson-types/-/geojson-types-1.0.2.tgz",
+			"integrity": "sha512-e9EBqHHv3EORHrSfbR9DqecPNn+AmuAoQxV6aL8Xu30bJMJR1o8PZLZzpk1Wq7/NfCbuhmakHTPYRhoqLsXRnw=="
+		},
+		"@mapbox/jsonlint-lines-primitives": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
+			"integrity": "sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ=="
+		},
+		"@mapbox/mapbox-gl-supported": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-2.0.1.tgz",
+			"integrity": "sha512-HP6XvfNIzfoMVfyGjBckjiAOQK9WfX0ywdLubuPMPv+Vqf5fj0uCbgBQYpiqcWZT6cbyyRnTSXDheT1ugvF6UQ=="
+		},
+		"@mapbox/point-geometry": {
+			"version": "0.1.0",
+			"resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
+			"integrity": "sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ=="
+		},
+		"@mapbox/tiny-sdf": {
+			"version": "2.0.5",
+			"resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-2.0.5.tgz",
+			"integrity": "sha512-OhXt2lS//WpLdkqrzo/KwB7SRD8AiNTFFzuo9n14IBupzIMa67yGItcK7I2W9D8Ghpa4T04Sw9FWsKCJG50Bxw=="
+		},
+		"@mapbox/unitbezier": {
+			"version": "0.0.0",
+			"resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz",
+			"integrity": "sha512-HPnRdYO0WjFjRTSwO3frz1wKaU649OBFPX3Zo/2WZvuRi6zMiRGui8SnPQiQABgqCf8YikDe5t3HViTVw1WUzA=="
+		},
+		"@mapbox/vector-tile": {
+			"version": "1.3.1",
+			"resolved": "https://registry.npmjs.org/@mapbox/vector-tile/-/vector-tile-1.3.1.tgz",
+			"integrity": "sha512-MCEddb8u44/xfQ3oD+Srl/tNcQoqTw3goGk2oLsrFxOTc3dUp+kAnby3PvAeeBYSMSjSPD1nd1AJA6W49WnoUw==",
+			"requires": {
+				"@mapbox/point-geometry": "~0.1.0"
+			}
+		},
+		"@mapbox/whoots-js": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/@mapbox/whoots-js/-/whoots-js-3.1.0.tgz",
+			"integrity": "sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q=="
+		},
 		"@nodelib/fs.scandir": {
 			"version": "2.1.5",
 			"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -2151,6 +2432,11 @@
 			"integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
 			"dev": true
 		},
+		"csscolorparser": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz",
+			"integrity": "sha512-umPSgYwZkdFoUrH5hIq5kf0wPSXiro51nPw0j2K/c83KflkPSTBGMz6NJvMB+07VlL0y7VPo6QJcDjcgKTTm3w=="
+		},
 		"cssesc": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -2212,6 +2498,11 @@
 			"integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
 			"dev": true
 		},
+		"earcut": {
+			"version": "2.2.4",
+			"resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.4.tgz",
+			"integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ=="
+		},
 		"electron-to-chromium": {
 			"version": "1.4.249",
 			"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.249.tgz",
@@ -2461,6 +2752,21 @@
 			"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
 			"dev": true
 		},
+		"geojson-vt": {
+			"version": "3.2.1",
+			"resolved": "https://registry.npmjs.org/geojson-vt/-/geojson-vt-3.2.1.tgz",
+			"integrity": "sha512-EvGQQi/zPrDA6zr6BnJD/YhwAkBP8nnJ9emh3EnHQKVMfg/MRVtPbMYdgVy/IaEmn4UfagD2a6fafPDL5hbtwg=="
+		},
+		"get-stream": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+			"integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg=="
+		},
+		"gl-matrix": {
+			"version": "3.4.3",
+			"resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.4.3.tgz",
+			"integrity": "sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA=="
+		},
 		"glob": {
 			"version": "7.2.3",
 			"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -2490,6 +2796,11 @@
 			"integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
 			"dev": true
 		},
+		"grid-index": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
+			"integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA=="
+		},
 		"has": {
 			"version": "1.0.3",
 			"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -2499,6 +2810,11 @@
 				"function-bind": "^1.1.1"
 			}
 		},
+		"ieee754": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+			"integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA=="
+		},
 		"immutable": {
 			"version": "4.1.0",
 			"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
@@ -2560,6 +2876,11 @@
 			"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
 			"dev": true
 		},
+		"kdbush": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/kdbush/-/kdbush-3.0.0.tgz",
+			"integrity": "sha512-hRkd6/XW4HTsA9vjVpY9tuXJYLSlelnkTmVFu4M9/7MIYQtFcHpbugAU7UbOfjOiVSVYl2fqgBuJ32JUmRo5Ew=="
+		},
 		"kleur": {
 			"version": "4.1.5",
 			"resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
@@ -2589,6 +2910,35 @@
 				"sourcemap-codec": "^1.4.8"
 			}
 		},
+		"mapbox-gl": {
+			"version": "2.10.0",
+			"resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-2.10.0.tgz",
+			"integrity": "sha512-ZAlCe55LXlbg60l15okSBs70NQAPLw3yRO3SSJMTB1uU7uj2QQbLCQPy1Ds+3B4wlaa5W3ewv8FNOZPQOoSSPA==",
+			"requires": {
+				"@mapbox/geojson-rewind": "^0.5.1",
+				"@mapbox/geojson-types": "^1.0.2",
+				"@mapbox/jsonlint-lines-primitives": "^2.0.2",
+				"@mapbox/mapbox-gl-supported": "^2.0.1",
+				"@mapbox/point-geometry": "^0.1.0",
+				"@mapbox/tiny-sdf": "^2.0.5",
+				"@mapbox/unitbezier": "^0.0.0",
+				"@mapbox/vector-tile": "^1.3.1",
+				"@mapbox/whoots-js": "^3.1.0",
+				"csscolorparser": "~1.0.3",
+				"earcut": "^2.2.4",
+				"geojson-vt": "^3.2.1",
+				"gl-matrix": "^3.4.3",
+				"grid-index": "^1.1.0",
+				"murmurhash-js": "^1.0.0",
+				"pbf": "^3.2.1",
+				"potpack": "^1.0.2",
+				"quickselect": "^2.0.0",
+				"rw": "^1.3.3",
+				"supercluster": "^7.1.4",
+				"tinyqueue": "^2.0.3",
+				"vt-pbf": "^3.1.3"
+			}
+		},
 		"merge2": {
 			"version": "1.4.1",
 			"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -2623,8 +2973,7 @@
 		"minimist": {
 			"version": "1.2.6",
 			"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
-			"integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==",
+			"integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q=="
-			"dev": true
 		},
 		"mkdirp": {
 			"version": "0.5.6",
@@ -2641,6 +2990,11 @@
 			"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
 			"dev": true
 		},
+		"murmurhash-js": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/murmurhash-js/-/murmurhash-js-1.0.0.tgz",
+			"integrity": "sha512-TvmkNhkv8yct0SVBSy+o8wYzXjE4Zz3PCesbfs8HiCXXdcTuocApFv11UWlNFWKYsP2okqrhb7JNlSm9InBhIw=="
+		},
 		"nanoid": {
 			"version": "3.3.4",
 			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
@@ -2710,6 +3064,15 @@
 			"integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
 			"dev": true
 		},
+		"pbf": {
+			"version": "3.2.1",
+			"resolved": "https://registry.npmjs.org/pbf/-/pbf-3.2.1.tgz",
+			"integrity": "sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==",
+			"requires": {
+				"ieee754": "^1.1.12",
+				"resolve-protobuf-schema": "^2.1.0"
+			}
+		},
 		"picocolors": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -2794,6 +3157,16 @@
 			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
 			"dev": true
 		},
+		"potpack": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/potpack/-/potpack-1.0.2.tgz",
+			"integrity": "sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ=="
+		},
+		"protocol-buffers-schema": {
+			"version": "3.6.0",
+			"resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz",
+			"integrity": "sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw=="
+		},
 		"queue-microtask": {
 			"version": "1.2.3",
 			"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -2806,6 +3179,11 @@
 			"integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
 			"dev": true
 		},
+		"quickselect": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
+			"integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw=="
+		},
 		"read-cache": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -2835,6 +3213,14 @@
 				"supports-preserve-symlinks-flag": "^1.0.0"
 			}
 		},
+		"resolve-protobuf-schema": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz",
+			"integrity": "sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==",
+			"requires": {
+				"protocol-buffers-schema": "^3.3.1"
+			}
+		},
 		"reusify": {
 			"version": "1.0.4",
 			"resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
@@ -2868,6 +3254,11 @@
 				"queue-microtask": "^1.2.2"
 			}
 		},
+		"rw": {
+			"version": "1.3.3",
+			"resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+			"integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ=="
+		},
 		"sander": {
 			"version": "0.5.1",
 			"resolved": "https://registry.npmjs.org/sander/-/sander-0.5.1.tgz",
@@ -2924,6 +3315,14 @@
 				"min-indent": "^1.0.0"
 			}
 		},
+		"supercluster": {
+			"version": "7.1.5",
+			"resolved": "https://registry.npmjs.org/supercluster/-/supercluster-7.1.5.tgz",
+			"integrity": "sha512-EulshI3pGUM66o6ZdH3ReiFcvHpM3vAigyK+vcxdjpJyEbIIrtbmBdY23mGgnI24uXiGFvrGq9Gkum/8U7vJWg==",
+			"requires": {
+				"kdbush": "^3.0.0"
+			}
+		},
 		"supports-preserve-symlinks-flag": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
@@ -3041,6 +3440,11 @@
 				}
 			}
 		},
+		"tinyqueue": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-2.0.3.tgz",
+			"integrity": "sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA=="
+		},
 		"to-regex-range": {
 			"version": "5.0.1",
 			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -3090,6 +3494,16 @@
 				"rollup": "~2.78.0"
 			}
 		},
+		"vt-pbf": {
+			"version": "3.1.3",
+			"resolved": "https://registry.npmjs.org/vt-pbf/-/vt-pbf-3.1.3.tgz",
+			"integrity": "sha512-2LzDFzt0mZKZ9IpVF2r69G9bXaP2Q2sArJCmcCgvfTdCCZzSyz4aCLoQyUilu37Ll56tCblIZrXFIjNUpGIlmA==",
+			"requires": {
+				"@mapbox/point-geometry": "0.1.0",
+				"@mapbox/vector-tile": "^1.3.1",
+				"pbf": "^3.2.1"
+			}
+		},
 		"wrappy": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",

package.json

@@ -21,6 +21,8 @@
 		"vite": "^3.0.9"
 	},
 	"dependencies": {
+		"@beyonk/svelte-mapbox": "^8.1.4",
+		"mapbox-gl": "^2.10.0",
 		"svelte-routing": "^1.6.0",
 		"yallist": "^4.0.0"
 	}

src/App.svelte

@@ -7,6 +7,7 @@
 	import Renderer from './lib/Components/Forms/Renderer.svelte'
 	//import Try from './routes/try.svelte'
 	import { data } from './lib/stores/game'
+	import Map from './lib/Components/Forms/MapBefore.svelte'
 </script>
 
 <main>
@@ -22,6 +23,9 @@
 				<h1 class="flex items-center justify-center">Nebyla vybrána žádná hra</h1>
 			{/if}
 		</Route>
+		<Route path="/map">
+			<Map />
+		</Route>
 
 		<Route path="/game">
 			<h1 class="flex items-center justify-center">Nebyla vybrána žádná hra</h1>

src/lib/Components/Forms/MapBefore.svelte

@@ -0,0 +1,2 @@
+<script>
+</script>

src/lib/Components/Forms/Renderer.svelte

@@ -1,4 +1,5 @@
 <script>
+	import MapBefore from './MapBefore.svelte'
 	import TextForm from './TextForm.svelte'
 	import NumberForm from './NumberForm.svelte'
 	import SingleForm from './SingleChoiceForm.svelte'
@@ -7,6 +8,9 @@
 	import QrCode from './QrCode.svelte'
 	import Finish from './Finish.svelte'
 	import parseQuestion from '$lib/utils/parseQuestion'
+	import Circle from '../game/Map/Circle.svelte'
+	import Map from '../game/Map/Map.svelte'
+	import { data } from '$lib/stores/game'
 
 	const components = {
 		TEXT: TextForm,
@@ -17,6 +21,8 @@
 		qrcode: QrCode,
 	}
 
+	let startQuestion = false
+	let userCurrentCoords = {}
 	let control = null // if true => spravne if false spatne
 	//$: console.log(`kontrola: ${control}`)
 
@@ -27,6 +33,7 @@
 		if (control !== null) {
 			control = null
 			clientAnswers.pos++
+			startQuestion = false
 		}
 	}
 
@@ -61,7 +68,20 @@
 	/*--------------- -----------------------------------------------------------*/
 </script>
 
-{#if page}
+{#if !startQuestion}
+	<Map bind:userCurrentCoords class="w-full h-full">
+		<span slot="markers">
+			<Circle
+				bind:enter={startQuestion}
+				{userCurrentCoords}
+				lat={JSON.parse($data.questions[clientAnswers.pos].lat)}
+				lng={JSON.parse($data.questions[clientAnswers.pos].lng)}
+			/>
+		</span>
+	</Map>
+{/if}
+
+{#if page && startQuestion}
 	{#if clientAnswers.pos + 1 !== clientAnswers.end}
 		<svelte:component this={page} gameData={{ question: gameData.questions[clientAnswers.pos], name: gameData.name }} {nextQuestion} bind:control />
 	{:else}

src/lib/Components/Quiz/Layout.svelte

@@ -2,7 +2,6 @@
 	import Heading from './Heading.svelte'
 	import Layout from '../Layout.svelte'
 	import Section from '../Section.svelte'
-	import Map from '../game/Map.svelte'
 	import Button from '../Button.svelte'
 	import Image from '../Image.svelte'
 

src/lib/Components/game/Map/Circle.svelte

@@ -0,0 +1,30 @@
+<script>
+	import { Marker, controls } from '@beyonk/svelte-mapbox'
+	const { GeolocateControl, NavigationControl, ScaleControl } = controls
+	const add = 0.004 //!chce nastavit
+	export let lat, lng
+	export let userCurrentCoords = {}
+
+	let Mlat = [lat - add, lat + add]
+	let Mlng = [lng - add, lng + add]
+	//$: console.log(Mlng, Mlat, userCurrentCoords)
+	$: isIn = userCurrentCoords ? userCurrentCoords.lat > Mlat[0] && userCurrentCoords.lat < Mlat[1] && userCurrentCoords.lng > Mlng[0] && userCurrentCoords.lng < Mlng[1] : null
+	//$: isIn = userCurrentCoords.lat == lat && userCurrentCoords.lng = lng
+	/*$: console.log(userCurrentCoords.lat > Mlat[0], userCurrentCoords.lat < Mlat[1], userCurrentCoords.lng > Mlng[0], userCurrentCoords.lng < Mlng[1])
+	console.log(`
+	mlat: ${Mlat}, mlng: ${Mlng}
+	`)*/
+
+	export let enter
+	$: enter = isIn
+</script>
+
+<Marker popup={false} {lat} {lng}>
+	<div class="w-8 h-8 bg-none rounded-full" />
+</Marker>
+
+<style>
+	div {
+		border: 8px solid red;
+	}
+</style>

src/lib/Components/game/Map/Map.svelte

@@ -0,0 +1,33 @@
+<script>
+	import { Map, Marker, controls } from '@beyonk/svelte-mapbox'
+	const { GeolocateControl, NavigationControl, ScaleControl } = controls
+	let mapComponent
+	let className = ''
+	export { className as class }
+
+	import { data } from '$lib/stores/game'
+	const { lat, lng, district, questions } = $data
+
+	export let userCurrentCoords = {} //lat: 49.308, lng: 14.14628
+</script>
+
+<div class={className}>
+	<Map
+		class="w-full h-full"
+		accessToken="pk.eyJ1IjoiZXJhbnQ0MiIsImEiOiJjbDdybXo4dmswZ3E5M3FwMnFsazdpb3VoIn0.wXblbreOUt3e8N81CAH0Wg"
+		style="mapbox://styles/mapbox/outdoors-v11"
+		bind:this={mapComponent}
+		on:ready={() => mapComponent.setCenter([lng, lat], 14)}
+		zoom="14"
+		projection="globe"
+	>
+		<slot name="markers" />
+		<GeolocateControl on:geolocate={(e) => (userCurrentCoords = { lat: e.detail.coords.latitude, lng: e.detail.coords.longitude })} />
+	</Map>
+</div>
+
+<style>
+	:global(.mapboxgl-marker) {
+		cursor: pointer;
+	}
+</style>

src/main.scss

@@ -19,6 +19,9 @@ body {
 	justify-content: center;
 	display: flex;
 }
+.mapboxgl-ctrl-logo, .mapboxgl-ctrl-bottom-right {
+	display: none !important;
+}
 
 h1,
 h2,

src/routes/game.svelte

@@ -1,4 +1,5 @@
 <script>
+	import Circle from './../lib/Components/game/Map/Circle.svelte'
 	import Heading from '../lib/Components/game/Heading.svelte'
 	import Overlay from '../lib/Components/Overlay.svelte'
 	import Section from '../lib/Components/Section.svelte'
@@ -6,8 +7,9 @@
 	import Bubble from '../lib/Components/game/Bubble.svelte'
 	import IconStar from '../lib/Components/Icons/Star.svelte'
 	import IconPoint from '../lib/Components/Icons/Point.svelte'
-	import Map from '../lib/Components/game/Map.svelte'
+	import Map from '../lib/Components/game/Map/Map.svelte'
 	import ImageSlider from '../lib/Components/ImageSlider.svelte'
+
 	import * as api from '$lib/utils/api'
 	import { data } from '$lib/stores/game'
 
@@ -56,8 +58,15 @@
 			<Section title="Fotky">
 				<ImageSlider images={assets} />
 			</Section>
-			<Map />
+			{#if $data}
-
+				<Map class="w-full h-44">
+					<span slot="markers">
+						{#each $data.questions as { lat, lng }}
+							<Circle {lat} {lng} />
+						{/each}
+					</span>
+				</Map>
+			{/if}
 			<Button href="/play" primary>Hrát</Button>
 		{/if}
 	</Overlay>