Feature Demo

This page is dedicated to demonstrate features of various extensions. [Updated 14-Mar-2022 16:13 WIB]

For HTML Widget Demos, please look at this page: Demo:Widget collection

Map

The following maps are interactive maps embedded in MediaWiki, you can find instructions on how to edit these embedded links to create your own map.

Map 1

To show the the center of a city, a map can be specified as follow:

{{#display_map:center=Sumatra|zoom=9}}

Loading map...

{"minzoom":false,"maxzoom":false,"mappingservice":"leaflet","width":"auto","height":"350px","centre":{"text":"","title":"","link":"","lat":-0.14329415,"lon":101.62410241439,"icon":""},"title":"","label":"","icon":"","lines":[],"polygons":[],"circles":[],"rectangles":[],"copycoords":false,"static":false,"zoom":9,"defzoom":14,"layers":["OpenStreetMap"],"image layers":[],"overlays":[],"resizable":false,"fullscreen":false,"scrollwheelzoom":true,"cluster":false,"clustermaxzoom":20,"clusterzoomonclick":true,"clustermaxradius":80,"clusterspiderfy":true,"geojson":"","clicktarget":"","imageLayers":[],"locations":[],"imageoverlays":null}

---

Map 2

For example, the following map can be specified as follow:

{{#display_map:circles=
  Serangan, Bali, Indonesia:500;
  Serangan, Bali, Indonesia:100~TSEA Campus~HDX Program~green~0.7~10~blue~0.5
|zoom=9
|width=600
|height=400
}}

Loading map...

{"minzoom":false,"maxzoom":false,"mappingservice":"leaflet","width":"800px","height":"500px","centre":false,"title":"","label":"","icon":"","lines":[],"polygons":[],"circles":[{"text":"","title":"","link":"","strokeColor":"#FF0000","strokeOpacity":"1","strokeWeight":"2","fillColor":"#FF0000","fillOpacity":"0.5","centre":{"lon":115.2313818,"lat":-8.7336496},"radius":500},{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003ETSEA Campus\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003EHDX Program\n\u003C/p\u003E\u003C/div\u003E","title":"TSEA Campus\n","link":"","strokeColor":"green","strokeOpacity":"0.8","strokeWeight":"10","fillColor":"blue","fillOpacity":"0.6","centre":{"lon":115.2313818,"lat":-8.7336496},"radius":100}],"rectangles":[],"copycoords":false,"static":false,"zoom":9,"defzoom":14,"layers":["OpenStreetMap"],"image layers":[],"overlays":[],"resizable":false,"fullscreen":false,"scrollwheelzoom":true,"cluster":false,"clustermaxzoom":20,"clusterzoomonclick":true,"clustermaxradius":80,"clusterspiderfy":true,"geojson":"","clicktarget":"","imageLayers":[],"locations":[],"imageoverlays":null}

---

EmbedVideo

Please see the MediaWiki Widget Extension.

{{#Widget:YouTube
|id=X_oNzF_KS6g
|start=100
|width=600
|height=450
}}

Embedding videos in a web page will significantly enrich user experience. The following link shows a video embedded in this page. More extensive demo can be found in this link.

---

Spotify

If you are into music, you can embed Spotify songs here.

<spotify>album/4tRU7xRuLI8oaTTNFtrytT</spotify>

Math Typesetting

For mathematicians and engineers, your can also typeset mathematical equations using LaTeX syntax here.

<math>\int_a^Y \!\!\!\int_a^q f(u)\,dQ\,ds = \int_a^x f(q)(z-c)\,dQ</math>

$\int _{a}^{Y}\!\!\!\int _{a}^{q}f(u)\,dQ\,ds=\int _{a}^{x}f(q)(z-c)\,dQ$

3D Object

If you have 3D objects that you want to show on the page, you can just upload the file to this website, and embed them into the page:

[[File:Asad Al-Lat.stl|300px]]

Click on the image below to interact with it in Media Viewer.

https://pkc.pub/images/a/af/Asad_Al-Lat.stl

---

You may also make the 3D object interactive in the page.

[[File:Cube.json]]

https://pkc.pub/images/f/f1/Cube.json

Timeline.js in Widget:Iframe

This page uses the Timeline.js demo website to show what can be done in an Iframe.

DynamicPageList

You may also specify certain conditional information to extract a list of pages from the database. This is the well-known DynamicPageList feature of MediaWiki.

An example can be shown here

<DynamicPageList>
category=BPMN StartEvent
count=2</DynamicPageList>

• /StartEvent 1
• Test/Event 1bg1382

Userful Websites

For generating wikitables, please see: TableGenerator/MediaWiki Tables.

It is always helpful to read MediaWiki's Manual:Extensions