Wave2 Locator Admin Portal - Image Types and Sizes

Wave2 Locator Admin Portal - Image Types and Sizes

The Wave2 Locator Admin Portal allows you to manage your own media and image library and to override and customize the map marker images and logo/branding images for individual locations. It also allows you to upload an unlimited number of photos and then to assign them to individual branch or ATM locations to be displayed in a mobile responsive slideshow presentation.

With this much power and control comes great responsibility. :) 

It is important that you use the most appropriate image types, web optimized images, and the correct image layouts in order to give users the best experience. Otherwise you risk breaking your locator layout, showing off-center map pin markers, and/or forcing huge image files down a slow mobile connection, which can create a slow user experience.

Logo Image Guidance
Logo images can be GIF, JPEG, or SVG image file types. The dimensions can vary, but should be no greater than 200 pixels wide. Vertically, logos should be around 80 to 100 pixels high. The ideal logo image dimension is about 200x80 with a white or transparent background. The SVG image type is preferred for highest resolution and for best performance on Retina displays. However, it is important that you design your SVG vector image to have a native size of about 200x80 pixels. If you upload an SVG file with large dimensions, it will scale down okay, but it will look bad.

Example Logo Image:
Location Logo-Eastern Federal Branch

Map Pin Marker Image Guidance
Map Marker images can be or SVG or PNG image file types. It is critical that marker images have transparent backgrounds because they will be overlaid in front of mapping imagery, which must show through. Important Note 1: These marker images will be forced to 56x56 pixels when displayed on the map, so it is critically important that they are square images (having equal width and height) and relatively close to that display size to avoid distortion. The sample SVG vector image below is 112x112 pixels, but because it is a vector image it will scale well and will look very sharp even on Retina displays. Important Note 2: because these marker images have a "stem" that will point to the map location in question, it is critically important that they are arranged with the same positioning as the sample image below, or with proportionate layout at other dimensions.

Example Map Marker Image:


Slideshow Image Guidance
Dimensions of slideshow images are not hugely important, though keeping them consistent will make for a smoother and more consistent slideshow animation.  File types for slideshows are typically JPEG images, but GIF or PNG will work as well. The most important consideration for slideshow images is that both dimensions and file size are kept to a reasonable size to optimize download speeds without compromising image quality. Important Note: Please be sure to web optimize your slideshow photos!

Example Slideshow Image: 



Don't Be Afraid to Ask for Help
If you are having trouble or doubts about your image uploads or overrides, don't hesitate to submit a help ticket or email us at support@wave2.io. That's why we're here!