It's better when it's simple

User Tools

Site Tools


imapmarkers Plugin

Compatible with DokuWiki

  • 2024-02-06 "Kaos" yes
  • 2023-04-04 "Jack Jackrum" yes
  • 2022-07-31 "Igor" yes
  • 2020-07-29 "Hogfather" unknown

plugin Create Image Maps with Markers

Last updated on
Conflicts with


This software is a plugin for DokuWiki you can make image maps with markers and links.

It is inspired by the imagemapping plugin, aka. dokuwiki-plugin-imagemap, whose author, Gerry Weißbach, suggested me to write an own plugin for my purposes.

This plugin is a superset of the imagemapping plugin, simply use no references and omit area identifiers.


Install the plugin using the Plugin Manager or the download URL above, which points to latest version of the plugin.

Manual Installation

You can download a zip file from the download URL.
Extract the zip file and rename the extracted folder to imapmarkers.
Place this folder in DOKUWIKI-SERVER-ROOT/lib/plugins/
Refer also to Plugins on how to install plugins manually.

Example, Usage

Create an image map with clickable spans to show a marker on the image, e.g. a map.

An interactive example can be found here:

This is a non-interactive sample of such a map:

Bowen Map of the World, 1744

Sourcecode in DokuWiki:

{{imapmarkers>imapmarkers:1744_bowen_map_of_the_world.jpg|Bowen Map of the World, 1744}}
[[|CON1|Asia @ 456,116,30]]
[[|CON2|Africa @ 358,167,30]]
[[|CON3|North America @ 166,134,30]]
[[|CON4|South America @ 222,210,30]]
[[|CON5|Antarctica @ 152,324,30]]
[[|CON6|Europe @ 381,110,30]]
[[wp>Australia|CON7|Australia @ 510,232,30]]
    "marker" : "internal",
    "marker-color": "red",
    "clicked-reference-css": { "font-weight": "bold", "color": "red" },
    "area-fillColor": "ff0000",
    "area-fillOpacity": 0.2

{{imapmloc>CON1|Asia}} |
{{imapmloc>CON2|Africa}} |
{{imapmloc>CON3|North America}} |
{{imapmloc>CON4|South America}} |
{{imapmloc>CON5|Antarctica}} |
{{imapmloc>CON6|Europe}} |

Syntax, Configuration and Settings

A detailed desspription (syntax / semantics) can also be found on the plugins homepage:

Create a Map with Areas

You start with {{imapmarkers>IMAGE-LINK|TITLE}} and end with {{<imapmarkers}}.

IMAGE-LINK is a normal DokuWiki image link, see here, this may be an DokuWiki-internal or external address: https://…

TITLE is the title for your image, technically the alt="TITLE" attribute of the img element.

Enclosed in this, you define no, one or multiple image areas, see here, with this special area definition:


Area without identifier: [[LINK|TITLE@COORDINATES]]

LINK is an ordinary DokuWiki-link. This may be an external, internal or interwiki link. If the area or marker is clicked, this link is opened. If the identifier is blank or omited and you click the area, the area is shown until you click it again.

IDENTIFIER is a page-unique identifier for this area. This identifier is later used in a clickable element, say reference, to show the marker. If the identifier is blank or omited you can't refer to it. Identifiers are case sensitive.

TITLE is the title of the area. If you hover over the area, this title is shown.

COORDINATES are the areas location on the image. Coordinates can have 3 integer values (circle), 4 integer values (rectangle) or 6 or more integer values (polygon). If you define a polygon the number of values must be divisible by 2. Details: see here.

Circle: X,Y,RADIUS


Polygon: X1,Y1,X2,Y2,X3,Y3 (and so on …)

All coordinates you enter here are from your original image.


A configuration is inside the map definition and starts with {{cfg>}} and ends with {{<cfg}}

Between this you define a JSON object. This plugin tests, if it is correct JSON.

There are these configuration options:

“marker”: (string) "internal" – Use the plugins-internal marker. This is the default, so no need to write this, if you are happy with the internal marker.

“marker”: (string) "LINK" – Internal or external link to an image.

Example: "marker": "imapmarkers:marker.002.png"

Example: "marker": ""

“marker-width”: (positive number) – Set the markers width to this value.

Example: "marker-width": 20

“marker-height”: (positive number) – Set the markers height to this value.

Example: "marker-height": 32

“marker-color”: (string) "HTML-COLOR" – Set the internal markers color to this value.

Example: "marker-color": "#FDEB00"

“clicked-reference-css”: (JSON) JSON-OBJECT-WITH-CSS-DEFINITIONS – The CSS definitions are applied to a reference, if you click the reference.

Example: "clicked-reference-css": { "font-weight": "bold", "color": "red" }

“area-fillColor”: (string) “HTML-COLOR-HEXADECIMAL” – Set the color of the hoverd area. Don't use a `#' before the hex-code.

Example: "area-fillColor": "ff0000"

“area-fillOpacity”: (float) OPACITY-PERCENT – Set the opacity of the hovered area. The value must between 0 and 1. 1 is full opacity. 0 is no opacity, i.e. the hovered area is not shown.

Example: "area-fillOpacity": 0.3

Complete Configuration-Example (Place this inside your map definition!):

    "marker-color": "red",
    "clicked-reference-css": { "font-weight": "bold", "color": "red" },
    "area-fillColor": "ff0000",
    "area-fillOpacity": 0.2

Create References

References are spans, i.e. a piece of inline text. And if you click a reference, the marker is shown in the middle of the area with the same identifier.

References can be places everywhere in the page.

Reference: {{imapmloc>IDENTIFIER|TEXT}}

IDENTIFIER refers to the areas identifier. You may define multiple references for one identifier.

TEXT is the text shown in the page.

Example: {{imapmloc>CON1|Asia}} – Refers to the area with CON1 as identifier.

Change Log

Known Bugs and Issues

ToDo / Wish List

Empty. ;-)

Used Software and Attribution



plugin/imapmarkers.txt · Last modified: 2024-04-01 14:11 by kgitthoene

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki