Template:Graph:Map with marks

Template documentation


Markup Result
Simple map with a single marker

{{ Graph:Map with marks |
{"lat":37.8, "lon":-122.4}
}}

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"},
}}

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"}
}}

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},
}}

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

Template parameters[Edit template data]

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
<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>