Choose reference point for icon placement

[Ragos81]

environment

• php version:
• dokuwiki version: 2022-07-31a "Igor"
• plugin version / date: 2023-01-20
• list of any other plugins (apart from bundled plugins):

current behavior

I noticed that the reference point of the icon is in its center, which might make sense for some icons, but in some cases it should better use (for example) the lower center. If not, with every change of the zoom level the marked position seems to point to another location.

Original location:
<olmap id="olMap" width="400px" height="300px" lat="31.72533" lon="119.82111" zoom="14" controls="1" baselyr="bing road" summary="location X"> 31.72533,119.82111,0,.8,factory.png,Here is the gold </olmap>

Arrow point to a position on land

Same location with different zoom level:

The arrow point to a position in the lake

improvement suggestion

Would it be possible to have a setting to define the reference point of an icon?

I think of referring to directions like:

NW	N	NE
W	C	E
SW	S	SE

...with "C" as the standard setting.

Then the code with the lower center (S) as reference for the icon placement could look something like that:
<olmap id="olMap" width="400px" height="300px" lat="31.72533" lon="119.82111" zoom="14" controls="1" baselyr="bing road" summary="location X"> 31.72533,119.82111,0,.8,S,factory.png,Here is the gold </olmap>

Alternatively, it could be also a general setting in the admin panel.

[mprins]

You are welcome to provide a pull request that provides this offset and is backwards-compatible (does not break with existing data).

you would want to look into

dokuwiki-plugin-openlayersmap/script.js

Lines 274 to 296 in 1d4e746

	return new ol.style.Style({
	image: new ol.style.Icon({
	src: `${DOKU_BASE}lib/plugins/openlayersmap/icons/${img}`,
	crossOrigin: '',
	opacity: opacity,
	scale: iconScale,
	rotation: angle * Math.PI / 180,
	// width/height were added in OpenLayers 7.2.2
	// see https://github.com/openlayers/openlayers/pull/14364
	}),
	text: new ol.style.Text({
	text: `${text}`,
	textAlign: 'center',
	textBaseline: 'middle',
	offsetX: (8 + 4 + 2) * iconScale,
	offsetY: -8 * iconScale,
	scale: iconScale,
	fill: new ol.style.Fill({color: 'rgb(0,0,0)'}),
	font: 'bold 16px monospace',
	stroke: new ol.style.Stroke({color: 'rgba(255,255,255,.4)', width: 5}),
	})
	});
	}

and

dokuwiki-plugin-openlayersmap/StaticMap.php

Lines 105 to 139 in 1d4e746

	private $markerPrototypes = array(
	// found at http://www.mapito.net/map-marker-icons.html
	// these are 17x19 px with a pointer at the bottom left
	'lightblue' => array(
	'regex' => '/^lightblue([0-9]+)$/',
	'extension' => '.png',
	'shadow' => false,
	'offsetImage' => '0,-19',
	'offsetShadow' => false
	),
	// openlayers std markers are 21x25px with shadow
	'ol-marker' => array(
	'regex' => '/^marker(|-blue|-gold|-green|-red)+$/',
	'extension' => '.png',
	'shadow' => 'marker_shadow.png',
	'offsetImage' => '-10,-25',
	'offsetShadow' => '-1,-13'
	),
	// these are 16x16 px
	'ww_icon' => array(
	'regex' => '/ww_\S+$/',
	'extension' => '.png',
	'shadow' => false,
	'offsetImage' => '-8,-8',
	'offsetShadow' => false
	),
	// assume these are 16x16 px
	'rest' => array(
	'regex' => '/^(?!lightblue([0-9]+)$)(?!(ww_\S+$))(?!marker(|-blue|-gold|-green|-red)+$)(.*)/',
	'extension' => '.png',
	'shadow' => 'marker_shadow.png',
	'offsetImage' => '-8,-8',
	'offsetShadow' => '-1,-1'
	)
	);

and

dokuwiki-plugin-openlayersmap/StaticMap.php

Line 574 in 1d4e746

public function placeMarkers(): void {

[Ragos81]

I would love to do so, unfortunately my highest programming achievement was writing some simple python code to calculate dimensions of non standard metric threads. 😂