OSM Location Map Return to Service, 2024 edit
In April 2023 WMF identified security concerns that required withdrawal of the 'Graph' module, which gave access to the Vega v2 graphics services. This had carried out three key tasks for this template: show the right portion of the OSM maps; translate Mercator coordinates into x,y frame coordinates; and produce graphic symbols, images and text that it placed on the maps. What was initially expected to be a short pause while security issues were addressed stretched out over months as WMF found intractable obstacles with the upgrade to Vega v5, because of continuing security concerns, excessive demands on page-load times and difficulties in guaranteeing resources for future maintenance.
The extended outage gave time to grapple with the Mercator translation maths, allowing x,y to be generated by wikitext. However it was only once the capabilities of CSS graphics (already built in to wikipedia) were explored, and the 'overlay' facility at {{maplink}} was understood (a bit), that the three elements were in place to re-build OSM Location map without the need for the 'Graph' module or its Vega underpinnings. (At the time of writing, Vega 5 remains undeployed, which leaves large numbers of graphs, particularly those using external data sources and interactive uses, with no replacement in sight.) The new version of this template aims towards a 'near-identical' use of the 5,600 pre-existing maps, which should return displays close to those originally intended rather than the previous temporary solution of showing only maplink markers. As a bonus, the re-write has allowed some useful extras to be added by way of additional graphical elements and control options.
Shortcomings of the new version edit
As at March 2024 the biggest shortcoming of the CSS version was text placement. 
Thankfully this is solved, and is now reliably placing text a 'nice distance' to the right/left/abobe/below a symbol. (Note the interim 'justify-offset' parameter, jdx=, is now redundent and not used, so can be taken off any template uses.
It is also the case that with different code, and different methods of calling both graphics and text, the sizes and placements may vary slightly from the old version. However with that said, it is hoped that most maps will look very much as they used to. One impacted feature is ArcText. It previously needed to make numerous adjustments with the change in zoom and latitude. The CSS version has avoided this, which should make it more predictable to use, but will not give the same outcomes as before, with hand-editing needed to fit the new scheme. It is possible that better rendering of text in some cases will be as a label. It affects a very small number of maps, and is likely to be 'additional' rather than 'core' content. ( wobbly arc-text is now evened out, through better use of css.)
The rarely used 'Halo' feature has been left out of the re-write, in the cause of simplifying things. Something similar is possible with shape-outline. Open a discussion on the talk page if you would like to see this implemented.
Larger images, such as transparent overlays, have also ended up not on the same placement as before. This is an outcome of such a different sizing model compared to the old system, compounded by a decision to harmonise the 'shape' and 'image' sizes. Unfortunately any overlays will probably need to be re-sized and positioned to get them right.
New Features now available edit
for a page of examples that utilise some of the new features.
20miles
Each can be assigned
mark-size=, shape-color=,
shape-outline=, shape-angle=,
plus a set of label parameters.
with both height and width values
panel
features by using 'with-line',
'line-next', 'n-line' or
to a 'photo-panel'
mark=Red pog.svg
and text is put inside
mark-size=30,12
with double outline
with open centre
with rounded corners
Fullscreen link edit
{{maplink}} places a 'fullscreen link' box in the top-right corner, so this has been utilised as the place to click to get the full-screen version, instead of having text at the top of the caption.
'Live' wikilinks for marks edit
For the first time the marks can be clicked to link through to an article. This uses the information supplied in 'mark-title' (which is also used by auto-caption and 'fullscreen'), so many pages will now already have live dots on their map. It Wikilinks the first link (if there are several), which appears as a tooltip text-box when you hover over a live mark. Any mark where no link is supplied has no action. (Is this better than a 'page does not exist' message?) This is a new development, so may need some improving. In particular, should there be some sort of visual indication that a dot is 'live' or not? (Try finding the 5 live-links in the demo map on the right.)
Administrative Boundaries edit
This was barely onto a 'hoped for' list, having been restricted to fullscreen only throughout the life of this template. But suddenly, , it is possible to show boundaries, and potentially other linear features, on the page, within the frame. Proceeding with a degree of caution, it is looking like it could be a really useful element. It is a pity it can't do dashes etc. It is limited to solid lines, but they can be given a lot of transparency, so can drop down to the background very nicely. Set using 'Qvalues', available at wikidata pages, and set using map-data.
columns for auto-caption edit
The auto-caption= can now specify a column width (in ems), so that the list of numbered items can be split into several columns.
Drawing Order edit
Under the graph system, all shapes were drawn first, and text overlaid next. This way of doing things is not possible now. Each shape, label and numbered text is drawn in turn, so that the next will potentially overwrite the earlier. With this in mind, it seemed best to consider mark1 as the primary item, ie the one to be on top, and the higher numbers to be below them. It may be that some re-numbering will be needed if this obscures important information. There are also, however, options described below to move labels and numbers away from congested areas, by using a connecting line.
short-form for label-offsets edit
You will see below that to draw various lines from a shape, the label-offset-x and y parameters are used. To streamline this, alternative short forms, ldx and ldy, are now possible (d being the 'offset variable;). Thus ldx4=-25| ldy4=-15 will identify a location left and above the shape. Positive values would take it to the right and below, respectively.
An interim offset was jdx=. It moved labels that are left, center, top or bottom positioned, horizontally left or right, to compensate for a more basic text positioning method. A better method has now been found to align correctly on all sides, so jdx now has no effect.
Multi-item parameters edit
In an attempt to streamline the template content, there are now several parameters that can include more than one value, separated by commas. These are:
- mark-size= which can include width,height,corner-radius. (values in px. Only width is essential)
- shape-color= which can have color,opacity (opacity out of 100. This is the same as setting the now-redundant shape-opacity=. Note, for compatibility, 1 is invisible, through to 100 opaque. 0 and undefined are also opaque.
- shape-outline= color,line-thickness,opacity,css-style. (line-thickness is in px, with 0 meaning no outline. Opacity works the same as for shape-color. css style has various options of which the most useful are solid, dotted, dashed or double. This last allows a shape to be given a second outline around the shape. For example
shape outline=hard red,8,30,solidwould give a 'halo effect'. - label-pos= now incorporates several ways of drawing connecting lines - see below.
New Graphical elements edit
These are all available as numbered parameters, for use with any of the 60 marks, with or without numbering or labels.
| shape = circle, square, diamond, triangle |
These have the same width as height, so need a single mark-size number. They can also now be rotated using shape-angle=. In addition they can have colour, and outline attributes (see below) triangle-up is also available, identical to triangle.(Note: None of the triangle options can be given outlines, due to CSS limitations.) As previously, these can be given n- or l- prefixes to include a number or letter over the shape (either matching the mark number, or allocated using numbered=. |
| shape = box, ellipse, itriangle |
These can have separate width and height values. This is done using a comma-separated mark-size eg: mark-size,34,14 Box can also have a third value, corner-radius, which will give increasingly rounded corners. eg mark-size,34,34,3 |
| shape = rule | Places a line on the map, centred at coord, and uses mark-width= to set its length. It will apply the shape-outline attributes to the line If a 'height' value larger than 1 is also set in mark-size, this will give a gap size, with a double-line being drawn. (eg mark-size=120,10) |
| shape = panel | This is handled with a significant number of differences from the other shapes. It is intended for larger, legend/information items rather than as a point on the map. With this in mind: a) the coordinates indicate the top,left of the panel wheras for other shapes it is the centre-point. b) Any text attempts to be fitted inside the panel, rather than alongside it. Thus text with a text-pos=left will have a left-aligned attribute, near the top-left corner of the panel. c) As with box, mark-size=W,H,R will set Width, Height, corner-Radius. |
| shape=image | This mainly works as previously. It is the default shape, and mark= inidicated the file name from commons. If no mark is specified a red pog will be draw. Note that images can now be given an outline. Unlike previously, CSS displayed images will always take their 'normal' proportions (ie not squashed or stretched). However for any non-square proportions, the positioning of label will work best if either mark-dim= value or the mark-size=width,height values are given. |
| More lines |
There are four further ways to add lines to a map (in addition to the 'rule' shape. All are added as an adjunct to a shape. They are set as additions to label-pos (which makes sense for 3 of them, and works ok for the other!). They can all be used with right, left, top, bottom or centre-positions for labels, and can be set as |
| with-line | Use ldx and ldy to indicate a distance away from the shape and place the label alongside the other end of the line. For example label-pos2=left,with-line| ldx2=-15| ldy2=-3 would draw a line from the mark to that offset, and position the label to the left off that new point. It's primary purpose is when a map feature is in a crowded area, so the label can be re-located to somewhere more legible. It is up to the editor to identify the x,y offset for a good patch, and then use left,right etc to get the label and line to look right.
|
| n-line | Works very much like with-line, but is for use with numbered shaps. In the case where several numbered dots overlap it is particularly useful to 'extract' the number from its dot, and put it on the end of a connecting line instead. The number will also be a live wikilink, if one is available. If there is also a text label, the number and the label are both printed. |
| mark-line | This one does not actually use the re-positioning features of ldx or ldy, and does not engage with the label. Instead it draws a connecting line from this shape to the previous mark. Thus label-pos2=right, mark-line, 2 will draw a line between mark2 and mark1, and will give it a thickness of 2px, in the color set for shape-outline2. Two further comma-separated values can be optionally added. One is to specifiy a CSS line-style. This can be solid, dashed, or dotted. The other is to set a gap size, which has the effect of drawing two parallel lines of the given thickness and style, with the specified gap between. eg label-pos=top,mark-line,3,dotted,6. A gap of 1 or undefined draws a single line.
|
| photo-panel | photo-panel creates a panel ( deault height of 50px) to display both the label text and an optional photo, with a connecting line to its mark/shape. It requires two further comma-seperated parameters: a dimension value for the photo and the required total width of the panel. eg label-pos=left,photo-panel,0.8,110. It makes use of the photo set at mark-image=, (which is also used in the fullscreen map). the dimension (eg 0.7 for tall photos, 1 for square, 1.4 for landscape) is needed to place the picture and label correctly. The position of the centre of the panel is set by ldx= and ldy=. It will then display the photo-panel, whose outline and connecting line use the label-color, to create a unified look. In this instance left or right pos will indicate the position of the photo within the panel. The label will then be in the remaining portion of the panel. An optional final parameter can set the height - especially useful if not using a photo. eg label-pos=left,photo-panel,0,90,24 gives a panel for a single line of text and no photo.
|
| label= | Labels remain the way to add text over the map, generally in order to explain a particular shape. Labels can now display useful wikitext such as a pagename with hover enabled when used with svg markers (default). In addition to label-pos= (see above), it can be given label-size=; label-color= (which as with other colors, can include a second value to set opacity); label-angle=; and the previously described offset values - now shortened to ldx= and ldy=. One inovation is that line breaks can be added, by use of the ^ symbol. The labela= and labelb= options will still work, but splitting a label using the hat symbol is much more convenient, and can take as many breaks as needed.eg. label=Chester-^field ^Railway ^Station.
Note: the CSS text system seems to want to split text near the right edge of the frame, so if your labels are being given even more line breaks, that is an 'extra feature' of how text is currently handled. |
| label-size= | Under 'normal use', this works as previously, to set the size of the text. Two additional text features are now available, to fill a beige 'under-colour' behind the label, to blank out any bits of map that make the label unreadable; and to put a 1px black rounded outline around the label, to help highlight it. Usage: eg label-size3=13,background,outline
|
The main documentation page will also be updated to include this information 'soon'.