diff --git a/docs/docs/.vitepress/config.ts b/docs/docs/.vitepress/config.ts
index c39582ea2..7c4ab05d8 100644
--- a/docs/docs/.vitepress/config.ts
+++ b/docs/docs/.vitepress/config.ts
@@ -71,6 +71,7 @@ export default {
       },
     ],
   },
+  ignoreDeadLinks: 'localhostLinks',
   vite: {
     build: {
       target: "esnext",
diff --git a/docs/docs/public/components/mapbox.png b/docs/docs/public/components/mapbox.png
new file mode 100644
index 000000000..11cbe658e
Binary files /dev/null and b/docs/docs/public/components/mapbox.png differ
diff --git a/ui/package-lock.json b/ui/package-lock.json
index a2526d984..501f49f96 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -13,6 +13,7 @@
 				"@monaco-editor/loader": "^1.3.3",
 				"@tato30/vue-pdf": "1.9.4",
 				"arquero": "^5.2.0",
+				"mapbox-gl": "3.1.2",
 				"marked": "^7.0.2",
 				"monaco-editor": "^0.41.0",
 				"plotly.js-dist-min": "^2.22.0",
@@ -27,6 +28,7 @@
 			"devDependencies": {
 				"@rushstack/eslint-patch": "^1.2.0",
 				"@types/google.maps": "3.55.3",
+				"@types/mapbox-gl": "2.7.21",
 				"@types/marked": "^5.0.1",
 				"@typescript-eslint/eslint-plugin": "7.0.1",
 				"@vitejs/plugin-vue": "^4.2.1",
@@ -263,6 +265,31 @@
 				"@jridgewell/sourcemap-codec": "^1.4.14"
 			}
 		},
+		"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/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/node-pre-gyp": {
 			"version": "1.0.11",
 			"resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.11.tgz",
@@ -283,6 +310,37 @@
 				"node-pre-gyp": "bin/node-pre-gyp"
 			}
 		},
+		"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.6",
+			"resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-2.0.6.tgz",
+			"integrity": "sha512-qMqa27TLw+ZQz5Jk+RcwZGH7BQf5G/TrutJhspsca/3SHwmgKQ1iq+d3Jxz5oysPVYTGP6aXxCo5Lk9Er6YBAA=="
+		},
+		"node_modules/@mapbox/unitbezier": {
+			"version": "0.0.1",
+			"resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.1.tgz",
+			"integrity": "sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw=="
+		},
+		"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/@monaco-editor/loader": {
 			"version": "1.3.3",
 			"license": "MIT",
@@ -408,6 +466,15 @@
 			"integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
 			"dev": true
 		},
+		"node_modules/@types/mapbox-gl": {
+			"version": "2.7.21",
+			"resolved": "https://registry.npmjs.org/@types/mapbox-gl/-/mapbox-gl-2.7.21.tgz",
+			"integrity": "sha512-Dx9MuF2kKgT/N22LsMUB4b3acFZh9clVqz9zv1fomoiPoBrJolwYxpWA/9LPO/2N0xWbKi4V+pkjTaFkkx/4wA==",
+			"dev": true,
+			"dependencies": {
+				"@types/geojson": "*"
+			}
+		},
 		"node_modules/@types/marked": {
 			"version": "5.0.1",
 			"dev": true,
@@ -1028,6 +1095,11 @@
 				"is-regex": "^1.0.3"
 			}
 		},
+		"node_modules/cheap-ruler": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/cheap-ruler/-/cheap-ruler-3.0.2.tgz",
+			"integrity": "sha512-02T332h1/HTN6cDSufLP8x4JzDs2+VC+8qZ/N0kWIVPyc2xUkWwWh3B2fJxR7raXkL4Mq7k554mfuM9ofv/vGg=="
+		},
 		"node_modules/chownr": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
@@ -1147,6 +1219,11 @@
 				"node": ">= 8"
 			}
 		},
+		"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",
 			"dev": true,
@@ -1446,6 +1523,11 @@
 			"version": "3.0.5",
 			"license": "(MPL-2.0 OR Apache-2.0)"
 		},
+		"node_modules/earcut": {
+			"version": "2.2.4",
+			"resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.4.tgz",
+			"integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ=="
+		},
 		"node_modules/emoji-regex": {
 			"version": "8.0.0",
 			"license": "MIT"
@@ -1981,6 +2063,11 @@
 				"node": ">=10"
 			}
 		},
+		"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-caller-file": {
 			"version": "2.0.5",
 			"license": "ISC",
@@ -2002,6 +2089,22 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"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",
 			"devOptional": true,
@@ -2072,6 +2175,11 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"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",
 			"dev": true,
@@ -2155,6 +2263,25 @@
 				"node": ">=0.10.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/ignore": {
 			"version": "5.2.4",
 			"dev": true,
@@ -2340,6 +2467,11 @@
 			"version": "3.0.0",
 			"license": "MIT"
 		},
+		"node_modules/kdbush": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/kdbush/-/kdbush-4.0.2.tgz",
+			"integrity": "sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA=="
+		},
 		"node_modules/levn": {
 			"version": "0.4.1",
 			"dev": true,
@@ -2424,6 +2556,36 @@
 				"semver": "bin/semver.js"
 			}
 		},
+		"node_modules/mapbox-gl": {
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-3.1.2.tgz",
+			"integrity": "sha512-+KoLEqZM8GxO/ViPz9tKgGURteKne+Y0pXiVCNsowymiZFH3FiL6dt9oZE95owMg5XqD3Kygz5mfchR1ZgmWlA==",
+			"dependencies": {
+				"@mapbox/geojson-rewind": "^0.5.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.6",
+				"@mapbox/unitbezier": "^0.0.1",
+				"@mapbox/vector-tile": "^1.3.1",
+				"@mapbox/whoots-js": "^3.1.0",
+				"cheap-ruler": "^3.0.1",
+				"csscolorparser": "~1.0.3",
+				"earcut": "^2.2.4",
+				"geojson-vt": "^3.2.1",
+				"gl-matrix": "^3.4.3",
+				"grid-index": "^1.1.0",
+				"kdbush": "^4.0.1",
+				"murmurhash-js": "^1.0.0",
+				"pbf": "^3.2.1",
+				"potpack": "^2.0.0",
+				"quickselect": "^2.0.0",
+				"rw": "^1.3.3",
+				"supercluster": "^8.0.0",
+				"tinyqueue": "^2.0.3",
+				"vt-pbf": "^3.1.3"
+			}
+		},
 		"node_modules/marked": {
 			"version": "7.0.2",
 			"license": "MIT",
@@ -2481,7 +2643,6 @@
 		},
 		"node_modules/minimist": {
 			"version": "1.2.8",
-			"dev": true,
 			"license": "MIT",
 			"funding": {
 				"url": "https://github.com/sponsors/ljharb"
@@ -2541,6 +2702,11 @@
 			"devOptional": true,
 			"license": "MIT"
 		},
+		"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/nan": {
 			"version": "2.18.0",
 			"resolved": "https://registry.npmjs.org/nan/-/nan-2.18.0.tgz",
@@ -2753,6 +2919,18 @@
 				"node": ">=8"
 			}
 		},
+		"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/pdfjs-dist": {
 			"version": "3.7.107",
 			"resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-3.7.107.tgz",
@@ -2823,6 +3001,11 @@
 				"node": ">=4"
 			}
 		},
+		"node_modules/potpack": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/potpack/-/potpack-2.0.0.tgz",
+			"integrity": "sha512-Q+/tYsFU9r7xoOJ+y/ZTtdVQwTWfzjbiXBDMM/JKUux3+QPP02iUuIoeBQ+Ot6oEDlC+/PGjB/5A3K7KKb7hcw=="
+		},
 		"node_modules/prelude-ls": {
 			"version": "1.2.1",
 			"dev": true,
@@ -2857,6 +3040,11 @@
 				"node": ">=6.0.0"
 			}
 		},
+		"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/pug-error": {
 			"version": "2.0.0",
 			"dev": true,
@@ -2900,6 +3088,11 @@
 			],
 			"license": "MIT"
 		},
+		"node_modules/quickselect": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
+			"integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw=="
+		},
 		"node_modules/randombytes": {
 			"version": "2.1.0",
 			"license": "MIT",
@@ -2971,6 +3164,14 @@
 				"node": ">=4"
 			}
 		},
+		"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",
 			"dev": true,
@@ -3230,6 +3431,14 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/supercluster": {
+			"version": "8.0.1",
+			"resolved": "https://registry.npmjs.org/supercluster/-/supercluster-8.0.1.tgz",
+			"integrity": "sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==",
+			"dependencies": {
+				"kdbush": "^4.0.2"
+			}
+		},
 		"node_modules/supports-color": {
 			"version": "5.5.0",
 			"license": "MIT",
@@ -3348,6 +3557,11 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"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",
@@ -4084,6 +4298,16 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"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/vue": {
 			"version": "3.3.4",
 			"license": "MIT",
diff --git a/ui/package.json b/ui/package.json
index b6cb77296..a8e62c8db 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -15,6 +15,7 @@
 		"@googlemaps/js-api-loader": "1.16.3",
 		"@monaco-editor/loader": "^1.3.3",
 		"arquero": "^5.2.0",
+		"mapbox-gl": "3.1.2",
 		"marked": "^7.0.2",
 		"monaco-editor": "^0.41.0",
 		"plotly.js-dist-min": "^2.22.0",
@@ -30,6 +31,7 @@
 	"devDependencies": {
 		"@rushstack/eslint-patch": "^1.2.0",
 		"@types/google.maps": "3.55.3",
+		"@types/mapbox-gl": "2.7.21",
 		"@types/marked": "^5.0.1",
 		"@typescript-eslint/eslint-plugin": "7.0.1",
 		"@vitejs/plugin-vue": "^4.2.1",
diff --git a/ui/src/core/templateMap.ts b/ui/src/core/templateMap.ts
index 51812a0e0..d6f707ac2 100644
--- a/ui/src/core/templateMap.ts
+++ b/ui/src/core/templateMap.ts
@@ -47,6 +47,8 @@ import CoreGoogleMaps from "../core_components/embed/CoreGoogleMaps.vue";
 import CorePage from "../core_components/root/CorePage.vue";
 import CoreRoot from "../core_components/root/CoreRoot.vue";
 
+import CoreMapbox from "../core_components/embed/CoreMapbox.vue";
+
 import { StreamsyncComponentDefinition } from "../streamsyncTypes";
 import { h } from "vue";
 
@@ -73,6 +75,7 @@ const templateMap = {
 	pdf: CorePDF,
 	iframe: CoreIFrame,
 	googlemaps: CoreGoogleMaps,
+	mapbox: CoreMapbox,
 	icon: CoreIcon,
 	timer: CoreTimer,
 	textinput: CoreTextInput,
diff --git a/ui/src/core_components/embed/CoreMapbox.vue b/ui/src/core_components/embed/CoreMapbox.vue
new file mode 100644
index 000000000..ca39b4bd5
--- /dev/null
+++ b/ui/src/core_components/embed/CoreMapbox.vue
@@ -0,0 +1,230 @@
+<template>
+	<div ref="rootEl" class="CoreMapbox">
+		<div ref="mapEl" class="map" />
+		<div class="mask" />
+	</div>
+</template>
+
+<script lang="ts">
+import { FieldType } from "../../streamsyncTypes";
+import { cssClasses } from "../../renderer/sharedStyleFields";
+
+const markersDefaultData = [
+	{ lat: 37.79322359164316, lng: -122.39999318828129, name: "Marker" },
+];
+
+export default {
+	streamsync: {
+		name: "Mapbox",
+		description:
+			"A component to embed a Mapbox map. It can be used to display a map with markers.",
+		docs: "For this component you need Mapbox access token: https://www.mapbox.com/api-documentation/#access-tokens-and-token-scopes",
+		category: "Embed",
+		fields: {
+			accessToken: {
+				name: "Access Token",
+				default: "",
+				desc: "Access token from Mapbox",
+				type: FieldType.Text,
+			},
+			mapStyle: {
+				name: "Map style",
+				default: "mapbox://styles/mapbox/standard",
+				type: FieldType.Text,
+				desc: "Map style URL",
+			},
+			zoom: {
+				name: "Zoom",
+				default: "8",
+				type: FieldType.Number,
+			},
+			lat: {
+				name: "Latitude",
+				default: "37.79322359164316",
+				type: FieldType.Number,
+			},
+			lng: {
+				name: "Longitude",
+				default: "-122.39999318828129",
+				type: FieldType.Number,
+			},
+			markers: {
+				name: "Markers",
+				init: JSON.stringify(markersDefaultData, null, 2),
+				desc: "",
+				type: FieldType.Object,
+			},
+			controls: {
+				name: "Controls visible",
+				default: "yes",
+				type: FieldType.Text,
+				options: {
+					no: "No",
+					yes: "Yes",
+				},
+				desc: "Show map controls",
+			},
+			cssClasses,
+		},
+		events: {
+			"mapbox-marker-click": {
+				desc: "Capture single clicks on markers.",
+			},
+			"mapbox-click": {
+				desc: "Capture single click on map.",
+			},
+		},
+	},
+};
+</script>
+
+<script setup lang="ts">
+import "mapbox-gl/dist/mapbox-gl.css";
+import { inject, ref, watch, computed } from "vue";
+import injectionKeys from "../../injectionKeys";
+import type * as mapboxgl from "mapbox-gl";
+const fields = inject(injectionKeys.evaluatedFields);
+const rootEl = ref(null);
+const mapEl = ref(null);
+const center = computed<mapboxgl.LngLatLike>(() => [
+	fields.lng.value,
+	fields.lat.value,
+]);
+const map = ref(null);
+let markers: mapboxgl.Marker[] = [];
+let controls: mapboxgl.NavigationControl | null = null;
+
+const initMap = async () => {
+	if (!mapEl.value) return;
+	if (!fields.accessToken.value) return;
+	const mapboxgl = await import("mapbox-gl");
+	try {
+		// https://github.com/mapbox/mapbox-gl-js/issues/13091
+		// This line is according to docs but it doesn't work
+		mapboxgl.accessToken = fields.accessToken.value;
+		// Following works
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		if ((mapboxgl as any).default) {
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			(mapboxgl as any).default.accessToken = fields.accessToken.value;
+		}
+		map.value = new mapboxgl.Map({
+			container: mapEl.value,
+			style: fields.mapStyle.value,
+			center: center.value,
+			zoom: fields.zoom.value,
+		});
+		map.value.on("click", (e) => {
+			const event = new CustomEvent("mapbox-click", {
+				detail: {
+					payload: {
+						lat: e.lngLat.lat,
+						lng: e.lngLat.lng,
+					},
+				},
+			});
+			rootEl.value.dispatchEvent(event);
+		});
+		controls = new mapboxgl.NavigationControl();
+		if (fields.controls.value === "yes") {
+			map.value.addControl(controls);
+		}
+		if (fields.markers.value) {
+			map.value.on("load", renderMarkers);
+		}
+	} catch (error) {
+		// eslint-disable-next-line no-console
+		console.error(error);
+	}
+};
+
+const renderMarkers = async () => {
+	if (!map.value) return;
+	const mapboxgl = await import("mapbox-gl");
+	markers.forEach((marker) => marker.remove());
+	markers = [];
+	fields.markers?.value?.forEach(
+		(markerData: { lat: number; lng: number; name: string }) => {
+			const marker = new mapboxgl.Marker()
+				.setLngLat([markerData.lng, markerData.lat])
+				.addTo(map.value)
+				.setPopup(new mapboxgl.Popup().setText(markerData.name));
+			markers.push(marker);
+			marker.getElement().addEventListener("click", (e) => {
+				const event = new CustomEvent("mapbox-marker-click", {
+					detail: {
+						payload: markerData,
+					},
+				});
+				rootEl.value.dispatchEvent(event);
+				e.stopPropagation();
+			});
+		},
+	);
+};
+
+watch(fields.controls, () => {
+	if (map.value) {
+		if (fields.controls.value === "yes") {
+			map.value.addControl(controls);
+		} else {
+			map.value.removeControl(controls);
+		}
+	}
+});
+
+watch(fields.markers, async () => {
+	if (map.value) {
+		await renderMarkers();
+	}
+});
+watch(fields.mapStyle, () => {
+	if (map.value) {
+		map.value.setStyle(fields.mapStyle.value);
+	}
+});
+watch(center, () => {
+	if (map.value && center.value?.lat && center.value?.lng) {
+		map.value.setCenter(center.value);
+	}
+});
+watch(fields.zoom, () => {
+	if (map.value && fields.zoom.value) {
+		map.value.setZoom(fields.zoom.value);
+	}
+});
+watch([mapEl, fields.accessToken], () => {
+	initMap();
+});
+</script>
+
+<style scoped>
+.CoreMapbox {
+	position: relative;
+	width: 100%;
+	height: 80vh;
+}
+.CoreMapbox :deep(.mapboxgl-marker) {
+	cursor: pointer;
+}
+.CoreMapbox .map {
+	width: 100%;
+	height: 100%;
+}
+.CoreMapbox .mask {
+	pointer-events: none;
+}
+
+.CoreMapbox.beingEdited .mask {
+	pointer-events: auto;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+
+.CoreMapbox.beingEdited.selected .mask {
+	pointer-events: none;
+}
+</style>