Page MenuHomeMiraheze

Kartographer extension: marker-symbol property is ineffective
Closed, InvalidPublic

Description

It seems that marker-symbols for Kartographer extension currently cannot be rendered. Look at example in https://ipch.miraheze.org/wiki/Mitgliederverteilung. There are two points to be located on the map. The points are visible but not with the marker-symbol whatever intended but with a kind of failure icon, I guess a broken floppy disk!

Event Timeline

Reception123 triaged this task as Normal priority.Dec 27 2020, 19:01
Reception123 added a project: Extensions.
Unknown Object (User) moved this task from Backlog to Deployed Extension Bugs on the Extensions board.EditedDec 28 2020, 17:12

Related: T5996

Unknown Object (User) closed this task as Invalid.Dec 28 2020, 18:34
Unknown Object (User) claimed this task.

Unfortunately due to our setup/the fact we are not wikimedia, this is not supported by kartographer used on Miraheze.

Well, this is a problem! As Universal_Omega says, the extension is hard-coded to use Wikimedia markers, but those don't work because the tile server was changed to openstreetmap.org. This is fixable but will require some engineering. I might look into it, but I've instead decided to display maps using the Cargo extension (i.e. with #cargo_display_map), which works fine for me because that's where coordinates are stored in my case. I see you are also using Cargo, @Driolar , so perhaps this solution works for you, too. There is one blocker, however, see T6662.

Eek, so I guess Cargo maps don't show on mobile because they (nor any of the other Cargo JS modules) are registered to work in MobileFrontend.

Anyway, I came up with a workaround for Kartographer. @Driolar Try tossing this in your MediaWiki:Common.css:

// Hack to show icon on Kartographer maps. See https://phabricator.miraheze.org/T6656
mw.hook('wikipage.maps').add(function () {
	mw.util.addCSS('.leaflet-marker-icon { margin-left: initial !important; margin-top: initial !important; width: auto !important; height: auto !important; }');
	new MutationObserver(function (mutations) {
		mutations.forEach(function (mutation) {
			if (mutation.addedNodes.length) {
				mutation.addedNodes[0].src = "https://openlayers.org/api/img/marker.png";
			}
		});
	}).observe($('.leaflet-marker-pane').get(0), {
		childList: true,
	});
});

This couldn't be more hacky, but it works! It shows the default OpenLayers icon. Replace https://openlayers.org/api/img/marker.png with any other desired icon.

Hope this helps!