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[1] embedded in MediaWiki, you can find instructions[2] 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}
Gasing Locations
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[3], 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^Q \!\!\!\int_a^q f(u)\,dQ\,ds = \int_a^x f(q)(z-c)\,dQ</math>
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.
You may also make the 3D object interactive in the page.
[[File: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[4] feature of MediaWiki.
An example can be shown here
<DynamicPageList>
category=BPMN StartEvent
count=2</DynamicPageList>
Pictures
To embed and view you images inside Mediawiki Page, please refer to [2]
Text Formatting
To learn how to format your text[5], please refer to [3]
Userful Websites
For generating wikitables, please see: TableGenerator/MediaWiki Tables.
It is always helpful to read MediaWiki's Manual:Extensions
[6]
References
- ↑ https://leafletjs.com
- ↑ https://maps.extension.wiki/wiki/Displaying_Leaflet_maps
- ↑ Book:And yet it is heard
- ↑
IlyaHaykinson and Amgine,
Extension:DynamicPageList,
Wikimedia,
last accessed: March 27, 2021,
URL:https://www.mediawiki.org/wiki/Extension:DynamicPageList_(Wikimedia)
- ↑ Koo, Hsueh-Yung Benjamin (31 Jan 2005). A Meta-language for Systems Architecting (PDF) (Ph.D.). local page: MIT. Retrieved July 18, 2021.
- ↑
Anonymous MediaWiki Manual Editors,
Manual:Extensions,
Last Access: March 27, 2021,
https://www.mediawiki.org/wiki/Manual:Extensions