Mappedin JS - v6.14.0
    Preparing search index...

    Interface Image3D

    Images can enhance indoor maps by adding custom branding, highlighting important features, or providing additional visual information. They can be placed on any Door, Space, or Coordinate and support various positioning and styling options.

    • Support for JPEG and PNG formats
    • Automatic caching and reuse of identical URLs
    • Customizable size, rotation, and vertical offset
    • Option to face the camera automatically
    • Memory-efficient rendering

    Best Practice: Consider image memory usage carefully. The SDK caches images with the same URL, so reuse images when possible. Large images can impact performance on mobile devices.

    Formula: width * height * 4 bytes/pixel = memory used

    • 512 x 512 Pixel Image: 512px * 512px * 4 bytes/pixel = 1MB
    • 4096 x 4096 Pixel Image: 4096px * 4096px * 4 bytes/pixel = 64MB
    // Add a simple image
    mapView.Image3D.add(coordinate, 'https://example.com/logo.png', { width: 2, height: 1 });

    // Add an image with custom positioning
    mapView.Image3D.add(space, 'https://example.com/banner.jpg', {
      width: 3,
      height: 1.5,
      rotation: 45,
      verticalOffset: 2
    });

    // Add an image that faces the camera
    mapView.Image3D.add(coordinate, 'https://example.com/icon.png', {
      width: 1,
      height: 1,
      flipImageToFaceCamera: true
    });

    // Remove an image
    mapView.Image3D.remove(image);

    // Remove all images
    mapView.Image3D.removeAll();
    • Use flipImageToFaceCamera: true for billboard-style images that always face the user.
    • Use verticalOffset to position images above or below the anchor point.
    • Use rotation to orient images in specific directions.
    • Reuse image URLs to take advantage of caching.
    • Use appropriately sized images for your use case.
    • Consider using smaller images on mobile devices.

    This class is accessed using MapView.Image3D.

    interface Image3D {
        add(
            target: IAnchorable,
            url: string,
            options: TAddImageOptions,
        ): Image3DView;
        remove(image: Image3DView): void;
        removeAll(): Image3DView[];
    }
    Index

    Methods

    add remove removeAll

    Methods

    • Adds an image to the map.

      Parameters

      Returns Image3DView

      The created Image3DView instance.

      mapView.Image3D.add(coordinate, 'https://example.com/logo.png', { width: 2, height: 1 });

      mapView.Image3D.add(space, 'https://example.com/banner.jpg', {
        width: 3,
        height: 1.5,
        rotation: 45,
        verticalOffset: 2
      });

      mapView.Image3D.add(coordinate, 'https://example.com/icon.png', {
        width: 1,
        height: 1,
        flipImageToFaceCamera: true
      });

      Images Guide

    • Removes an image from the map.

      Parameters

      Returns void

      mapView.Image3D.remove(image);

    • Remove all the images from the map.

      Returns Image3DView[]

      An array of all removed Image3DView instances.

      const removedImages = mapView.Image3D.removeAll();

    Settings

    Member Visibility

    On This Page

    3D images in Mappedin JS
    Methods