Images can enhance the fidelity of an indoor map. They can be used to add custom branding, highlight important features, or provide additional information to users.
Images can be placed on any Door, Space, or Coordinate on the map and given a verticalOffset to control the height at which the image is displayed.
JPEG and PNG images are supported. It's important to consider the size of all unique image files displayed on a map at one time.
Using many unique images may cause instability on mobile devices with limited GPU memory. The Mappedin SDK will cache and reuse images that have the same URL, resulting in reduced memory usage.
The following calculations illustrates how much memory is used for a given image:
Formula: width * height * 4 bytes/pixel = memory used
The created Image, or undefined if creation failed.
Example
// Add an interactive {@link Image} to the map with custom HTML content. mapView.Images.add(coordinate, '<div>Image Content</div>', { interactive:true });
Images can enhance the fidelity of an indoor map. They can be used to add custom branding, highlight important features, or provide additional information to users. Images can be placed on any Door, Space, or Coordinate on the map and given a verticalOffset to control the height at which the image is displayed.
This class is accessed using MapView.Images.
JPEG and PNG images are supported. It's important to consider the size of all unique image files displayed on a map at one time. Using many unique images may cause instability on mobile devices with limited GPU memory. The Mappedin SDK will cache and reuse images that have the same URL, resulting in reduced memory usage.
The following calculations illustrates how much memory is used for a given image:
Formula:
width * height * 4 bytes/pixel = memory used512 x 512 Pixel Image:
512px * 512px * 4 bytes/pixel = 1MB4096 x 4096 Pixel Image:
4096px * 4096px * 4 bytes/pixel = 64MBRefer to the Images Guide for more information and interactive examples.