Mapweaver/Manual/Shields

From OpenStreetMap Wiki
Jump to navigation Jump to search

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>