Template:OSM Location map from table
From HandWiki
Template documentationPurpose
OSM Location map from table provides a replacement for {{OSM Location map}} in which all the data is moved to a commons Data: file, thus avoiding the large lump of code that results from a map with multiple marker points. It also allows the same map to be re-used in multiple articles.
This template performs two roles. It can generate the data that is to be placed in the external .tab and .map files in Wikimedia Commons, and can also use those data files to display the map in an article.
Usage
- Generating the data
- The starting point for this process is to have your {{OSM Location map}} in a finished, saved form, showing all the item markers you need. You then edit the page again and change the first line of the template to read:-
{{OSM Location map from table
| setup-data-table=1
| title= <suitable title - if not already set within your map data>
| lat=
| lon=
<and so forth. All the remaining parameters should remain untouched at this stage.>
When the page is previewed, you will find new data generated on the page, containing a coded version of the map, ready to be pasted into special table and map files in Wikimedia Commons. Alongside the data sections are full instructions on how to create the required files.
- Displaying the map from external data
- The new, short, ready to run template replaces the long sets of parameters needed by {{OSM Location map}}. The instructions provide a ready customised version of the template below. The two 'new' parameters
data-tableandmapfileare the names of the .tab and .map files.
{{OSM Location map from table
| lat =
| lon =
| zoom =
| width =
| height =
| data-table =
| mapfile =
| title =
| caption=
}}
Limitations
As of January 2017 the full screen version is not able to display all the extra features (wikilinks, pictures, numbers on the dots) that the inline version provides.
It is not possible (at present) to use the external data and also 'localise' the framed or full-screen maps for a particular article. If the external data is used, no other items can be overlaid. Once the data has been transferred to data form, any changes to that data will change all the articles that use it, so at present each article is likely to need its own data files. Even the ability to shift the map within the frame is not possible if a mini-locator has been used, as these also have to be 'embeded' within the table data, and will get out of sinc if you change the map dimensions or focal point.
(There is of course nothing preventing the same source OSM Location map being used and adapted to multiple pages, each of which is then saved to data files.)
| <graph>
{ // // ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Street_map_with_marks // Please do not modify it anywhere else, as it may get copied and override your changes. // Suggestions can be made at https://www.mediawiki.org/wiki/Template_talk:Graph:Street_map_with_marks // // Template translation is in https://commons.wikimedia.org/wiki/Data:Original/Template:Graphs.tab // "version": 2, "width":350, "height": 250, "padding": 0, "signals":[ // These signals allow us to quickly move the map within the image, e.g. to leave space for the legend {"name":"legendWidth", "init": {"expr": "0"} }, {"name":"legendHeight", "init": {"expr": "height"} },
{"name":"imgWidth", "init": {"expr": "width-legendWidth"} },
{"name":"imgHeight", "init": {"expr": "height"} },
{"name":"imgXC", "init": {"expr": "imgWidth/2"} },
{"name":"imgYC", "init": {"expr": "imgHeight/2"} },
{"name":"imgTileSize", "init": {"expr": "256"} },
{"name":"imgLat", "init": {"expr": "0"} },
{"name":"imgLon", "init": {"expr": "0"} },
{"name":"imgZoom", "init": {"expr": "0"} },
{"name":"picWidth", "init": {"expr": "180"} },
{"name":"picHeight", "init": {"expr": "picWidth/2"} },
{"name":"picXC", "init": {"expr": "imgWidth-(picWidth/2)"} },
{"name":"picYC", "init": {"expr": "imgHeight-(picHeight/2)"} },
{"name":"showMiniMap", "init": {"expr": "0"} }
],
"data": [
{
"name": "data",
// Otherwise use the first unnamed argument for source values "values": [
],
"transform": [
{
"type": "geo",
"projection": "mercator",
"scale": {"expr": "imgTileSize/PI/2*pow(2,imgZoom)"},
"translate": [{"expr": "imgXC"}, {"expr": "imgYC"}],
"center": [{"expr": "imgLon"}, {"expr": "imgLat"}],
"lon": "lon", "lat": "lat"
},
{ "type": "formula", "field":"layout_x", "expr": "datum.layout_x + (datum.offsetX || 0)" },
{ "type": "formula", "field":"layout_y", "expr": "datum.layout_y + (datum.offsetY || 0)" },
{ "type": "formula", "field":"color", "expr": "datum.color || '#c33'" },
{ "type": "formula", "field":"textColor", "expr": "datum.textColor || datum.color" },
{ "type": "formula", "field":"strokeColor", "expr": "datum.strokeColor || '#ffe7e6'" }
]
},
{
// Hack: single value data source for drawing/hiding images and other non-series elements
"name": "dummyData",
"values": [{}]
}
],
// Legend only works if showLegend and colorScaleField are set "marks": [
{
"type": "image",
"from": {
"data": "dummyData",
"transform": [
{ "type": "formula", "field":"url", "expr": "'mapsnapshot:///?width='+imgWidth+'&height='+imgHeight+'&zoom='+imgZoom+'&lat='+imgLat+'&lon='+imgLon" }
]
},
"properties": {
"enter": {
"url": {"field": "url"},
"xc": {"signal": "imgXC"}, "yc": {"signal": "imgYC"},
"width": {"signal": "imgWidth"}, "height": {"signal": "imgHeight"}
}
}
},
{
// Places an image of a given name and size at the [lan,lon] location
"type": "image",
"from": {
"data": "data",
"transform": [
{ "type": "filter", "test": "datum.img" },
{ "type": "formula", "field":"iconWidth", "expr": "datum.width || 0" },
{ "type": "formula", "field":"iconHeight", "expr": "datum.height || 0" },
{ "type": "formula", "field":"img",
"expr": "if(!test(/^[a-z]+:\\/\\//, datum.img), 'wikifile:///'+datum.img, datum.img)" },
// Ensure that either width or height parameter is passed to wikifile:// request
{ "type": "formula", "field":"img",
"expr": "if((datum.iconWidth || datum.iconHeight) && !test(/[?&](width|height)=\\d/, datum.img),if(datum.iconWidth,datum.img+'?width='+datum.iconWidth,datum.img+'?height='+datum.iconHeight), datum.img)" }
]},
"properties": {
"enter": {
"url": {"field": "img"},
"xc": {"field": "layout_x"}, "yc": {"field": "layout_y"},
"width": {"field": "iconWidth"}, "height": {"field": "iconHeight"}
}
}
},
{
// Draw marks of a given color, shape, and size at the [lan,lon] location
"type": "symbol",
"from": {
"data": "data",
"transform": [{ "type": "filter", "test": "!datum.img" }]
},
"properties": {
"enter": {
"x": {"field": "layout_x"},
"y": {"field": "layout_y"},
// If colorScaleField is set, use color scaling, otherwise use the preset color value
"fill": { "field": "color" },
"size": {"field": "size"},
"shape": {"field": "shape"},
"stroke": {"field": "strokeColor"}
}
}
},
{
// Draw text with the given color and size at the [lan,lon] location
// See https://github.com/vega/vega/wiki/Marks#text for all parameter description (prepend "text" and capitalize them)
"type": "text",
"from": {
"data": "data",
"transform": [
{ "type": "filter", "test": "datum.text" },
// Figure out if this is an LTR or RTL page. For LTR, show label to the right of the icon, left-aligned. For RTL, reverse.
{ "type": "formula", "field":"isLTR", "expr": "'' == '\\u200E'" },
// If these values are not defined ("undefined" is not allowed, so test for truthiness and not 0)
{ "type": "formula", "field":"textDx", "expr": "if(!datum.textDx && datum.textDx != 0, if(datum.isLTR,8,-8), datum.textDx)" },
{ "type": "formula", "field":"textAlign", "expr": "if(!datum.textAlign, if(datum.isLTR,'left','right'), datum.textAlign)" },
{ "type": "formula", "field":"textBaseline", "expr": "datum.textBaseline || 'middle'" }
]},
"properties": {
"enter": {
"text": {"field": "text"},
"x": {"field": "layout_x" },
"y": {"field": "layout_y"},
"dx": {"field": "textDx" },
"dy": {"field": "textDy"},
"fill": {"field": "textColor"},
"align": {"field": "textAlign"},
"baseline": {"field": "textBaseline"},
"radius": {"field": "textRadius"},
"theta": {"field": "textTheta"},
"angle": {"field": "textAngle"},
"font": {"field": "textFont"},
"fontSize": {"field": "textFontSize"},
"fontWeight": {"field": "textFontWeight"},
"fontStyle": {"field": "textFontStyle"}
}
}
},
{
// Draw a low-zoom locator map frame
"type": "rect",
"from": {
"data": "dummyData",
"transform": [
{ "type": "filter", "test": "showMiniMap" }
]
},
"properties": {
"enter": {
"xc": {"signal": "picXC"}, "yc": {"signal": "picYC"},
"width": {"signal": "picWidth", "offset":2}, "height": {"signal": "picHeight"},
"stroke": {"value":"#fff"},"strokeWidth": {"value":6}
}
}
},
{
// Draw a low-zoom locator map by using a premade world map image
"type": "image",
"from": {
"data": "dummyData",
"transform": [
{ "type": "filter", "test": "showMiniMap" },
{ "type": "formula", "field":"url", "expr": "1" }
]
},
"properties": {
"enter": {
"url": {"value": "wikirawupload:https://handwiki.org/wiki/images/thumb/a/ac/Earthmap1000x500.jpg/180px-Earthmap1000x500.jpg"},
"xc": {"signal": "picXC"}, "yc": {"signal": "picYC"},
"width": {"signal": "picWidth"}, "height": {"signal": "picHeight"}
}
}
},
{
// Draw a zoom-out mark at the [lan,lon] location
"type": "symbol",
"from": {
"data": "dummyData",
"transform": [
{ "type": "filter", "test": "showMiniMap" },
{ "type": "formula", "field":"lat", "expr": "imgLat" },
{ "type": "formula", "field":"lon", "expr": "imgLon" },
{
"type": "geo",
"projection": "equirectangular",
"scale": {"expr": "180/2/PI"},
"translate": [{"expr": "picXC"}, {"expr": "picYC"}],
"center": [{"expr": "0"}, {"expr": "0"}],
"lon": "lon", "lat": "lat"
}
]
},
"properties": {
"enter": {
"x": {"field": "layout_x"}, "y": {"field": "layout_y"},
"fill": {"value": "#c33"},
"stroke": {"value": "#ffe7e6"},
"size": {"value": 40}
}
}
}
]
} </graph> |
The map data supplied is now shown below in three sections:-
- The template to replace the {{OSM Location map}} in you article, with the routine to use table and mapfile data.
- The code to paste into a new .tab file in commons
- A matching set of code to paste into a .map file also in commons.
To set up an OSM Location map table
- Step 1: Copy the whole of the .tab data page below into the clipboard.
- Step 2: Create or edit the Wikimedia Commons file commons:Data:your filename here.tab (or another name of your choosing).
- Step 3: Paste the data into the .tab page, (first delete any sample data that may be there). Add suitable content to description and sources fields. Preview and then SAVE.
- Step 4: Copy the source code/template data of your {{OSM Location map}} into the 'discussion' page associated with your new .tab page on Wikimedia Commons. It would be painful to try re-creating your map marks from the .tab data. Re-using it in an altered form of map is only possible from the original and this is the most helpful place for it to be 'parked'.
- Step 5: Replace your OSM Location map entry on your wikipedia page with the following, which sets up the map, and brings in the data from your new table. In the process you can safely delete the large slab of template parameters which you have saved on the .tab discussion page.
- Step 6: Preview and save your wikipedia page with the slimmed-down map template in place.
Text for your wikipedia page:
{{OSM Location map from table
| lat = 0
| lon = 0
| zoom = 10
| width = 350
| height = 250
| data-table = your filename here.tab <!-- or other table name of your choosing -->
| mapfile = your filename here.map <!-- or other table name of your choosing -->
| title = <!-- (optional) -->
| caption= <!-- (optional) -->
}}
Text for pasting into the commons .tab page:
{
"license": "CC0-1.0+",
"description": {
"en": ""
},
"sources": "source wikipedia page/ othersources. (Template:Graph:Street_map_with_marks data generated by wikipedia:template:OSM Location map from table)",
"schema": {
"fields": [
{
"name": "lat",
"type": "number"
},
{
"name": "lon",
"type": "number"
},
{
"name": "img",
"type": "string"
},
{
"name": "width",
"type": "number"
},
{
"name": "height",
"type": "number"
},
{
"name": "offsetX",
"type": "number"
},
{
"name": "offsetY",
"type": "number"
},
{
"name": "shape",
"type": "string"
},
{
"name": "color",
"type": "string"
},
{
"name": "strokeColor",
"type": "string"
},
{
"name": "size",
"type": "number"
},
{
"name": "text",
"type": "localized"
},
{
"name": "textAlign",
"type": "string"
},
{
"name": "textBaseline",
"type": "string"
},
{
"name": "textColor",
"type": "string"
},
{
"name": "textDx",
"type": "number"
},
{
"name": "textDy",
"type": "number"
},
{
"name": "textAngle",
"type": "number"
},
{
"name": "textRadius",
"type": "number"
},
{
"name": "textTheta",
"type": "number"
},
{
"name": "textFont",
"type": "string"
},
{
"name": "textFontSize",
"type": "number"
},
{
"name": "textFontWeight",
"type": "string"
},
{
"name": "textFontStyle",
"type": "string"
}
]
},
"data": [
[
0,
0,
"Mapscaleline.svg",
50,
8,
138,
115,
null,
null,
null,
null,
{
"en": "10 000km"
},
"right",
null,
"grey",
22,
-2,
null,
null,
null,
"Tahoma",
9,
null,
null
]
]
}
.map file for use in Full Screen option
The same process can be used to create a commons .map file, using an identical process to the one above. (It is more often possible to re-use .map data than .tab, as it needs fewer customised items.) If you need to create or edit a .map file, you can do this at the Wikimedia Commons file commons:Data:your filename here.map (or another name of your choosing).
Text for pasting into the commons .map page:
{
"license": "CC0-1.0+",
"description": {
"en": "your description here"
},
"sources": "** source wikipedia page/ othersources. (GeoJSON data generated by wikipedia:template:OSM Location map from table)",
"zoom": 11,
"latitude": 52,
"longitude": 0,
"data":
{"type": "FeatureCollection",
"features": [
Template:OSM Location map/MapfileItem
] } }
|}
