If you are a MyGeotab Add-In creator with Feature Preview enabled, you may have noticed that your menu icon in MyGeotab has been replaced with a circle in our new refreshed user interface. As a follow-up to our What’s new in MyGeotab Version 2004 blog post, where the topic of Add-In icons was mentioned, we'd like to show you how to get started.
Please follow these guidelines for the 2101 release of MyGeotab when creating new Add-In icons for the left main navigation panel. Following these specifications will ensure that your icons comply with other native elements in MyGeotab.
✱ NOTE: The new User Interface (UI) is currently in Feature Preview, but will become standard in our 2102 release, which starts rolling out in Q2 2021. If you would like your new icons to be available in the 2102 release, be sure to make your changes prior to the release.
Navigation icons in MyGeotab are line-style icons. Although some icons include a fill on smaller areas (such as the Map icon), please use the line-style where possible to ensure uniformity with other native elements in the application.
When creating your icon, be sure it conforms to the following:
- File format: SVG, EPS, AI
- Color model: sRGB
- Max file size: 1024 KB
- Aspect ratio: 24 px square
When creating your icon, it must be square and conform to the dimensions below:
Height = 24 px, Width = 24 px
When creating your icon, it must conform to the line properties below:
Stroke / Line weight = 2 px, Corner radius = 2 px
✱ NOTE: Be sure to outline any strokes or lines, then merge all vector layers to create a single vector shape.
There are the two color states for the icons: selected and neutral. The icons below demonstrate how the icons will appear in the main navigation menu in MyGeotab. White-label versions may appear differently.
System Icon colors
Icon when selected = Hex: #0078D3, RGB: 0, 120, 211
Icon when neutral = Hex: #66788C, RGB: 102, 120, 140
✱ NOTE: Since the image file type is a vector, you only have to submit one file, in any color. The icon file will be updated to the appropriate colors once received. All original colors will be reset.
The Configuration file does not change. The URL for the Add-In icon will remain available in the configuration file.
- Only SVG icons are supported. If you attempt to load PNG, JPG, WebP or other files, the application will ignore them and the default icon will display instead.
- SVG icons are downloaded and cached on the client side. If you store icons on your own server, and you experience problems displaying your Add-In icons in MyGeotab, check the Cross-Origin Resource Sharing (CORS) header used by your server. You can either allow the icon to be downloaded from all domains, or from geotab.com. To learn more, visit Cross-Origin Resource Sharing (CORS).
- When icons are downloaded, they are stored in DOM with the following colors settings: fill = #66788C (or #0078D3 when it’s selected), and stroke = none. If your icon has fill or stroke colors set for some elements they will be reset. Better to draw icons with a single global fill value (on SVG element) and don’t use other colors on separate elements. Colors mentioned are for MyGeotab only, and do not apply to white labels.
Have questions? Reach out to us through our Geotab Community!
To see our SDK documentation, and to learn more about add-ins, visit our Github page.
Contributor: Monica Nuyens