Page MenuHomePhabricator

Customize marker popup appearance in Kartographer
Open, Needs TriagePublic

Description

Clicking on a map marker opens a popup window with POI name and other information, such as POI description and/or image. These popup windows may have different size and shape, and there is no obvious way to control their appearance. Would it be possible to customize popup windows using CSS styles (height, width, padding)? Can one use simple text formatting (bold-faced, italic) inside popup windows?

For example, check the map at:
https://ru.wikivoyage.org/wiki/User:Atsirlin/maps-region

Gray markers 2 and 6 produce popup windows of different size despite the same image width (fixed to 120px).
Additionally, I would like to have city names bold-faced, but this command (in either wiki- or html-markup) is simply ignored by the mapframe environment.

Event Timeline

Atsirlin created this task.Apr 2 2016, 3:26 PM
Restricted Application added a project: Discovery. · View Herald TranscriptApr 2 2016, 3:26 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Yurik added a comment.Apr 2 2016, 4:09 PM

@Atsirlin, I absolutely loved the map you did in https://ru.wikivoyage.org/wiki/Участник:Atsirlin/maps-region !!!
Re pushpin popups - i think popups are configured to auto-resize up to 300px width, after which it becomes a bit broken.

Your example produces for #2 and #6 these values. Yet for some reason the HTML uses different values.

== 2 ==
"title": "<b><a href=\"/wiki/%D0%92%D0%B8%D0%BB%D1%8C%D1%8F%D0%BD%D0%B4%D0%B8\" title=\"Вильянди\">Вильянди</a></b>",
"description": "<a href=\"/wiki/%D0%A4%D0%B0%D0%B9%D0%BB:Viljandi_Jaani_kirik1.jpg\" class=\"image\"><img alt=\"Viljandi Jaani kirik1.jpg\" src=\"//upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Viljandi_Jaani_kirik1.jpg/120px-Viljandi_Jaani_kirik1.jpg\" width=\"120\" height=\"82\" srcset=\"//upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Viljandi_Jaani_kirik1.jpg/180px-Viljandi_Jaani_kirik1.jpg 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Viljandi_Jaani_kirik1.jpg/240px-Viljandi_Jaani_kirik1.jpg 2x\" data-file-width=\"4139\" data-file-height=\"2831\" /></a>",

== 6 ==
"title": "<b><a href=\"/wiki/%D0%9F%D1%8F%D1%80%D0%BD%D1%83\" title=\"Пярну\">Пярну</a></b>",
"description": "<a href=\"/wiki/%D0%A4%D0%B0%D0%B9%D0%BB:2008_10_15_punane_torn_p%C3%A4rnus_02.jpg\" class=\"image\"><img alt=\"2008 10 15 punane torn pärnus 02.jpg\" src=\"//upload.wikimedia.org/wikipedia/commons/thumb/6/6e/2008_10_15_punane_torn_p%C3%A4rnus_02.jpg/120px-2008_10_15_punane_torn_p%C3%A4rnus_02.jpg\" width=\"120\" height=\"80\" srcset=\"//upload.wikimedia.org/wikipedia/commons/thumb/6/6e/2008_10_15_punane_torn_p%C3%A4rnus_02.jpg/180px-2008_10_15_punane_torn_p%C3%A4rnus_02.jpg 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/6/6e/2008_10_15_punane_torn_p%C3%A4rnus_02.jpg/240px-2008_10_15_punane_torn_p%C3%A4rnus_02.jpg 2x\" data-file-width=\"1920\" data-file-height=\"1285\" /></a>",
Yurik moved this task from Unsorted to UI tasks on the Maps (Kartographer) board.Apr 5 2016, 7:09 PM
Yurik renamed this task from Customize popup windows in Kartographer to Customize marker popup appearance in Kartographer.Apr 5 2016, 11:58 PM
Yurik removed a project: Maps.Dec 15 2016, 4:40 AM