BadgeRenderer

The BadgeRenderer class is used and exposed by the Web SDK. Internally, it is used to visualize live data updates for different locations. Based on the type of live data updates we receive for a location, the badge may look different. The following example showcases the style of badge temperature updates.

Customize the BadgeRenderer

Since the BadgeRenderer is a public class, you have the option to customize and make use of it in your own application. (class definition)

Following the next example will allow you to update a location's icon with a custom badge.

  1. Create a new instance of our BadgeRenderer class providing a config optionally including the following properties:

NameTypeDescriptionDefault Value

backgroundColor

string

The background color of the badge.

#1E2025

fontFamily

string

The font family is used for the text inside the badge.

'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"

fontSize

string

The font size used for the text inside the badge.

14px

fontWeight

string

The font-weight used for the text inside the badge.

bold

position

string

The position of the badge in relation to the icon. Options are: top_left, top_right, bottom_right, bottom_left. Please note that other badges may overlap. E.g. the highlight badge is on the top left corner of the icon.

bottom_left

size

object

The size of the badge. { width: number, height: number }

null

strokeColor

string

The color of the outline of the badge.

null

strokeWidth

string

The width of the outline of the badge.

0

text

string

The text inside the badge.

null

textColor

string

The color of the text inside the badge.

#FCFCFC

const badgeRenderer = new mapsindoors.BadgeRenderer({
  backgroundColor: '#FF69B4',
  fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
  fontSize: '15px',
  fontWeight: 'bold',
  position: 'bottom_right',
  size: { width: 50, height: 50 },
  strokeColor: '#0078FE',
  strokeWidth: 2,
  text: 'Default Badge Text',
  textColor: '#FFFFFF'
});

  1. Get the location's icon as an Image instance. You can use the MapsIndoors instance for this.

const mapsIndoorsInstance = new mapsindoors.MapsIndoors({ ... });
const statefulDisplayRule = mapsIndoorsInstance.getStatefulDisplayRule([LOCATION_ID], true);
const icon = await statefulDisplayRule.getIcon();

  1. Invoke the overlay method on the badgeRenderer object. The overlay method takes 2 parameters.

    • image - the image you want to modify. Please make sure that it is an instance of Image and not just a simple string URL.

    • custom settings - This parameter offers the flexibility to override and tailor the badge configuration according to your specific requirements, thereby allowing customization beyond the default settings established during the instantiation of a new instance of the BadgeRenderer. You have the option to customize any of the properties described above for the BadgeRenderer class.

const newIcon = await badgeRenderer.overlay(
    icon, 
    {
        text: 'New Badge Text',
        textColor: '#000000'
    }
);

  1. Set the a new Display Rule for your location.

const newDisplayRule = { icon: newIcon };
mi.setDisplayRule([LOCATION_ID], newDisplayRule);

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MapsIndoors</title>
  <script src="https://app.mapsindoors.com/mapsindoors/js/sdk/4.33.0/mapsindoors-4.33.0.js.gz?apikey=YOUR_MAPSINDOORS_API_KEY"></script>
  <script src='https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.js'></script>
  <link href='https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css' rel='stylesheet' />
</head>

<body>
  <div id="map" style="width: 600px; height: 600px;"></div>
  
  <script>
    const mapViewInstance = new mapsindoors.mapView.MapboxView({
        accessToken: YOUR_ACCESS_TOKEN,
        element: document.getElementById('map'),
        center: { lat: 38.8974905, lng: -77.0362723 }, // The White House
        zoom: 17,
        maxZoom: 22
    });
    
    const mapsIndoorsInstance = new mapsindoors.MapsIndoors({
        mapView: mapViewInstance
    });
    
    const badgeRenderer = new mapsindoors.BadgeRenderer({
        backgroundColor: '#FF69B4',
        fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
        fontSize: '15px',
        fontWeight: 'bold',
        position: 'bottom_right',
        size: { width: 50, height: 50 },
        strokeColor: '#0078FE',
        strokeWidth: 2,
        text: 'Default Badge Text',
        textColor: '#FFFFFF'
    });
    
    mapsIndoorsInstance.on('click', async function (location) {
        const statefulDisplayRule = mapsIndoorsInstance.getStatefulDisplayRule(location, true);
        const icon = await statefulDisplayRule.getIcon();

        const newIcon = await badgeRenderer.overlay(
            icon,
            {
                text: 'New Badge Text',
                textColor: '#000000'
            }
        );

        const displayRuleOverrides = {
            icon: newIcon,
            iconSize: { width: 150, height: 150 }
        };
        
        mapsIndoorsInstance.setDisplayRule(location.id, displayRuleOverrides);
    });
  </script>
</body>
</html>

Last updated