Template:Graph:Map with marks
| Markup | Result |
|---|---|
| Simple map with a single marker {{ Graph:Map with marks | |
|
| Two markers with labels - one as diamond shape, one uses an image from Commons Text label can be customized with all of Vega text mark parameters by prepending "text" to their name {{ Graph:Map with marks | |
|
| Set a different background image Also uses equirectangular projection {{ Graph:Map with marks | background=WorldMap-A non-Frame.png | |
|
| Use a region of the world with a bounding box, and a right-aligned label Bounding box uses [left, bottom, right, top] Longitude: max left..right range is -180..180 Latitude: max bottom..top range is -90..90 {{ Graph:Map with marks | width=200 | height=200 | bbox=[90,-90,180,0] | background=WorldMap_-270,-90,-180,0.png | |
Shows an image of a map, and draws user-specified images/icons on top of it using latitude/longitude coordinates.
| Parameter | Description | Type | Status | |
|---|---|---|---|---|
| data | 1 | Comma separated list of JSON objects that describing what data to draw on the map | String | suggested |
| background | background | Background map image filename | File | optional |
| width | width | Total width of the graph | Number | optional |
| height | height | Total height of the graph (Mercator projection is 2:1)
| Number | optional |
| padding | padding | no description | Number | optional |
| projection | projection | Name of the D3 geo projection to use | String | optional |
<graph>
{
//
// ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph: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:Map_with_marks
//
"version": 2, "width":400, "height": 200, "padding": 0,
"signals":[
// These signals allow us to quickly move the map within the image, e.g. to leave space for the legend
{"name":"imgXC", "init": {"expr": "width/2"} },
{"name":"imgYC", "init": {"expr": "height/2"} },
{"name":"imgWidth", "init": {"expr": "width"} },
{"name":"imgHeight", "init": {"expr": "height"} },
// Bounding box uses [left, bottom, right, top]
// Longitude: max left..right range is -180..180
// Latitude: max bottom..top range is -90..90
{"name":"imgBoundingBox", "init": {"expr": "[-180,-90,180,90]"} }
],
"data": [
{
"name": "data",
"values": [
{"lat":20, "lon":-120, "color":"#0f0"},
{"lat":40, "lon":-120, "shape":"diamond", "color":"#0f0", "size": 80, "text": "Some cool text", "textColor": "#0ff", "textFontSize": 20, "textBaseline": "middle"},
// BUG! raw SVG image will NOT render properly on the server. Make sure to specify image pixel size, e.g. "|32"
{"lat":-10, "lon":20, "img":"wikirawupload://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Volcano_red_32x32.svg/32px-Volcano_red_32x32.svg.png", "offsetY":-10},
{"lat":0, "lon":0, "img":"wikirawupload://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Volcano_red_32x32.svg/32px-Volcano_red_32x32.svg.png", "width":25, "height": 25, "offsetY":-10, "text": "Big volcano", "textFontWeight": "bold", "textFontSize": 20, "textColor": "#fff"}
],
"transform": [
{
"type": "geo",
"projection": "equirectangular",
"scale": {"expr": "max(360/(imgBoundingBox[2]-imgBoundingBox[0]),180/(imgBoundingBox[3]-imgBoundingBox[1]))*imgWidth/2/PI"},
"translate": [{"expr": "imgXC"}, {"expr": "imgYC"}],
"center": [{"expr": "(imgBoundingBox[0]+imgBoundingBox[2])/2"}, {"expr": "(imgBoundingBox[1]+imgBoundingBox[3])/2"}],
"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 || '#ff0000'" },
{ "type": "formula", "field":"textColor", "expr": "datum.textColor || datum.color" }
]
}
],
"marks": [{
"type": "image",
"properties": {
"enter": {
"url": {"value": "wikirawupload:"},
"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" }
]},
"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"},
"fill": {"field": "color"},
"size": {"field": "size"},
"shape": {"field": "shape"}
}
}
},
{
// 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"}
}
}
}
]
}
</graph>