Mapweaver/Manual/Shields

From OpenStreetMap Wiki
Jump to: navigation, search
Available languages — Mapweaver/Manual/Shields
· Afrikaans · Alemannisch · aragonés · asturianu · azərbaycanca · Bahasa Indonesia · Bahasa Melayu · Bân-lâm-gú · Basa Jawa · Baso Minangkabau · bosanski · brezhoneg · català · čeština · dansk · Deutsch · eesti · English · español · Esperanto · estremeñu · euskara · français · Frysk · Gaeilge · Gàidhlig · galego · Hausa · hrvatski · Igbo · interlingua · Interlingue · isiXhosa · isiZulu · íslenska · italiano · Kiswahili · Kreyòl ayisyen · kréyòl gwadloupéyen · Kurdî · latviešu · Lëtzebuergesch · lietuvių · magyar · Malagasy · Malti · Nederlands · Nedersaksies · norsk bokmål · norsk nynorsk · occitan · Oromoo · oʻzbekcha/ўзбекча · Plattdüütsch · polski · português · português do Brasil · română · shqip · slovenčina · slovenščina · Soomaaliga · suomi · svenska · Tiếng Việt · Türkçe · Vahcuengh · vèneto · Wolof · Yorùbá · Zazaki · српски / srpski · беларуская · български · қазақша · македонски · монгол · русский · тоҷикӣ · українська · Ελληνικά · Հայերեն · ქართული · नेपाली · मराठी · हिन्दी · অসমীয়া · বাংলা · ਪੰਜਾਬੀ · ગુજરાતી · ଓଡ଼ିଆ · தமிழ் · తెలుగు · ಕನ್ನಡ · മലയാളം · සිංහල · ไทย · မြန်မာဘာသာ · ລາວ · ភាសាខ្មែរ · ⵜⴰⵎⴰⵣⵉⵖⵜ · አማርኛ · 한국어 · 日本語 · 中文(简体)‎ · 吴语 · 粵語 · 中文(繁體)‎ · ייִדיש · עברית · اردو · العربية · پښتو · سنڌي · فارسی · ދިވެހިބަސް

Introduction

Shields for ways can be implemented by providing an SVG template and some special rule values. First the simple thing, the rule. Instead of providing a label name, provide this:

shield:./icons/shield_ger_bab.def 

These are two values separated ba a colon. The first indicates a shield shall be used. The second tells the program which template to use. Label size will then define the height of the shield. The label itself is extracted from the ref tag.

Now the template (i.e. ./icons/shield_ger_bab.def for the German Autobahn/Motorway):

<g id="REPLACEID" transform="scale(REPLACESCALE REPLACESCALE)" > 
  <svg width="60px" height="40px" > 
    <defs> 
        <path id="REPLACEPATH" d="M 10 20 L 50 20" /> 
    </defs> 

    <rect x="0" y="0" width="60" height="40" style="fill:white;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" /> 
    <rect x="0" y="0" width="60" height="40" style="fill:none;stroke:#0000ff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" /> 

    <polyline points="4 9, 30 4, 56 9, 56 31, 30 36, 4 31, 4 9, 30 4" style="fill:#0000ff;stroke:none;"/> 

    <text font-family="sans-serif" font-size="15" fill="white" font-weight="bold"> 
      <textPath xlink:href="#REPLACEPATH" text-anchor="middle" startOffset="50%"><tspan dy="6">REPLACELABEL</tspan></textPath> 
    </text> 
  </svg> 
</g> 


We need a group definition per shield. The group already holds the first values that will be replaced by the program: REPLACESCALE Inside this group an SVG element is defined with width and height. The size in px is important because the program will read these values for scaling. Then the path definition follows. Again we have a variable that will be replaced by the program: REPLACEPATH Now all the graphics elements follow like desired. Near the end the initially defined path is used to draw the variable label inside the shield. Again the path variable and a label variable appear - to be replaced by the program. Some more examples from Germany:

Germany Primary

<g id="REPLACEID" transform="scale(REPLACESCALE REPLACESCALE)" > 
  <svg width="60px" height="40px" > 
    <defs> 
      <path id="REPLACEPATH" d="M 10 20 L 50 20" /> 
    </defs> 

    <rect x="0" y="0" width="60" height="40" style="fill:yellow;stroke:yellow;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" /> 

    <rect x="2" y="2" width="56" height="36" style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" /> 

    <text font-family="sans-serif" font-size="15" fill="black" font-weight="bold"> 
      <textPath xlink:href="#REPLACEPATH" text-anchor="middle" startOffset="50%"><tspan dy="6">REPLACELABEL</tspan></textPath> 
    </text> 

  </svg> 
</g> 

Germany Secondary and Tertiary

<g id="REPLACEID" transform="scale(REPLACESCALE REPLACESCALE)" > 
  <svg width="70px" height="40px" > 
    <defs> 
        <path id="REPLACEPATH" d="M 10 20 L 60 20" /> 
    </defs> 

    <rect x="0" y="0" width="70" height="40" style="fill:white;stroke:white;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" /> 

    <rect x="2" y="2" width="66" height="36" style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" /> 

    <text font-family="sans-serif" font-size="15" fill="black" font-weight="bold"> 
      <textPath xlink:href="#REPLACEPATH" text-anchor="middle" startOffset="50%"><tspan dy="6">REPLACELABEL</tspan></textPath> 
    </text> 

  </svg> 
</g> 

Italian Motorway (Autostrada)

<g id="REPLACEID" transform="scale(REPLACESCALE REPLACESCALE)" > 
  <svg width="60px" height="40px" >
   <defs>
        <path id="REPLACEPATH" d="M 10 20 L 50 20" />
    </defs>

    <rect x="0" y="0" width="60" height="40" style="fill:white;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" />
    <rect x="0" y="0" width="60" height="40" style="fill:none;stroke:#008001;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" />

    <rect x="4" y="4" width="52" height="32" style="fill:#008001;stroke:none;"/>

    <text font-family="sans-serif" font-size="15" fill="white" font-weight="bold">
      <textPath xlink:href="#REPLACEPATH" text-anchor="middle" startOffset="50%"><tspan dy="6">REPLACELABEL</tspan></textPath>
    </text>
  </svg>
</g>

Italian Primary/Secondary/Tertiary (Strada Statale/Provinciale/Comunale)

<g id="REPLACEID" transform="scale(REPLACESCALE REPLACESCALE)" > 
  <svg width="60px" height="40px" >
   <defs>
        <path id="REPLACEPATH" d="M 10 20 L 50 20" />
    </defs>

    <rect x="0" y="0" width="60" height="40" style="fill:white;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" />
    <rect x="0" y="0" width="60" height="40" style="fill:none;stroke:#003399;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" />

    <rect x="4" y="4" width="52" height="32" style="fill:#003399;stroke:none;"/>

    <text font-family="sans-serif" font-size="15" fill="white" font-weight="bold">
      <textPath xlink:href="#REPLACEPATH" text-anchor="middle" startOffset="50%"><tspan dy="6">REPLACELABEL</tspan></textPath>
    </text>
  </svg>
</g>

Google Maps Shield

<g id="REPLACEID" transform="scale(REPLACESCALE REPLACESCALE)" > 
  <svg width="66px" height="26px" >
   <defs>
        <path id="REPLACEPATH" d="M 10 20 L 50 20" />
    </defs>

    <rect x="0" y="0" width="66" height="26" style="fill:white;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" />
   
    <rect x="2" y="2" width="62" height="22" style="fill:#7787dd;stroke:none;"/>

    <text font-family="arial" font-size="15" fill="white" font-weight="bold">
      <textPath xlink:href="#REPLACEPATH" text-anchor="middle" startOffset="50%"><tspan dy="0">REPLACELABEL</tspan></textPath>
    </text>
  </svg>
</g>