Added map on the global map page

js/dist/forum.js

@@ -13801,6 +13801,7 @@ var GlobalMapPage = /*#__PURE__*/function (_Page) {
     _Page.prototype.oninit.call(this, vnode);
 
     flarum_forum_app__WEBPACK_IMPORTED_MODULE_1___default.a.setTitle(translate('justoverclock-users-map-location.forum.global-map.title'));
+    this.map = null;
   };
 
   _proto.view = function view() {
@@ -13808,7 +13809,45 @@ var GlobalMapPage = /*#__PURE__*/function (_Page) {
       "class": "GlobalMapPage"
     }, m("div", {
       className: "container"
-    }, m("h2", null, translate('justoverclock-users-map-location.forum.global-map.title2'))));
+    }, m("h2", null, translate('justoverclock-users-map-location.forum.global-map.title2')), m("div", {
+      className: "global-map"
+    })));
+  };
+
+  _proto.oncreate = function oncreate(vnode) {
+    this.onupdate(vnode);
+  };
+
+  _proto.onupdate = function onupdate(vnode) {
+    var dom = vnode.dom;
+    var mapElements = dom.getElementsByClassName('global-map');
+
+    if (mapElements.length > 0) {
+      if (!this.map) {
+        var mapElement = mapElements[0];
+        var publicToken = flarum_forum_app__WEBPACK_IMPORTED_MODULE_1___default.a.forum.attribute('justoverclock-users-map-location.mapBox-api-key');
+        var markerIconPath = flarum_forum_app__WEBPACK_IMPORTED_MODULE_1___default.a.forum.attribute('baseUrl') + '/assets/extensions/justoverclock-users-map-location/marker-icon.png';
+        var markerIcon = L.icon({
+          iconUrl: markerIconPath,
+          iconSize: [25, 41],
+          // size of the icon
+          iconAnchor: [13, 40]
+        });
+        this.map = L.map(mapElement);
+        var layer = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
+          attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery &copy; <a href="https://www.mapbox.com/">Mapbox</a>',
+          maxZoom: 18,
+          edgeBufferTiles: 1,
+          id: 'mapbox/streets-v11',
+          tileSize: 512,
+          zoomOffset: -1,
+          accessToken: publicToken
+        }).addTo(this.map);
+        this.map.setView([46, 2], 6);
+      }
+    } else {
+      this.map = null;
+    }
   };
 
   return GlobalMapPage;

js/src/forum/components/GlobalMapPage.tsx

@@ -11,13 +11,56 @@ export default class GlobalMapPage extends Page {
 		super.oninit(vnode);
 
 		app.setTitle(translate('justoverclock-users-map-location.forum.global-map.title'));
+		
+		this.map = null;
 	}
 
 	view() {
 		return <div class="GlobalMapPage">
 			<div className="container">
 				<h2>{translate('justoverclock-users-map-location.forum.global-map.title2')}</h2>
+				<div className="global-map"></div>
 			</div>
 		</div>;
 	}
+		
+	oncreate(vnode) {
+		this.onupdate(vnode);
+	}
+		
+	onupdate(vnode) {
+		let dom = vnode.dom;
+		let mapElements = dom.getElementsByClassName('global-map');
+
+		if(mapElements.length > 0) {
+			if(!this.map) {
+				let mapElement = mapElements[0];
+
+				const publicToken = app.forum.attribute('justoverclock-users-map-location.mapBox-api-key');
+				const markerIconPath = app.forum.attribute('baseUrl') + '/assets/extensions/justoverclock-users-map-location/marker-icon.png';
+
+				let markerIcon = L.icon({
+					iconUrl: markerIconPath,
+					iconSize: [25, 41], // size of the icon
+					iconAnchor: [13, 40]
+				});
+
+				this.map = L.map(mapElement);
+				let layer = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
+					attribution:
+					'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery &copy; <a href="https://www.mapbox.com/">Mapbox</a>',
+					maxZoom: 18,
+					edgeBufferTiles: 1,
+					id: 'mapbox/streets-v11',
+					tileSize: 512,
+					zoomOffset: -1,
+					accessToken: publicToken,
+				}).addTo(this.map);
+				
+				this.map.setView([46, 2], 6);
+			}
+		} else {
+			this.map = null;
+		}
+	}
 }

less/forum.less

@@ -24,6 +24,13 @@ input#location {
     display: block;
   }
 }
+
+.global-map {
+  height: ~"calc(100vh - 170px)";
+  width: 100%;
+  border-radius: 10px;
+}
+
 /* required styles */
 
 li.item-mapLocation {

locale/en.yml

@@ -12,3 +12,6 @@ justoverclock-users-map-location:
     locationSaved: Location saved successfully!
     locationNotFound: Location not found
     locationCleared: Your location has been deleted
+    global-map:
+      title: Global Map
+      title2: Map of members

locale/fr.yml

@@ -14,4 +14,4 @@ justoverclock-users-map-location:
     locationCleared: Votre localité a été supprimée
     global-map:
       title: Carte globale
-      title2: Carte des membres de la communauté vhélio
+      title2: Carte des membres