You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
81 lines
2.5 KiB
81 lines
2.5 KiB
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('&', '&').replaceAll('<', '<').replaceAll('>', '>').replaceAll('"', '"').replaceAll("'", '''); |
|
} |
|
|
|
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 © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <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(); |
|
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; |
|
} |
|
} |
|
}
|
|
|