:Graph:Street map with marks

위키백과, 우리 모두의 백과사전.
틀 설명문서[보기] [편집] [역사] [새로 고침]
마크업 결과물
마커 하나, 수동 지정 사이즈, 미니맵 없는 간단한 지도
{{Graph:Street map with marks | width=400 | height=150 | lat=37.8 | lon=-122.4 | zoom=5 | minimap=false |

  { "lat": 37.8, "lon": -122.4 }

}}
두 마커 (레이블 있음 - 다이아몬드형 하나, 공용의 사진을 사용하는 것 하나)
텍스트 레이블은 이름 다음에 Vega 텍스트 마크 로 "text" 값을 첨부하면 수동 지정할 수 있습니다.
{{Graph:Street map with marks | lat=40.816667 | lon=14.433333 | zoom=6 |

{"lat": 40.816667, "lon": 14.433333, "shape": "diamond", "size": 70, "offsetY": -10, "text": "베수비오 산", "textFontWeight": "bold", "textFontSize": 16, "textColor": "#2A4B8D"},

{"lat": 40.948333, "lon": 15.635556, "img": "Volcano red 32x32.svg", "width": 16, "height": 16,  "offsetY": -20, "text": "Mount Vulture", "textFontWeight": "bold", "textFontSize": 16, "textColor": "#2A4B8D"}

}}
빈 지도에 레이블 있는 마커 하나
{{Graph:Street map with marks | style=osm | lat=40.816667 | lon=14.433333 | zoom=6 |

{"lat": 40.816667, "lon": 14.433333, "shape": "diamond", "size": 70, "offsetY": -10, "text": "베수비오 산", "textFontWeight": "bold", "textFontSize": 16, "textColor": "#2A4B8D"},

}}
위키미디어 공용 데이터셋의 데이터
위와 같은 방식이지만 이번엔 데이터는 공용의 Data:Sandbox/Yurik/Street map with marks sample.tab 테이블에 저장되어 있습니다.
{{Graph:Street map with marks | lat=40.948333 | lon=15.635556 | zoom=6 | table=Sandbox/Yurik/Street map with marks sample.tab}}

원본 데이터 보거나 수정하기.

아르메니아의 모든 유적지를 위키데이터에서 쿼리해서 표시
쿼리 결과는 다른 예시와 같은 컬럼 (값)을 공유합니다. (text, img, ... ) 좌표값이 coord 컬럼으로 반환되어야 한다는 것만 뺴고요.
{{Graph:Street map with marks | lat=40.347 | lon=47.260 | zoom=6 | colorScaleField=type | wdqs=
# 각 위치는 한번만 표시되어야 합니다. 이 쿼리는 다른 예시의 "text", "img" 등과 같은 값을 반환할 것입니다. 
SELECT (SAMPLE(?coord) as ?coord) (SAMPLE(?type) as ?type)
WHERE {
  ?item wdt:P3170 ?heritageId .
  ?item wdt:P625 ?coord .
  ?item wdt:P31 ?type .
}
GROUP BY ?item
}}

해당하는 위키데이터 쿼리 보기.

{{Graph:Street map with marks | lat=-33.8688 | lon=151.2093 | zoom=10 |
{
  "lat": -33.8688,
  "lon": 151.2093,
  "img": "Opera_House_and_ferry._Sydney.jpg",
  "width": 48,
  "height": 36,
  "text": "시드니",
  "textFontWeight": "bold",
  "textFontSize": 20,
  "textColor": "#00f",
  "textAlign": "right",
  "textDx": -30
}
}}

이 데이터 틀 변수는 콤마로 분리된 JSON 항목이어야 합니다. 모든 항목은 "{"로 시작하며, 콤마로 분리된 키-값 쌍을 가지고, "}"로 끝납니다. 키는 아래의 다음 값 중 하나가 될 수 있습니다.

내장 마커 모양
shape (도형) "circle" (default), "square", "cross", "diamond", "triangle-up", "triangle-down" (docs)
color (색) 도형 색상, e.g. "#ff0000" (기본값 - 빨강)
strokeColor shape outline color
size (크기) 도형 크기 (숫자)
텍스트 레이블 (더 많은 정보 )
text (텍스트) 레이블 텍스트
textAlign (텍스트 가로정렬) 마커를 기준으로 한 가로정렬 위치. "left" (좌), "right" (우), "center" (중앙)이 있습니다. 기본값으로 LTR 언어에 "좌", RTL 언어에 "우" 가 적용됩니다.
textBaseline (텍스트 세로정렬) 세로 정렬 위치. 값: "middle" (중앙, 기본값) , "top" (상단), "bottom" (하단)
textColor (텍스트컬러) 레이블 텍스트의 색, e.g. "#ff0000" (빨강)
textDx, textDy 텍스트가 마커로부터 이 값만큼 가로/세로로 거리를 둡니다.
angle (각도) 해당 각도로 텍스트를 기울입니다.
radius/theta Radial positioning of the label relative to the marker
font, fontSize, fontWeight, fontStyle 폰트 이름, 사이즈, 굵기, 스타일
사진 마커
img (사진) 사진, 예시: Volcano red 32x32.svg
height, width () 그림의 크기
offsetX, offsetY 중앙 기준으로 거리 차

지도의 사진을 보여주고, 좌표 지점 위에 사용자가 지정할 수 있는 이미지와 아이콘을 삽입합니다.

틀 변수

변수설명형식상태
data1

지도에 그릴 데이터를 설명하는 콤마로 구분되는 JSON 오브젝트

문자열제안
widthwidth

그래프의 너비

숫자선택 사항
heightheight

그래프의 높이

기본값
Half of the width
숫자선택 사항
paddingpadding

설명 없음

숫자선택 사항
latlat

지도 중앙의 위도

숫자선택 사항
lonlon

지도 중앙의 경도

숫자선택 사항
zoomzoom

지도 줌 레벨 (0에서 18까지)

숫자선택 사항
stylestyle

지도 스타일, 기본값으로 'osm-intl'을 사용합니다. 레이블 없는 'osm'을 지원할 예정입니다.

문자열선택 사항
wdqswdqs

데이터 값 대신에 사용할 위키데이터 쿼리문 - 쿼리문의 결과에는 "coord"값과 좌표가 반드시 필요합니다.

문자열선택 사항
colorScaleFieldcolorScaleField

이 값이 주어진 경우 데이터 값이 점을 다른 색으로 그립니다. 값 하나에 점 하나입니다.

문자열선택 사항
minimapminimap

값이 0이나 false 값을 가리키는 경우 지도를 숨기고, 1이나 true 값을 가리키는 경우 지도를 보여줍니다. 지도가 미니맵을 포함할 정도로 충분히 큰 지 확인하십시오. 기본적으로 미니맵은 줌 레벨 5 이상에서 지도 크기가 충분하면 보여집니다.

부울식선택 사항
<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":400, "height": 300, "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": "40.347"} },
    {"name":"imgLon", "init": {"expr": "47.260"} },
    {"name":"imgZoom", "init": {"expr": "6"} },
    {"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": "imgZoom>4 && imgWidth>200 && imgHeight>110"} },
  ],
  "data": [
    {
      "name": "data",
// Otherwise use the first unnamed argument for source values
      "values": [ 
        {"lat":65.6, "lon":-168.1, "color":"#f00", "size": 10},
        {"lat":90, "lon":-180, "shape":"cross", "color":"#f00", "size": 500},
        {"lat":-90, "lon":180, "shape":"cross", "color":"#f00", "size": 500},
        {"lat":0, "lon":-180, "shape":"cross", "color":"#f00", "size": 500},
        {"lat":0, "lon":180, "shape":"cross", "color":"#f00", "size": 500},
        {"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"},
        {"lat":-10, "lon":20, "img":"Volcano red 32x32.svg", "offsetY":-10},
        {"lat":0, "lon":0, "img":"Volcano red 32x32.svg", "width":25, "height": 25, "offsetY":-10, "text": "Big volcano", "textFontWeight": "bold", "textFontSize": 20, "textColor": "#fff"},
        {"lat":37.774755, "lon":-122.454688, "color":"#f00", "size": 10},
        
      ],
      "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:"},
          "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>