diff --git a/lib/Controller/PageController.php b/lib/Controller/PageController.php
index 8f1d12c27e..fc86dda56e 100644
--- a/lib/Controller/PageController.php
+++ b/lib/Controller/PageController.php
@@ -261,6 +261,7 @@ class PageController extends Controller {
 		$csp = new ContentSecurityPolicy();
 		$csp->addAllowedConnectDomain('*');
 		$csp->addAllowedMediaDomain('blob:');
+		$csp->addAllowedImageDomain('https://*.tile.openstreetmap.org');
 		$response->setContentSecurityPolicy($csp);
 		return $response;
 	}
@@ -312,6 +313,7 @@ class PageController extends Controller {
 		$csp = new ContentSecurityPolicy();
 		$csp->addAllowedConnectDomain('*');
 		$csp->addAllowedMediaDomain('blob:');
+		$csp->addAllowedImageDomain('https://*.tile.openstreetmap.org');
 		$response->setContentSecurityPolicy($csp);
 		return $response;
 	}
diff --git a/lib/Listener/CSPListener.php b/lib/Listener/CSPListener.php
index 491a0d6fe9..dfdbaff1ff 100644
--- a/lib/Listener/CSPListener.php
+++ b/lib/Listener/CSPListener.php
@@ -46,6 +46,7 @@ class CSPListener implements IEventListener {
 		}
 
 		$csp = new ContentSecurityPolicy();
+		$csp->addAllowedImageDomain('https://*.tile.openstreetmap.org');
 		foreach ($this->config->getAllServerUrlsForCSP() as $server) {
 			$csp->addAllowedConnectDomain($server);
 		}
diff --git a/package-lock.json b/package-lock.json
index aa1c3d36c1..26c054de89 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5374,7 +5374,8 @@
 					"version": "3.0.0",
 					"resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
 					"integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
-					"dev": true
+					"dev": true,
+					"optional": true
 				},
 				"find-cache-dir": {
 					"version": "3.3.1",
@@ -5651,6 +5652,7 @@
 					"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.2.0.tgz",
 					"integrity": "sha512-TitGhqSQ61RJljMmhIGvfWzJ2zk9m1Qug049Ugml6QP3t0e95o0XJjk29roNEiPKJQBEi8Ord5hFuSuELzSp8Q==",
 					"dev": true,
+					"optional": true,
 					"requires": {
 						"chalk": "^4.1.0",
 						"hash-sum": "^2.0.0",
@@ -5662,6 +5664,7 @@
 							"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
 							"integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
 							"dev": true,
+							"optional": true,
 							"requires": {
 								"ansi-styles": "^4.1.0",
 								"supports-color": "^7.1.0"
@@ -5671,13 +5674,15 @@
 							"version": "4.0.0",
 							"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
 							"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-							"dev": true
+							"dev": true,
+							"optional": true
 						},
 						"loader-utils": {
 							"version": "2.0.0",
 							"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
 							"integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
 							"dev": true,
+							"optional": true,
 							"requires": {
 								"big.js": "^5.2.2",
 								"emojis-list": "^3.0.0",
@@ -5689,6 +5694,7 @@
 							"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
 							"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
 							"dev": true,
+							"optional": true,
 							"requires": {
 								"has-flag": "^4.0.0"
 							}
@@ -14647,6 +14653,16 @@
 			"resolved": "https://registry.npmjs.org/layerr/-/layerr-0.1.2.tgz",
 			"integrity": "sha512-ob5kTd9H3S4GOG2nVXyQhOu9O8nBgP555XxWPkJI0tR0JeRilfyTp8WtPdIJHLXBmHMSdEq5+KMxiYABeScsIQ=="
 		},
+		"leaflet": {
+			"version": "1.7.1",
+			"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz",
+			"integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw=="
+		},
+		"leaflet-defaulticon-compatibility": {
+			"version": "0.1.1",
+			"resolved": "https://registry.npmjs.org/leaflet-defaulticon-compatibility/-/leaflet-defaulticon-compatibility-0.1.1.tgz",
+			"integrity": "sha512-vDBFdlUAwjSEGep9ih8kfJilf6yN8V9zTbF5NC/1ZwLeGko3RUQepspPnGCRMFV51dY3Lb3hziboicrFz+rxQA=="
+		},
 		"left-pad": {
 			"version": "1.3.0",
 			"resolved": "https://registry.npmjs.org/left-pad/-/left-pad-1.3.0.tgz",
@@ -22021,6 +22037,11 @@
 				"date-format-parse": "^0.2.5"
 			}
 		},
+		"vue2-leaflet": {
+			"version": "2.7.0",
+			"resolved": "https://registry.npmjs.org/vue2-leaflet/-/vue2-leaflet-2.7.0.tgz",
+			"integrity": "sha512-uT7lpFoVEDhINMyTpiAthh6aiKFGHuYWLoVH8JJ0YNNSch+XMZFl4YBQ0S2hHYDquQIsh8zx+yINeUI01y9ugw=="
+		},
 		"vuex": {
 			"version": "3.6.2",
 			"resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz",
diff --git a/package.json b/package.json
index eddf33d29e..76fc8698df 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,8 @@
 		"emoji-regex": "^9.2.2",
 		"escape-html": "^1.0.3",
 		"hark": "^1.2.3",
+		"leaflet": "^1.7.1",
+		"leaflet-defaulticon-compatibility": "^0.1.1",
 		"lodash": "^4.17.21",
 		"mockconsole": "0.0.1",
 		"nextcloud-vue-collections": "^0.9.0",
@@ -54,6 +56,7 @@
 		"vue-resize": "^1.0.1",
 		"vue-router": "^3.5.1",
 		"vue-shortkey": "^3.1.7",
+		"vue2-leaflet": "^2.7.0",
 		"vuex": "^3.6.2",
 		"webdav": "^4.3.0",
 		"webrtc-adapter": "^7.7.1",
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Location.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Location.vue
index f7f6ceadc0..ba0dfdbd6d 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Location.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Location.vue
@@ -21,15 +21,35 @@
 
 <template>
 	<div class="location">
-		{{ name }}
-		<p>{{ id }}</p>
+		<LMap
+			style="height: 200px"
+			:zoom="zoom"
+			:center="center"
+			:options="{
+				scrollWheelZoom: false,
+				zoomControl: false,
+				dragging: false,
+				attributionControl: false,
+			}"
+			@scroll.prevent="">
+			<LTileLayer :url="url" />
+			<LMarker :lat-lng="center" s />
+		</LMap>
 	</div>
 </template>
 
 <script>
+import { LMap, LTileLayer, LMarker } from 'vue2-leaflet'
+
 export default {
 	name: 'Location',
 
+	components: {
+		LMap,
+		LTileLayer,
+		LMarker,
+	},
+
 	props: {
 		/**
 		 * The geolink for the location
@@ -63,12 +83,29 @@ export default {
 			required: true,
 		},
 	},
+
+	data() {
+		return {
+			url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+			zoom: 13,
+		}
+	},
+
+	computed: {
+		center() {
+			return [this.latitude, this.longitude]
+		},
+	},
 }
 </script>
 
 <style lang="scss" scoped>
 .location {
-	width: 400px;
-	background-color: lightgray;
+	overflow: hidden;
+	border-radius: var(--border-radius-large);
+	position: relative;
+	z-index: 1;
+	height: 200px;
+	width: 350px;
 }
 </style>
diff --git a/src/main.js b/src/main.js
index 2332e04632..3d0e43e8e7 100644
--- a/src/main.js
+++ b/src/main.js
@@ -48,6 +48,12 @@ import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
 
 // Styles
 import '@nextcloud/dialogs/styles/toast.scss'
+import 'leaflet/dist/leaflet.css'
+
+// Leaflet icon patch
+import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css' // Re-uses images from ~leaflet package
+// eslint-disable-next-line
+import 'leaflet-defaulticon-compatibility'
 
 // CSP config for webpack dynamic chunk loading
 // eslint-disable-next-line
diff --git a/src/mainFilesSidebar.js b/src/mainFilesSidebar.js
index c0ce3c2306..4696168476 100644
--- a/src/mainFilesSidebar.js
+++ b/src/mainFilesSidebar.js
@@ -43,6 +43,12 @@ import vOutsideEvents from 'vue-outside-events'
 
 // Styles
 import '@nextcloud/dialogs/styles/toast.scss'
+import 'leaflet/dist/leaflet.css'
+
+// Leaflet icon patch
+import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css' // Re-uses images from ~leaflet package
+// eslint-disable-next-line
+import 'leaflet-defaulticon-compatibility'
 
 // CSP config for webpack dynamic chunk loading
 // eslint-disable-next-line
diff --git a/src/mainPublicShareAuthSidebar.js b/src/mainPublicShareAuthSidebar.js
index dd28fca0fb..9d72012a32 100644
--- a/src/mainPublicShareAuthSidebar.js
+++ b/src/mainPublicShareAuthSidebar.js
@@ -39,6 +39,12 @@ import vOutsideEvents from 'vue-outside-events'
 
 // Styles
 import '@nextcloud/dialogs/styles/toast.scss'
+import 'leaflet/dist/leaflet.css'
+
+// Leaflet icon patch
+import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css' // Re-uses images from ~leaflet package
+// eslint-disable-next-line
+import 'leaflet-defaulticon-compatibility'
 
 // CSP config for webpack dynamic chunk loading
 // eslint-disable-next-line
diff --git a/src/mainPublicShareSidebar.js b/src/mainPublicShareSidebar.js
index a47184a55e..40d1f90eec 100644
--- a/src/mainPublicShareSidebar.js
+++ b/src/mainPublicShareSidebar.js
@@ -38,6 +38,12 @@ import vOutsideEvents from 'vue-outside-events'
 
 // Styles
 import '@nextcloud/dialogs/styles/toast.scss'
+import 'leaflet/dist/leaflet.css'
+
+// Leaflet icon patch
+import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css' // Re-uses images from ~leaflet package
+// eslint-disable-next-line
+import 'leaflet-defaulticon-compatibility'
 
 // CSP config for webpack dynamic chunk loading
 // eslint-disable-next-line