Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 4 Next »


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.

If you would like to have custom icons, please send us a request and we will follow up.


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.

    • Height and width should be around 31x31, although other sizes work.

    • Units must be in pixels.


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

You do, however, control the relative sizing of the icon by the size of icon in relation to it's viewport. The amount of "white spacing" around the icon when exporting it, decides the resulting size.

Rule of thumb: 16% buffer. 34x34 in a 50x50 box

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 color 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 various 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.

Don't hesitate to send us an email.


  • No labels