MediaWiki:DataMaps.js - Revision history

Wvaske: Label-only groups: wilds show as clickable italic region names with no icon

2026-08-29T20:54:08Z

Label-only groups: wilds show as clickable italic region names with no icon

← Older revision		Revision as of 20:54, 29 August 2026
Line 3:		Line 3:
	* - Binds a permanent name label to every marker so the maps read like the printed ones,		* - Binds a permanent name label to every marker so the maps read like the printed ones,
	* hiding labels of the busier groups while zoomed far out.		* hiding labels of the busier groups while zoomed far out.
			* - "Label-only" groups (LABEL_ONLY_GROUPS, or a map's `custom.labelOnlyGroups`): the icon is
			* hidden and the name is drawn centred on the spot as an italic region name; clicking the
			* name opens the marker's article. The marker itself still filters, searches and pops up.
	* - Draws clickable, labelled region outlines from a map's `custom.regions`		* - Draws clickable, labelled region outlines from a map's `custom.regions`
	* ([{ name, article, points: [[x,y], …] }]) — used by Map:Faerun to open the regional maps.		* ([{ name, article, points: [[x,y], …] }]) — used by Map:Faerun to open the regional maps.
Line 15:		Line 18:
	mw.loader.using( [ 'ext.datamaps.bootstrap', 'ext.datamaps.leaflet', 'mediawiki.util' ] ).then( function ( require ) {		mw.loader.using( [ 'ext.datamaps.bootstrap', 'ext.datamaps.leaflet', 'mediawiki.util' ] ).then( function ( require ) {
	var Leaflet = require( 'ext.datamaps.leaflet' ),		var Leaflet = require( 'ext.datamaps.leaflet' ),
	MINOR_GROUPS = [ 'town', 'ruin', '~~wilds~~', '~~rumour~~' ],		MINOR_GROUPS = [ 'town', 'ruin', 'rumour' ],
			LABEL_ONLY_GROUPS = [ 'wilds' ],
	DIRECTION = { stronghold: 'bottom', skarhald: 'bottom', party: 'top' },		DIRECTION = { stronghold: 'bottom', skarhald: 'bottom', party: 'top' },
	SUFFIX = { l: 'left', r: 'right', t: 'top', b: 'bottom' },		SUFFIX = { l: 'left', r: 'right', t: 'top', b: 'bottom' },
Line 22:		Line 26:
	// zoom. 0.45 = two clicks.		// zoom. 0.45 = two clicks.
	NEAR_DELTA = 0.45;		NEAR_DELTA = 0.45;

			function hideIcon( marker ) {
			var el = marker.getElement && marker.getElement();
			if ( el ) {
			el.classList.add( 'dn-icon-hidden' );
			}
			}

	mw.dataMaps.registerMapAddedHandler( function ( map ) {		mw.dataMaps.registerMapAddedHandler( function ( map ) {
	var isMini = map.rootElement.classList.contains( 'ext-datamaps-mini-layout' ),		var isMini = map.rootElement.classList.contains( 'ext-datamaps-mini-layout' ),
	custom = map.config.custom \|\| {},		custom = map.config.custom \|\| {},
	minorGroups = custom.labelMinorGroups \|\| MINOR_GROUPS;		minorGroups = custom.labelMinorGroups \|\| MINOR_GROUPS,
			labelOnlyGroups = custom.labelOnlyGroups \|\| LABEL_ONLY_GROUPS;

	map.on( 'markerReady', function ( marker ) {		map.on( 'markerReady', function ( marker ) {
Line 33:		Line 45:
	uid = state && state.uid ? String( state.uid ) : '',		uid = state && state.uid ? String( state.uid ) : '',
	suffix = /--([lrtb])$/.exec( uid ),		suffix = /--([lrtb])$/.exec( uid ),
	direction = ( suffix && SUFFIX[ suffix[ 1 ] ] ) \|\| DIRECTION[ group ] \|\| 'right',		labelOnly = labelOnlyGroups.indexOf( group ) !== -1,
			direction = labelOnly ? 'center' : ( ( suffix && SUFFIX[ suffix[ 1 ] ] ) \|\| DIRECTION[ group ] \|\| 'right' ),
	size, half, offset, cls;		size, half, offset, cls;
	if ( !state \|\| !state.label \|\| typeof marker.bindTooltip !== 'function' ) {		if ( !state \|\| !state.label \|\| typeof marker.bindTooltip !== 'function' ) {
Line 43:		Line 56:
	offset = direction === 'right' ? [ half + 2, 0 ] :		offset = direction === 'right' ? [ half + 2, 0 ] :
	direction === 'left' ? [ -( half + 2 ), 0 ] :		direction === 'left' ? [ -( half + 2 ), 0 ] :
	direction === 'top' ? [ 0, -( half - 2 ) ] : [ 0, half - 2 ];		direction === 'top' ? [ 0, -( half - 2 ) ] :
			direction === 'bottom' ? [ 0, half - 2 ] : [ 0, 0 ];
	cls = 'dn-map-label dn-map-label-' + direction + ' dn-map-label-g-' + ( group \|\| 'none' );		cls = 'dn-map-label dn-map-label-' + direction + ' dn-map-label-g-' + ( group \|\| 'none' );
	if ( isMini ) {		if ( isMini ) {
Line 50:		Line 64:
	if ( minorGroups.indexOf( group ) !== -1 ) {		if ( minorGroups.indexOf( group ) !== -1 ) {
	cls += ' dn-map-label-minor';		cls += ' dn-map-label-minor';
			}
			if ( labelOnly ) {
			cls += ' dn-map-label-only' + ( state.article ? ' dn-map-label-link' : '' );
			hideIcon( marker );
			marker.on( 'add', function () { hideIcon( marker ); } );
			if ( state.article ) {
			marker.on( 'tooltipopen', function ( e ) {
			var el = e.tooltip && e.tooltip.getElement && e.tooltip.getElement();
			if ( el && !el.dataset.dnLinked ) {
			el.dataset.dnLinked = '1';
			el.title = state.article;
			el.addEventListener( 'click', function ( ev ) {
			ev.stopPropagation();
			window.location.href = mw.util.getUrl( state.article );
			} );
			}
			} );
			}
	}		}
	marker.bindTooltip( state.label, {		marker.bindTooltip( state.label, {
Line 55:		Line 87:
	direction: direction,		direction: direction,
	offset: offset,		offset: offset,
	interactive: ~~false~~,		interactive: labelOnly,
	opacity: 1,		opacity: 1,
	className: cls		className: cls

Wvaske: custom.initialZoomIn / initialCenter (starting view) and custom.hiddenGroups (legend groups off by default)

2026-08-29T19:26:15Z

custom.initialZoomIn / initialCenter (starting view) and custom.hiddenGroups (legend groups off by default)

@@ Line 5: / Line 5: @@
   *  - Draws clickable, labelled region outlines from a map's `custom.regions`
   *    ([{ name, article, points: [[x,y], …] }]) — used by Map:Faerun to open the regional maps.
   * Styling lives in MediaWiki:DataMaps.css.
+  *
@@ Line 16: / Line 18: @@
 		DIRECTION = { stronghold: 'bottom', skarhald: 'bottom', party: 'top' },
 		SUFFIX = { l: 'left', r: 'right', t: 'top', b: 'bottom' },
 		// Minor labels appear once the map is zoomed in this many levels past its fitted (initial)
-		// zoom. The zoom buttons step 0.25, so 0.45 = two clicks.
+		// zoom. 0.45 = two clicks.
 		NEAR_DELTA = 0.45;
@@ Line 57: / Line 60: @@
 			} );
 		} );
 		map.on( 'leafletLoaded', function () {
@@ Line 77: / Line 93: @@
 			leafletMap.on( 'zoomend', updateTier );
 			leafletMap.whenReady( updateTier );
 			// Clickable region outlines (overview map).

Wvaske: Clickable, labelled region polygons from custom.regions; per-map minor-label groups

2026-08-29T19:19:36Z

Clickable, labelled region polygons from custom.regions; per-map minor-label groups

← Older revision		Revision as of 19:19, 29 August 2026
Line 1:		Line 1:
	/**		/**
	* Interactive maps (Extension:DataMaps) site script.		* Interactive maps (Extension:DataMaps) site script.
	* Binds a permanent name label to every marker so the maps read like the printed ones,		* - Binds a permanent name label to every marker so the maps read like the printed ones,
	* ~~and hides~~ labels of the busier groups (~~towns~~, ~~ruins~~, ~~wilds~~, ~~rumours~~) ~~while zoomed far out~~.		* hiding labels of the busier groups while zoomed far out.
	* Styling lives in MediaWiki:DataMaps.css ~~(.dn-map-label)~~.		* - Draws clickable, labelled region outlines from a map's `custom.regions`
			* ([{ name, article, points: [[x,y], …] }]) — used by Map:Faerun to open the regional maps.
			* Styling lives in MediaWiki:DataMaps.css.
	*		*
	* Label placement: by group (DIRECTION ~~below~~), overridable per marker by ending its id with		* Label placement: by group (DIRECTION), overridable per marker by ending its id with
	* --l, --r, --t or --b ~~(left / right / top / bottom), e.g~~. "sc-~~elturel~~-~~-l"~~.		* --l, --r, --t or --b. A map can widen the set of "minor" (hidden-when-far) groups with
			* `custom.labelMinorGroups`.
	*/		*/
	mw.loader.using( 'ext.datamaps.bootstrap' ).then( function () {		mw.loader.using( [ 'ext.datamaps.bootstrap', 'ext.datamaps.leaflet', 'mediawiki.util' ] ).then( function ( require ) {
	var MINOR_GROUPS = [ 'town', 'ruin', 'wilds', 'rumour' ],		var Leaflet = require( 'ext.datamaps.leaflet' ),
			MINOR_GROUPS = [ 'town', 'ruin', 'wilds', 'rumour' ],
	DIRECTION = { stronghold: 'bottom', skarhald: 'bottom', party: 'top' },		DIRECTION = { stronghold: 'bottom', skarhald: 'bottom', party: 'top' },
	SUFFIX = { l: 'left', r: 'right', t: 'top', b: 'bottom' },		SUFFIX = { l: 'left', r: 'right', t: 'top', b: 'bottom' },
Line 17:		Line 21:

	mw.dataMaps.registerMapAddedHandler( function ( map ) {		mw.dataMaps.registerMapAddedHandler( function ( map ) {
	var isMini = map.rootElement.classList.contains( 'ext-datamaps-mini-layout' );		var isMini = map.rootElement.classList.contains( 'ext-datamaps-mini-layout' ),
			custom = map.config.custom \|\| {},
			minorGroups = custom.labelMinorGroups \|\| MINOR_GROUPS;

	map.on( 'markerReady', function ( marker ) {		map.on( 'markerReady', function ( marker ) {
Line 39:		Line 45:
	cls += ' dn-map-label-mini';		cls += ' dn-map-label-mini';
	}		}
	if ( ~~MINOR_GROUPS~~.indexOf( group ) !== -1 ) {		if ( minorGroups.indexOf( group ) !== -1 ) {
	cls += ' dn-map-label-minor';		cls += ' dn-map-label-minor';
	}		}
Line 52:		Line 58:
	} );		} );

	~~// Zoom tier → data attribute the CSS keys off. "far" = at or near the fitted zoom.~~
	map.on( 'leafletLoaded', function () {		map.on( 'leafletLoaded', function () {
	var leafletMap = map.viewport && map.viewport.getLeafletMap(),		var leafletMap = map.viewport && map.viewport.getLeafletMap(),
Line 59:		Line 64:
	return;		return;
	}		}

			// Zoom tier → data attribute the CSS keys off. "far" = at or near the fitted zoom.
	function updateTier() {		function updateTier() {
	var z = leafletMap.getZoom();		var z = leafletMap.getZoom();
Line 70:		Line 77:
	leafletMap.on( 'zoomend', updateTier );		leafletMap.on( 'zoomend', updateTier );
	leafletMap.whenReady( updateTier );		leafletMap.whenReady( updateTier );

			// Clickable region outlines (overview map).
			( custom.regions \|\| [] ).forEach( function ( region ) {
			var latlngs = region.points.map( function ( p ) {
			return map.crs.fromPoint( [ p[ 1 ], p[ 0 ] ] ); // crs takes [y, x]
			} ),
			idle = { color: region.color \|\| '#3b2a12', weight: 2, opacity: 0.55, fillColor: '#ffffff', fillOpacity: 0.03 },
			hover = { opacity: 0.95, fillOpacity: 0.28 },
			poly = new Leaflet.Polygon( latlngs, Object.assign( { className: 'dn-region', interactive: true }, idle ) );
			poly.addTo( leafletMap );
			poly.bindTooltip( region.name, { permanent: true, direction: 'center', interactive: false, opacity: 1, className: 'dn-region-label' } );
			poly.on( 'mouseover', function () { poly.setStyle( hover ); } );
			poly.on( 'mouseout', function () { poly.setStyle( idle ); } );
			poly.on( 'click', function () {
			if ( region.article ) {
			window.location.href = mw.util.getUrl( region.article );
			}
			} );
			} );
	} );		} );
	} );		} );
	} );		} );

Wvaske: Per-marker label direction override via id suffix (--l/--r/--t/--b)

2026-08-29T19:03:47Z

Per-marker label direction override via id suffix (--l/--r/--t/--b)

← Older revision		Revision as of 19:03, 29 August 2026
Line 4:		Line 4:
	* and hides labels of the busier groups (towns, ruins, wilds, rumours) while zoomed far out.		* and hides labels of the busier groups (towns, ruins, wilds, rumours) while zoomed far out.
	* Styling lives in MediaWiki:DataMaps.css (.dn-map-label).		* Styling lives in MediaWiki:DataMaps.css (.dn-map-label).
			*
			* Label placement: by group (DIRECTION below), overridable per marker by ending its id with
			* --l, --r, --t or --b (left / right / top / bottom), e.g. "sc-elturel--l".
	*/		*/
	mw.loader.using( 'ext.datamaps.bootstrap' ).then( function () {		mw.loader.using( 'ext.datamaps.bootstrap' ).then( function () {
	var MINOR_GROUPS = [ 'town', 'ruin', 'wilds', 'rumour' ],		var MINOR_GROUPS = [ 'town', 'ruin', 'wilds', 'rumour' ],
	~~// Where the label sits relative to the icon, by group (default: right).~~
	DIRECTION = { stronghold: 'bottom', skarhald: 'bottom', party: 'top' },		DIRECTION = { stronghold: 'bottom', skarhald: 'bottom', party: 'top' },
			SUFFIX = { l: 'left', r: 'right', t: 'top', b: 'bottom' },
	// Minor labels appear once the map is zoomed in this many levels past its fitted (initial)		// Minor labels appear once the map is zoomed in this many levels past its fitted (initial)
	// zoom. The zoom buttons step 0.25, so 0.45 = two clicks.		// zoom. The zoom buttons step 0.25, so 0.45 = two clicks.
Line 19:		Line 22:
	var state = marker.apiInstance && marker.apiInstance[ 2 ],		var state = marker.apiInstance && marker.apiInstance[ 2 ],
	group = marker.attachedLayers && marker.attachedLayers[ 0 ],		group = marker.attachedLayers && marker.attachedLayers[ 0 ],
	direction = DIRECTION[ group ] \|\| 'right',		uid = state && state.uid ? String( state.uid ) : '',
			suffix = /--([lrtb])$/.exec( uid ),
			direction = ( suffix && SUFFIX[ suffix[ 1 ] ] ) \|\| DIRECTION[ group ] \|\| 'right',
	size, half, offset, cls;		size, half, offset, cls;
	if ( !state \|\| !state.label \|\| typeof marker.bindTooltip !== 'function' ) {		if ( !state \|\| !state.label \|\| typeof marker.bindTooltip !== 'function' ) {
Line 28:		Line 33:
	half = ( size ? ( Array.isArray( size ) ? size[ 0 ] : size.x \|\| 40 ) : 24 ) / 2;		half = ( size ? ( Array.isArray( size ) ? size[ 0 ] : size.x \|\| 40 ) : 24 ) / 2;
	offset = direction === 'right' ? [ half + 2, 0 ] :		offset = direction === 'right' ? [ half + 2, 0 ] :
			direction === 'left' ? [ -( half + 2 ), 0 ] :
	direction === 'top' ? [ 0, -( half - 2 ) ] : [ 0, half - 2 ];		direction === 'top' ? [ 0, -( half - 2 ) ] : [ 0, half - 2 ];
	cls = 'dn-map-label dn-map-label-' + direction + ' dn-map-label-g-' + ( group \|\| 'none' );		cls = 'dn-map-label dn-map-label-' + direction + ' dn-map-label-g-' + ( group \|\| 'none' );

Wvaske: Minor labels appear after two zoom clicks instead of three

2026-08-29T19:03:10Z

Minor labels appear after two zoom clicks instead of three

← Older revision		Revision as of 19:03, 29 August 2026
Line 9:		Line 9:
	// Where the label sits relative to the icon, by group (default: right).		// Where the label sits relative to the icon, by group (default: right).
	DIRECTION = { stronghold: 'bottom', skarhald: 'bottom', party: 'top' },		DIRECTION = { stronghold: 'bottom', skarhald: 'bottom', party: 'top' },
	// Minor labels appear once the map is zoomed in this many levels past its fitted (initial) zoom.		// Minor labels appear once the map is zoomed in this many levels past its fitted (initial)
	NEAR_DELTA = 0.6;		// zoom. The zoom buttons step 0.25, so 0.45 = two clicks.
			NEAR_DELTA = 0.45;

	mw.dataMaps.registerMapAddedHandler( function ( map ) {		mw.dataMaps.registerMapAddedHandler( function ( map ) {

Wvaske: Labels: direction per group (strongholds below, party above) to reduce collisions

2026-08-29T19:01:43Z

Labels: direction per group (strongholds below, party above) to reduce collisions

← Older revision		Revision as of 19:01, 29 August 2026
Line 7:		Line 7:
	mw.loader.using( 'ext.datamaps.bootstrap' ).then( function () {		mw.loader.using( 'ext.datamaps.bootstrap' ).then( function () {
	var MINOR_GROUPS = [ 'town', 'ruin', 'wilds', 'rumour' ],		var MINOR_GROUPS = [ 'town', 'ruin', 'wilds', 'rumour' ],
			// Where the label sits relative to the icon, by group (default: right).
			DIRECTION = { stronghold: 'bottom', skarhald: 'bottom', party: 'top' },
	// Minor labels appear once the map is zoomed in this many levels past its fitted (initial) zoom.		// Minor labels appear once the map is zoomed in this many levels past its fitted (initial) zoom.
	NEAR_DELTA = 0.6;		NEAR_DELTA = 0.6;
Line 16:		Line 18:
	var state = marker.apiInstance && marker.apiInstance[ 2 ],		var state = marker.apiInstance && marker.apiInstance[ 2 ],
	group = marker.attachedLayers && marker.attachedLayers[ 0 ],		group = marker.attachedLayers && marker.attachedLayers[ 0 ],
	size, ~~offsetX~~, cls;		direction = DIRECTION[ group ] \|\| 'right',
			size, half, offset, cls;
	if ( !state \|\| !state.label \|\| typeof marker.bindTooltip !== 'function' ) {		if ( !state \|\| !state.label \|\| typeof marker.bindTooltip !== 'function' ) {
	return;		return;
	}		}
	// ~~Sit~~ the label just ~~right~~ of the icon ~~(icons are anchored at their centre)~~.		// Icons are anchored at their centre; push the label just clear of the icon edge.
	size = marker.options && marker.options.icon && marker.options.icon.options.iconSize;		size = marker.options && marker.options.icon && marker.options.icon.options.iconSize;
	~~offsetX~~ = size ? ( Array.isArray( size ) ? size[ 0 ] : size.x \|\| 40 ) / 2 + 2 : 12;		half = ( size ? ( Array.isArray( size ) ? size[ 0 ] : size.x \|\| 40 ) : 24 ) / 2;
	cls = 'dn-map-label dn-map-label-g-' + ( group \|\| 'none' );		offset = direction === 'right' ? [ half + 2, 0 ] :
			direction === 'top' ? [ 0, -( half - 2 ) ] : [ 0, half - 2 ];
			cls = 'dn-map-label dn-map-label-' + direction + ' dn-map-label-g-' + ( group \|\| 'none' );
	if ( isMini ) {		if ( isMini ) {
	cls += ' dn-map-label-mini';		cls += ' dn-map-label-mini';
Line 32:		Line 37:
	marker.bindTooltip( state.label, {		marker.bindTooltip( state.label, {
	permanent: true,		permanent: true,
	direction: ~~'right'~~,		direction: direction,
	offset: ~~[ offsetX, 0 ]~~,		offset: offset,
	interactive: false,		interactive: false,
	opacity: 1,		opacity: 1,

Wvaske: Labels: tier relative to the map's fitted zoom; expose current zoom for tuning

2026-08-29T19:01:00Z

Labels: tier relative to the map's fitted zoom; expose current zoom for tuning

← Older revision		Revision as of 19:01, 29 August 2026
Line 2:		Line 2:
	* Interactive maps (Extension:DataMaps) site script.		* Interactive maps (Extension:DataMaps) site script.
	* Binds a permanent name label to every marker so the maps read like the printed ones,		* Binds a permanent name label to every marker so the maps read like the printed ones,
	* and hides labels of the busier groups (towns, ruins, wilds) while zoomed far out.		* and hides labels of the busier groups (towns, ruins, wilds, rumours) while zoomed far out.
	* Styling lives in MediaWiki:DataMaps.css (.dn-map-label).		* Styling lives in MediaWiki:DataMaps.css (.dn-map-label).
	*/		*/
	mw.loader.using( 'ext.datamaps.bootstrap' ).then( function () {		mw.loader.using( 'ext.datamaps.bootstrap' ).then( function () {
	var MINOR_GROUPS = [ 'town', 'ruin', 'wilds', 'rumour' ],		var MINOR_GROUPS = [ 'town', 'ruin', 'wilds', 'rumour' ],
	~~FAR_ZOOM = -1.25;~~ // ~~below~~ this (~~map px per screen px > ~2~~.~~4) minor labels are hidden~~		// Minor labels appear once the map is zoomed in this many levels past its fitted (initial) zoom.
			NEAR_DELTA = 0.6;

	mw.dataMaps.registerMapAddedHandler( function ( map ) {		mw.dataMaps.registerMapAddedHandler( function ( map ) {
Line 39:		Line 40:
	} );		} );

	// Zoom tier → data attribute the CSS keys off.		// Zoom tier → data attribute the CSS keys off. "far" = at or near the fitted zoom.
	map.on( 'leafletLoaded', function () {		map.on( 'leafletLoaded', function () {
	var leafletMap = map.viewport && map.viewport.getLeafletMap();		var leafletMap = map.viewport && map.viewport.getLeafletMap(),
			baseZoom = null;
	if ( !leafletMap ) {		if ( !leafletMap ) {
	return;		return;
	}		}
	function updateTier() {		function updateTier() {
	map.rootElement.dataset.dnLabelTier = ~~leafletMap.getZoom~~() < ~~FAR_ZOOM~~ ? 'far' : 'near';		var z = leafletMap.getZoom();
			if ( baseZoom === null \|\| z < baseZoom ) {
			baseZoom = z; // the most zoomed-out level seen is the fitted view
			}
			map.rootElement.dataset.dnZoom = z.toFixed( 2 );
			map.rootElement.dataset.dnBaseZoom = baseZoom.toFixed( 2 );
			map.rootElement.dataset.dnLabelTier = ( z - baseZoom ) < NEAR_DELTA ? 'far' : 'near';
	}		}
	leafletMap.on( 'zoomend', updateTier );		leafletMap.on( 'zoomend', updateTier );
	updateTier();		leafletMap.whenReady( updateTier );
	} );		} );
	} );		} );
	} );		} );

Wvaske: Labels: tag by group, hide minor-group labels when zoomed far out

2026-08-29T18:59:05Z

Labels: tag by group, hide minor-group labels when zoomed far out

← Older revision		Revision as of 18:59, 29 August 2026
Line 1:		Line 1:
	/**		/**
	* Interactive maps (Extension:DataMaps) site script.		* Interactive maps (Extension:DataMaps) site script.
	* Binds a permanent name label to every marker so the maps read like the printed ones.		* Binds a permanent name label to every marker so the maps read like the printed ones,
			* and hides labels of the busier groups (towns, ruins, wilds) while zoomed far out.
	* Styling lives in MediaWiki:DataMaps.css (.dn-map-label).		* Styling lives in MediaWiki:DataMaps.css (.dn-map-label).
	*/		*/
	mw.loader.using( 'ext.datamaps.bootstrap' ).then( function () {		mw.loader.using( 'ext.datamaps.bootstrap' ).then( function () {
			var MINOR_GROUPS = [ 'town', 'ruin', 'wilds', 'rumour' ],
			FAR_ZOOM = -1.25; // below this (map px per screen px > ~2.4) minor labels are hidden

	mw.dataMaps.registerMapAddedHandler( function ( map ) {		mw.dataMaps.registerMapAddedHandler( function ( map ) {
	var isMini = map.rootElement.classList.contains( 'ext-datamaps-mini-layout' );		var isMini = map.rootElement.classList.contains( 'ext-datamaps-mini-layout' );
Line 10:		Line 14:
	map.on( 'markerReady', function ( marker ) {		map.on( 'markerReady', function ( marker ) {
	var state = marker.apiInstance && marker.apiInstance[ 2 ],		var state = marker.apiInstance && marker.apiInstance[ 2 ],
	size, offsetX;		group = marker.attachedLayers && marker.attachedLayers[ 0 ],
			size, offsetX, cls;
	if ( !state \|\| !state.label \|\| typeof marker.bindTooltip !== 'function' ) {		if ( !state \|\| !state.label \|\| typeof marker.bindTooltip !== 'function' ) {
	return;		return;
Line 17:		Line 22:
	size = marker.options && marker.options.icon && marker.options.icon.options.iconSize;		size = marker.options && marker.options.icon && marker.options.icon.options.iconSize;
	offsetX = size ? ( Array.isArray( size ) ? size[ 0 ] : size.x \|\| 40 ) / 2 + 2 : 12;		offsetX = size ? ( Array.isArray( size ) ? size[ 0 ] : size.x \|\| 40 ) / 2 + 2 : 12;
			cls = 'dn-map-label dn-map-label-g-' + ( group \|\| 'none' );
			if ( isMini ) {
			cls += ' dn-map-label-mini';
			}
			if ( MINOR_GROUPS.indexOf( group ) !== -1 ) {
			cls += ' dn-map-label-minor';
			}
	marker.bindTooltip( state.label, {		marker.bindTooltip( state.label, {
	permanent: true,		permanent: true,
Line 23:		Line 35:
	interactive: false,		interactive: false,
	opacity: 1,		opacity: 1,
	className: ~~'dn-map-label' + ( isMini ? ' dn-map-label-mini' : '' )~~		className: cls
	} );		} );
			} );

			// Zoom tier → data attribute the CSS keys off.
			map.on( 'leafletLoaded', function () {
			var leafletMap = map.viewport && map.viewport.getLeafletMap();
			if ( !leafletMap ) {
			return;
			}
			function updateTier() {
			map.rootElement.dataset.dnLabelTier = leafletMap.getZoom() < FAR_ZOOM ? 'far' : 'near';
			}
			leafletMap.on( 'zoomend', updateTier );
			updateTier();
	} );		} );
	} );		} );
	} );		} );

Wvaske: Site gadget for the interactive maps: permanent name labels beside every marker

2026-08-29T18:56:27Z

Site gadget for the interactive maps: permanent name labels beside every marker

New page

/**
* Interactive maps (Extension:DataMaps) site script.
* Binds a permanent name label to every marker so the maps read like the printed ones.
* Styling lives in MediaWiki:DataMaps.css (.dn-map-label).
*/
mw.loader.using( 'ext.datamaps.bootstrap' ).then( function () {
mw.dataMaps.registerMapAddedHandler( function ( map ) {
var isMini = map.rootElement.classList.contains( 'ext-datamaps-mini-layout' );

map.on( 'markerReady', function ( marker ) {
var state = marker.apiInstance && marker.apiInstance[ 2 ],
size, offsetX;
if ( !state || !state.label || typeof marker.bindTooltip !== 'function' ) {
return;
}
// Sit the label just right of the icon (icons are anchored at their centre).
size = marker.options && marker.options.icon && marker.options.icon.options.iconSize;
offsetX = size ? ( Array.isArray( size ) ? size[ 0 ] : size.x || 40 ) / 2 + 2 : 12;
marker.bindTooltip( state.label, {
permanent: true,
direction: 'right',
offset: [ offsetX, 0 ],
interactive: false,
opacity: 1,
className: 'dn-map-label' + ( isMini ? ' dn-map-label-mini' : '' )
} );
} );
} );
} );