Template:Graph:Map with marks/doc

Markup	Result
Simple map with a single marker {{ Graph:Map with marks | {"lat":37.8, "lon":-122.4} }}	<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":37.8, "lon":-122.4} ], "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>
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 | {"lat":37.8, "lon":-122.4, "shape":"diamond", "color":"#0f0", "size": 100, "text": "Diamond"}, {"lat":-10, "lon":20, "img":"wikirawupload:{{filepath:Volcano red 32x32.svg|32}}", "width":25, "height": 25, "offsetY":-10, "text": "Volcano", "textFontWeight": "bold", "textFontSize": 20, "textColor": "#fff"}, }}	<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":37.8, "lon":-122.4, "shape":"diamond", "color":"#0f0", "size": 100, "text": "Diamond"}, {"lat":-10, "lon":20, "img":"wikirawupload:https://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": "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>
Set a different background image Also uses equirectangular projection {{ Graph:Map with marks | background=WorldMap-A non-Frame.png | {"lat":37.8, "lon":-122.4, "size": 100, "text": "San Francisco", "textFontWeight": "bold"} }}	<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":37.8, "lon":-122.4, "size": 100, "text": "San Francisco", "textFontWeight": "bold"} ], "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:https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/WorldMap-A_non-Frame.png/400px-WorldMap-A_non-Frame.png"}, "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>
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 | {"lat":-33.8688, "lon":151.2093, "img":"wikirawupload:{{filepath:Opera_House_and_ferry._Sydney.jpg|48}}", "width":48, "height": 36, "text": "Sydney", "textFontWeight": "bold", "textFontSize": 20, "textColor": "#00f", "textAlign": "right", "textDx": -30}, }}	<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":200, "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": "[90,-90,180,0]"} } ], "data": [ { "name": "data", "values": [ {"lat":-33.8688, "lon":151.2093, "img":"wikirawupload:https://upload.wikimedia.org/wikipedia/commons/thumb/c/c0/Opera_House_and_ferry._Sydney.jpg/48px-Opera_House_and_ferry._Sydney.jpg", "width":48, "height": 36, "text": "Sydney", "textFontWeight": "bold", "textFontSize": 20, "textColor": "#00f", "textAlign": "right", "textDx": -30}, ], "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:https://upload.wikimedia.org/wikipedia/commons/thumb/4/41/WorldMap_-270%2C-90%2C-180%2C0.png/200px-WorldMap_-270%2C-90%2C-180%2C0.png"}, "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>

Shows an image of a map, and draws user-specified images/icons on top of it using latitude/longitude coordinates.

Template parameters

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) Default Half of the width	Number	optional
padding	padding	no description	Number	optional
projection	projection	Name of the D3 geo projection to use	String	optional