Symbol Library specifications

Follow these guidelines when creating a new symbol; current as of March 2018.

Each symbol will have 6 variants:

• 14px black (example filename: airport-black-14.svg)
• 14px white (airport-white-14.svg)
• 22px black (airport-black-22.svg)
• 22px white (airport-white-22.svg)
• 30px black (airport-black-30.svg)
• 30px white (airport-white-30.svg)

These are stored in the src/standalone directory in the repo. The pixel dimensions for each indicate the square dimensions for each symbol's artboard. Symbols typically use as much of the artboard as possible (as a result, they are best displayed over square placemarkers rather than round placemarkers, like circles and teardrops). Symbols that are wider than they are tall or taller than they are wide should be centered in the artboard. Review each design carefully in pixel preview to assure that artwork snaps to the pixel grid as much as possible and thereby avoids looking fuzzy/out of focus when viewed on screen at its native size. Save .svg artwork using Presentation Attributes and with the Responsive setting disabled.

The following revisions to the symbol library have reduced the amount of artwork to create for each symbol from 16 to 6, which will dramatically reduce the workload for each symbol release:

• The symbol artwork currently used in NPMap Builder is in the process of being deprecated, and will eventually be replaced by the above "standalone" symbols. As a result artwork will not be developed at those specific dimensions moving forward. 94 symbols remain available for NPMap Builder; specifications for these legacy symbols can be found at the bottom of the document.
• Drop-shadows have been removed from standalone symbols.
• Slate versions have been eliminated due to lack of use in Park Tiles Slate.
• Mobile applications now use the 22px white variant listed above instead of a separate 20px symbol.

Builder Symbols

24px

• a artboard dimensions: 24px x 24px
• b maximum symbol area: 17px x 17px
  • black symbol fill: #000000
  • white symbol fill: #ffffff
• c top left position (square symbols): 4,3
• d centroid x,y: 12.5,11.5

18px

• a artboard dimensions: 18px x 18px
• b maximum symbol area: 13px x 13px
  • black symbol fill: #000000
  • white symbol fill: #ffffff
• c top left position (square symbols): 3,2
• d centroid x,y: 9.5,8.5

12px

• a artboard dimensions: 12px x 12px
• b maximum symbol area: 9px x 9px
  • black symbol fill: #000000
  • white symbol fill: #ffffff
• c top left position (square symbols): 2,1
• d centroid x,y: 6.5,5.5