Modelo:Graph:Street map with marks

Na Galipedia, a Wikipedia en galego.
Test Template Info-Icon - Version (2).svg Indicacións de uso do modelo

Uso[editar a fonte]

Obxectivo: Mostra unha imaxe dun mapa (tirada de OpenMaps), con imaxes ou iconas enriba dela, especificadas polo usuario, utilizando coordenadas de latitude e lonxitude, ou tirando datos de Wikidata.

[Administrar a documentación do modelo]

Parámetros do modelo

ParámetroDescriciónTipoEstado
data1

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

Cadea de caracteresrecomendado
widthwidth

Total width of the graph

Númeroopcional
heightheight

Total height of the graph

Por defecto
Half of the width
Númeroopcional
paddingpadding

sen descrición

Númeroopcional
latlat

Latitude do centro do mapa

Númeroopcional
lonlon

Lonxitude do centro do mapa

Númeroopcional
zoomzoom

Nivel de zoom do mapa (0..18)

Númeroopcional
wdqswdqs

An optional Wikidata query to use instead of the data - the query would generate a list of items just like data, but it must contain a "coord" field with the location

Cadea de caracteresopcional
colorScaleFieldcolorScaleField

If given, this data field will be used to make dots of different color, one color per unique value of this field

Cadea de caracteresopcional
minimapminimap

If set, 0 or false will always hide the map, and 1 or true will always show it. Make sure the map is big enough include the minimap. By default, the map will be shown for zoom levels 5+ if the map is sufficiently large

Lóxico (booleano)opcional

Exemplos[editar a fonte]

Código Resultado
Mapa simple con marca simple, tamaño a medida, e sen minimapa
{{Graph:Street map with marks | width=800 | height=600 | lat=42.8806 | lon=-8.5443 | zoom=18 | minimap=false |

  { "lat": 42.8806, "lon": -8.5443 }

}}
Mostrar volcáns, tirando os datos de Wikidata
O resultado da consulta debe ter as mesmas columnas (campos) como nos outros exemplos (texto, imaxe, ...)
{{Graph:Street map with marks | width=800 | height=400 | lat=42 | lon=-8 | zoom=1 | colorScaleField=type | wdqs=
SELECT (SAMPLE(?coord) as ?coord) (SAMPLE(?type) as ?type)
WHERE {
  ?item wdt:P625 ?coord .
  ?item wdt:P31 wd:Q8072 .
}
GROUP BY ?item
}}

See Wikidata query.

{{Graph:Street map with marks | lat=42.3363 | lon=-7.8636 | zoom=7 |
{
  "lat": 42.3363,
  "lon": -7.8636,
  "img": "wikirawupload:{{filepath:Ourense, Catedral, torre.JPG|48}}",
  "width": 30,
  "height": 45,
  "text": "Catedral de Ourense",
  "textFontWeight": "bold",
  "textFontSize": 10,
  "textColor": "#00f",
  "textAlign": "right",
  "textDx": 125
}
}}

Véxase tamén

Ligazóns externas
Este recadro non aparecerá no artigo.
Esta documentación está transcluída desde Modelo:Graph:Street map with marks/uso. Os editores poden probar cambios no mesmo en Modelo:Graph:Street map with marks/probas.
Por favor, engade as categorías na subpáxina de documentación e os interwikis no Wikidata. Ver as subpáxinas deste modelo.
<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://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Earthmap1000x500.jpg/180px-Earthmap1000x500.jpg"},
          "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>