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.

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

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'
});

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();

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'
    }
);

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 6 months ago

Name

Type

Description

Default Value

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' });

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

<!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>