wip

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)

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(
         `<a href="${feature.properties.link}" target="_blank"><h3>${feature.getDisplayName()}</h3></a>`
@@ -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(
+          `<div><h3>${title}</h3><img src="${thumbnail}" />${extract}</div>`
+        )
+      )
+    }
+    return body
+  }
+}

umap/static/umap/js/modules/schema.js

@@ -404,6 +404,7 @@ export const SCHEMA = {
       ['GeoRSSImage', translate('GeoRSS (title + image)')],
       ['GeoRSSLink', translate('GeoRSS (only link)')],
       ['OSM', translate('OpenStreetMap')],
+      ['Wikipedia', translate('Wikipedia')],
     ],
     default: 'Default',
   },