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. For the usage statistics of this website, please see Matomo Dashboard.

Map 1

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

{{#display_map:center=Indonesia|zoom=5}}

Loading map...

{"minzoom":false,"maxzoom":false,"mappingservice":"leaflet","width":"auto","height":"350px","centre":{"text":"","title":"","link":"","lat":-2.4833826,"lon":117.8902853,"icon":""},"title":"","label":"","icon":"","lines":[],"polygons":[],"circles":[],"rectangles":[],"copycoords":false,"static":false,"zoom":5,"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 of Gasing Implementation

Loading map...

{"minzoom":false,"maxzoom":false,"mappingservice":"leaflet","width":"1200px","height":"400px","centre":false,"title":"","label":"","icon":"","lines":[],"polygons":[],"circles":[{"text":"\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\u003Ca href=\"/index.php?title=Jembarana_Bali\u0026amp;action=edit\u0026amp;redlink=1\" class=\"new\" title=\"Jembarana Bali (page does not exist)\"\u003EJembarana Bali\u003C/a\u003E\n\u003C/p\u003E\u003C/div\u003E","title":"Jembarana Bali\n","link":"","strokeColor":"#FF0000","strokeOpacity":"1","strokeWeight":"2","fillColor":"#FF0000","fillOpacity":"0.5","centre":{"lon":114.70546114941,"lat":-8.3955784},"radius":10000},{"text":"\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\u003Ca href=\"/index.php?title=Bangli_Bali\u0026amp;action=edit\u0026amp;redlink=1\" class=\"new\" title=\"Bangli Bali (page does not exist)\"\u003EBangli Bali\u003C/a\u003E\n\u003C/p\u003E\u003C/div\u003E","title":"Bangli Bali\n","link":"","strokeColor":"#FF0000","strokeOpacity":"1","strokeWeight":"2","fillColor":"#FF0000","fillOpacity":"0.5","centre":{"lon":115.36828121658,"lat":-8.3333362},"radius":10000},{"text":"\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\u003Ca href=\"/index.php?title=Dairi_Sumatera_Utara\u0026amp;action=edit\u0026amp;redlink=1\" class=\"new\" title=\"Dairi Sumatera Utara (page does not exist)\"\u003EDairi Sumatera Utara\u003C/a\u003E\n\u003C/p\u003E\u003C/div\u003E","title":"Dairi Sumatera Utara\n","link":"","strokeColor":"#FF0000","strokeOpacity":"1","strokeWeight":"2","fillColor":"#FF0000","fillOpacity":"0.5","centre":{"lon":98.28450159467,"lat":2.83532105},"radius":10000},{"text":"\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\u003Ca href=\"/index.php?title=Simalungun_Sumatera_Utara\u0026amp;action=edit\u0026amp;redlink=1\" class=\"new\" title=\"Simalungun Sumatera Utara (page does not exist)\"\u003ESimalungun Sumatera Utara\u003C/a\u003E\n\u003C/p\u003E\u003C/div\u003E","title":"Simalungun Sumatera Utara\n","link":"","strokeColor":"#FF0000","strokeOpacity":"1","strokeWeight":"2","fillColor":"#FF0000","fillOpacity":"0.5","centre":{"lon":98.783530623832,"lat":2.9505161},"radius":10000},{"text":"\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\u003Ca href=\"/index.php?title=Tapanuli_Utara_Sumatera_Utara\u0026amp;action=edit\u0026amp;redlink=1\" class=\"new\" title=\"Tapanuli Utara Sumatera Utara (page does not exist)\"\u003ETapanuli Utara Sumatera Utara\u003C/a\u003E\n\u003C/p\u003E\u003C/div\u003E","title":"Tapanuli Utara Sumatera Utara\n","link":"","strokeColor":"#FF0000","strokeOpacity":"1","strokeWeight":"2","fillColor":"#FF0000","fillOpacity":"0.5","centre":{"lon":99.064765862503,"lat":1.9980604},"radius":10000},{"text":"\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\u003Ca href=\"/index.php?title=Tapanuli_Selatan_Sumatera_Utara\u0026amp;action=edit\u0026amp;redlink=1\" class=\"new\" title=\"Tapanuli Selatan Sumatera Utara (page does not exist)\"\u003ETapanuli Selatan Sumatera Utara\u003C/a\u003E\n\u003C/p\u003E\u003C/div\u003E","title":"Tapanuli Selatan Sumatera Utara\n","link":"","strokeColor":"#FF0000","strokeOpacity":"1","strokeWeight":"2","fillColor":"#FF0000","fillOpacity":"0.5","centre":{"lon":99.211757108333,"lat":1.5510869},"radius":10000},{"text":"\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\u003Ca href=\"/index.php?title=Toba_Sumatera_Utara\u0026amp;action=edit\u0026amp;redlink=1\" class=\"new\" title=\"Toba Sumatera Utara (page does not exist)\"\u003EToba Sumatera Utara\u003C/a\u003E\n\u003C/p\u003E\u003C/div\u003E","title":"Toba Sumatera Utara\n","link":"","strokeColor":"#FF0000","strokeOpacity":"1","strokeWeight":"2","fillColor":"#FF0000","fillOpacity":"0.5","centre":{"lon":99.331464794937,"lat":2.38545945},"radius":10000},{"text":"\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\u003Ca href=\"/index.php?title=Bitung_Sulawesi\u0026amp;action=edit\u0026amp;redlink=1\" class=\"new\" title=\"Bitung Sulawesi (page does not exist)\"\u003EBitung Sulawesi\u003C/a\u003E\n\u003C/p\u003E\u003C/div\u003E","title":"Bitung Sulawesi\n","link":"","strokeColor":"#FF0000","strokeOpacity":"1","strokeWeight":"2","fillColor":"#FF0000","fillOpacity":"0.5","centre":{"lon":125.1940836,"lat":1.44344},"radius":10000},{"text":"\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\u003Ca href=\"/index.php?title=Jayapura_Sulawesi\u0026amp;action=edit\u0026amp;redlink=1\" class=\"new\" title=\"Jayapura Sulawesi (page does not exist)\"\u003EJayapura Sulawesi\u003C/a\u003E\n\u003C/p\u003E\u003C/div\u003E","title":"Jayapura Sulawesi\n","link":"","strokeColor":"#FF0000","strokeOpacity":"1","strokeWeight":"2","fillColor":"#FF0000","fillOpacity":"0.5","centre":{"lon":140.7037389,"lat":-2.5387539},"radius":10000},{"text":"\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\u003Ca href=\"/index.php?title=Manokwari_Selatan_Sulawesi\u0026amp;action=edit\u0026amp;redlink=1\" class=\"new\" title=\"Manokwari Selatan Sulawesi (page does not exist)\"\u003EManokwari Selatan Sulawesi\u003C/a\u003E\n\u003C/p\u003E\u003C/div\u003E","title":"Manokwari Selatan Sulawesi\n","link":"","strokeColor":"#FF0000","strokeOpacity":"1","strokeWeight":"2","fillColor":"#FF0000","fillOpacity":"0.5","centre":{"lon":134.07102927461,"lat":-1.5250221},"radius":10000},{"text":"\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\u003Ca href=\"/index.php?title=Manokwari_Selatan_Sulawesi\u0026amp;action=edit\u0026amp;redlink=1\" class=\"new\" title=\"Manokwari Selatan Sulawesi (page does not exist)\"\u003EManokwari Selatan Sulawesi\u003C/a\u003E\n\u003C/p\u003E\u003C/div\u003E","title":"Manokwari Selatan Sulawesi\n","link":"","strokeColor":"#FF0000","strokeOpacity":"1","strokeWeight":"2","fillColor":"#FF0000","fillOpacity":"0.5","centre":{"lon":114.17318186409,"lat":-0.06845085},"radius":10000},{"text":"\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\u003Ca href=\"/index.php?title=Manokwari_Selatan_Sulawesi\u0026amp;action=edit\u0026amp;redlink=1\" class=\"new\" title=\"Manokwari Selatan Sulawesi (page does not exist)\"\u003EManokwari Selatan Sulawesi\u003C/a\u003E\n\u003C/p\u003E\u003C/div\u003E","title":"Manokwari Selatan Sulawesi\n","link":"","strokeColor":"#FF0000","strokeOpacity":"1","strokeWeight":"2","fillColor":"#FF0000","fillOpacity":"0.5","centre":{"lon":106.1518079,"lat":-6.1169662},"radius":10000},{"text":"\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\u003Ca href=\"/index.php?title=Manokwari_Selatan_Sulawesi\u0026amp;action=edit\u0026amp;redlink=1\" class=\"new\" title=\"Manokwari Selatan Sulawesi (page does not exist)\"\u003EManokwari Selatan Sulawesi\u003C/a\u003E\n\u003C/p\u003E\u003C/div\u003E","title":"Manokwari Selatan Sulawesi\n","link":"","strokeColor":"#FF0000","strokeOpacity":"1","strokeWeight":"2","fillColor":"#FF0000","fillOpacity":"0.5","centre":{"lon":110.7713142,"lat":-7.55190335},"radius":10000},{"text":"\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\u003Ca href=\"/index.php?title=Manokwari_Selatan_Sulawesi\u0026amp;action=edit\u0026amp;redlink=1\" class=\"new\" title=\"Manokwari Selatan Sulawesi (page does not exist)\"\u003EManokwari Selatan Sulawesi\u003C/a\u003E\n\u003C/p\u003E\u003C/div\u003E","title":"Manokwari Selatan Sulawesi\n","link":"","strokeColor":"#FF0000","strokeOpacity":"1","strokeWeight":"2","fillColor":"#FF0000","fillOpacity":"0.5","centre":{"lon":121.07716959123,"lat":-1.8418842},"radius":10000},{"text":"\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\u003Ca href=\"/index.php?title=Manokwari_Selatan_Sulawesi\u0026amp;action=edit\u0026amp;redlink=1\" class=\"new\" title=\"Manokwari Selatan Sulawesi (page does not exist)\"\u003EManokwari Selatan Sulawesi\u003C/a\u003E\n\u003C/p\u003E\u003C/div\u003E","title":"Manokwari Selatan Sulawesi\n","link":"","strokeColor":"#FF0000","strokeOpacity":"1","strokeWeight":"2","fillColor":"#FF0000","fillOpacity":"0.5","centre":{"lon":121.88241043607,"lat":-2.71514835},"radius":10000}],"rectangles":[],"copycoords":false,"static":false,"zoom":false,"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=640
|height=360
}}

Or, please refer to below code [1]

{{#ev:youtube|https://www.youtube.com/watch?v=X_oNzF_KS6g |||||start=5&end=15&loop=5}}

{{#ev:youtube|https://www.youtube.com/watch?v=X_oNzF_KS6g |||||start=5&end=15&loop=5}}

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

Pictures

To embed and view you images inside Mediawiki Page, please refer to [2]

Text Formatting

To learn how to format your text, please refer to [3]

Userful Websites

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

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