Versions Compared

Version Old Version 8 New Version Current
Changes made by

Tina Tan

David Lawrence (Unlicensed)

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.


Question:

  • Can I add my own customized icons in MazeMap?
  • Can I use another icon for a room in MazeMap?

Answer:

MazeMap supports adding custom icons to be used on POIs.

This feature is generally enabled for customers which have this in their subscription plan, or as part of a pilot.

All customers are entitled to have up to 20 custom icons for free. If you would like to have custom icons, please send us a request and we will follow upupload more, please contact support@mazemap.com for prices and quantity.

Guidelines for custom icons

SVG File Format

  • Icons must be delivered to us in SVG file format.
  • The SVGs files should meet the following technical qualifications:

    • No SVG elements except for paths.

    • Flatten the SVG as much as possible. 

    • Avoid groups or transforms if possible. No guarantee for icons working with complex groups and transforms.

    • Don't use "shadow" and "stroke" effects. Flatten strokes into geometries with fill instead.
    • Use only flat fills, not gradients or transparency.

    • Try to use consistent width/height boxes for all submitted icons

    • Units must be in pixels.
    • Don't use styles, but instead use attributes for colour styling.
      Bad: <style>.mystyle{fill: #FC0}</style> (warning)
      Good: <path fill="#fc0">


Sizing of icons

The exact sizing of the icons in the resulting maps can vary, as we do scaling of icons to fit the maps.
But a rule of thumb is to design the icons to be displayed at a size between 20x20 and 30x30.

...

Our rule of thumb is to have icons designed as 34x34 in a 50x50 box, and then adjusting individually as necessary. That should result in around 16% whitespace on each side of the icon.

Example:


Design Icons to be displayed on non-white backgrounds

Another tip is to design the icons such that they can be placed on non-white backgrounds.

This is achieved by remembering two things:

No "holes"

Don't have transparent "holes" in your icons. Test your icons on top of a coloured background and see that nothing of the background is visible through your icon.

Example:


Design icons to be readable on "noisy" backgrounds

Adding a thin, white border around the icons will make them more legible when placed on top of patterned/colourful backgrounds.

Example:

Questions? Need help?

As always - we are available to assist in helping you if you have questions or need extra help in getting your icons to work.

...