flarum-users-map-location/js/src/forum/components/GlobalMapPage.tsx

import type Mithril from 'mithril';
import app from 'flarum/forum/app';
import Page from 'flarum/common/components/Page';

function translate(id: string): string {
	return app.translator.trans(id) as string;
}

const escapeHtml = (unsafe) => {
    return unsafe.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll('"', '&quot;').replaceAll("'", '&#039;');
}

export default class GlobalMapPage extends Page {
	oninit(vnode: Mithril.Vnode) {
		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([47, 2], 6);
				
				app.store.find('user-locations', { page: { limit: 1000 } }).then((response) => {
					let markers = L.markerClusterGroup({ maxClusterRadius: 40 });
					for(let item of response) {
						let user = item.data.attributes;
						let marker = L.marker([parseFloat(user.location_latitude), parseFloat(user.location_longitude)], { icon: markerIcon });
						marker.bindPopup('<a href="/u/'+escapeHtml(user.username)+'">'+escapeHtml(user.displayName)+'</a>');
						markers.addLayer(marker);
					}
					this.map.addLayer(markers);
				});
			}
		} else {
			this.map = null;
		}
	}
}