diff --git a/umap/static/umap/js/modules/rendering/popup.js b/umap/static/umap/js/modules/rendering/popup.js
index 3baf2793..0a74c638 100644
--- a/umap/static/umap/js/modules/rendering/popup.js
+++ b/umap/static/umap/js/modules/rendering/popup.js
@@ -27,9 +27,9 @@ const Popup = BasePopup.extend({
this.setContent(this.container)
},
- format: function () {
+ format: async function () {
const name = this.feature.getOption('popupTemplate')
- this.content = loadTemplate(name, this.feature, this.container)
+ this.content = await loadTemplate(name, this.feature, this.container)
const elements = this.container.querySelectorAll('img,iframe')
for (const element of elements) {
this.onElementLoaded(element)
diff --git a/umap/static/umap/js/modules/rendering/template.js b/umap/static/umap/js/modules/rendering/template.js
index 838ad66e..9e7487a8 100644
--- a/umap/static/umap/js/modules/rendering/template.js
+++ b/umap/static/umap/js/modules/rendering/template.js
@@ -2,8 +2,9 @@ import { DomUtil, DomEvent } from '../../../vendors/leaflet/leaflet-src.esm.js'
import { translate, getLocale } from '../i18n.js'
import * as Utils from '../utils.js'
import * as Icon from './icon.js'
+import { Request } from '../request.js'
-export default function loadTemplate(name, feature, container) {
+export default async function loadTemplate(name, feature, container) {
let klass = PopupTemplate
switch (name) {
case 'GeoRSSLink':
@@ -18,9 +19,12 @@ export default function loadTemplate(name, feature, container) {
case 'OSM':
klass = OSM
break
+ case 'Wikipedia':
+ klass = Wikipedia
+ break
}
const content = new klass()
- return content.render(feature, container)
+ return await content.render(feature, container)
}
class PopupTemplate {
@@ -76,10 +80,10 @@ class PopupTemplate {
}
}
- render(feature, container) {
+ async render(feature, container) {
const title = this.renderTitle(feature)
if (title) container.appendChild(title)
- const body = this.renderBody(feature)
+ const body = await this.renderBody(feature)
if (body) DomUtil.add('div', 'umap-popup-content', container, body)
const footer = this.renderFooter(feature)
if (footer) container.appendChild(footer)
@@ -111,7 +115,7 @@ class Table extends TitleMixin(PopupTemplate) {
)
}
- renderBody(feature) {
+ async renderBody(feature) {
const table = document.createElement('table')
for (const key in feature.properties) {
@@ -125,7 +129,7 @@ class Table extends TitleMixin(PopupTemplate) {
}
class GeoRSSImage extends TitleMixin(PopupTemplate) {
- renderBody(feature) {
+ async renderBody(feature) {
const body = DomUtil.create('a')
body.href = feature.properties.link
body.target = '_blank'
@@ -142,7 +146,7 @@ class GeoRSSImage extends TitleMixin(PopupTemplate) {
}
class GeoRSSLink extends PopupTemplate {
- renderBody(feature) {
+ async renderBody(feature) {
if (feature.properties.link) {
return Utils.loadTemplate(
`${feature.getDisplayName()}
`
@@ -151,7 +155,7 @@ class GeoRSSLink extends PopupTemplate {
}
}
-class OSM extends TitleMixin(PopupTemplate) {
+class OSM extends PopupTemplate {
renderTitle(feature) {
const title = DomUtil.add('h3', 'popup-title')
const color = feature.getPreviewColor()
@@ -172,7 +176,7 @@ class OSM extends TitleMixin(PopupTemplate) {
return props.name
}
- renderBody(feature) {
+ async renderBody(feature) {
const props = feature.properties
const body = document.createElement('div')
const locale = getLocale()
@@ -238,3 +242,29 @@ class OSM extends TitleMixin(PopupTemplate) {
return body
}
}
+
+class Wikipedia extends PopupTemplate {
+ async renderBody(feature) {
+ const body = document.createElement('div')
+ const wikipedia = feature.properties.wikipedia
+ if (!wikipedia) return 'No data'
+ // Wikipedia value should be in form of "{locale}:{title}", according to https://wiki.openstreetmap.org/wiki/Key:wikipedia
+ const [locale, page] = wikipedia.split(':')
+ const url = `https://${locale}.wikipedia.org/w/api.php?action=query&format=json&origin=*&pithumbsize=280&prop=extracts|pageimages&titles=${page}`
+ const request = new Request()
+ const response = await request.get(url)
+ if (response?.ok) {
+ const data = await response.json()
+ const page = Object.values(data.query.pages)[0]
+ const title = page.title
+ const extract = page.extract
+ const thumbnail = page.thumbnail.source
+ body.appendChild(
+ Utils.loadTemplate(
+ `