Template:Graph:Map with marks

From Bonkipedia
Revision as of 14:28, 4 July 2016 by [[mw:]]>Yurik
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Template documentation


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

ParameterDescriptionTypeStatus
data1

Comma separated list of JSON objects that describing what data to draw on the map

Stringsuggested
backgroundbackground

Background map image filename

Fileoptional
widthwidth

Total width of the graph

Numberoptional
heightheight

Total height of the graph (Mercator projection is 2:1)

Default
Half of the width
Numberoptional
paddingpadding

no description

Numberoptional
projectionprojection

Name of the D3 geo projection to use

Stringoptional
The above documentation is transcluded from Template:Graph:Map with marks/doc. (edit | history)
Editors can experiment in this template’s sandbox (create | mirror) and testcases (create) pages.
Please add categories to the /doc subpage. Subpages of this template.
<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:https://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: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": "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>
Retrieved from "http://www.bonkipedia.org/index.php?title=Template:Graph:Map_with_marks&oldid=4315"