Azure Indoor Map: How to increase the text size of unit properties name in Azure Indoor Maps?

Question

Hi All,

I want to check if there is a way by which we can change the font size of unit properties in Azure Indoor Maps. By default the unit label text is very small & it is very difficult to view. Please let me know your inputs.

Also, I have noticed that unit label will be visible based on a particular Zoom level. Is this can be increased so that on lower zoom level also the unit label will be visible.

Thanks
Koushal

Answer 1

Custom styling of the indoor maps has not yet been exposed publicly (I believe there are plans to support this in the future). However, it is possible to access the intneral capabilities of the map and override these styles. Here is an example of how to achieve this.

   //The id's of all unit label layers in the indoor maps module.   
   var unitLabelLayers = [  
   	'microsoft.maps.indoor.labels_indoor.indoor_global_unit_label',  
   	'microsoft.maps.indoor.labels_indoor.indoor_unit_lobby_label',  
   	'microsoft.maps.indoor.labels_indoor.indoor_unit_game_label',  
   	'microsoft.maps.indoor.labels_indoor.indoor_unit_kitchen_label',  
   	'microsoft.maps.indoor.labels_indoor.indoor_unit_lounge_label',  
   	'microsoft.maps.indoor.labels_indoor.indoor_unit_restroom_label',  
   	'microsoft.maps.indoor.labels_indoor.indoor_unit_conference_label',  
   	'microsoft.maps.indoor.labels_indoor.indoor_unit_office_label',  
   	'microsoft.maps.indoor.labels_indoor.indoor_unit_atrium_label',  
   	'microsoft.maps.indoor.labels_indoor.indoor_unit_circulation_label',  
   	'microsoft.maps.indoor.labels_indoor.indoor_unit_classroom_label',  
   	'microsoft.maps.indoor.labels_indoor.indoor_unit_closet_label',  
   	'microsoft.maps.indoor.labels_indoor.indoor_unit_dataCenter_label',  
   	'microsoft.maps.indoor.labels_indoor.indoor_unit_demo_label',  
   	'microsoft.maps.indoor.labels_indoor.indoor_unit_documents_label',  
   	'microsoft.maps.indoor.labels_indoor.indoor_unit_focus_label',  
   	'microsoft.maps.indoor.labels_indoor.indoor_unit_foyer_label',  
   	'microsoft.maps.indoor.labels_indoor.indoor_unit_utility_label',  
   	'microsoft.maps.indoor.labels_indoor.indoor_unit_retail_label',  
   	'microsoft.maps.indoor.labels_indoor.indoor_unit_vending_label',  
   	'microsoft.maps.indoor.labels_indoor.indoor_unit_newMother_label',  
   	'microsoft.maps.indoor.labels_indoor.indoor_unit_multiPurpose_label',  
   	'microsoft.maps.indoor.labels_indoor.indoor_unit_makerSpace_label',  
   	'microsoft.maps.indoor.labels_indoor.indoor_unit_locker_label',  
   	'microsoft.maps.indoor.labels_indoor.indoor_unit_loading_label',  
   	'microsoft.maps.indoor.labels_indoor.indoor_unit_library_label',  
   	'microsoft.maps.indoor.labels_indoor.indoor_unit_lab_label',  
   	'microsoft.maps.indoor.labels_indoor.indoor_unit_interview_label',  
   	'microsoft.maps.indoor.labels_indoor.indoor_unit_gym_label'  
   ];  
     
   //A font' size using a data driven expression that changes the font size based on the zoom level.   
   var fontSize = [  
       'step',  
   	['zoom'],  
   	0,  //Zoom < 18, font size = 0  
   	18, 5, //Zoom 18 -> 19, font size = 5  
   	19, 8,  //Zoom 19 -> 20, font size = 8  
   	20, 11 //Zoom 20+, font size = 11  
   ];  
     
   //Alternatively, use a number to set a static font size.  
   //var fontSize = 12;  
     
   function setUnitFontSize(map, fontSize) {  
   	//Loop through the unit label layer id's.   
   	unitLabelLayers.forEach(id => {  
   		//Accessing internal function to set the style of a non-public layer.   
   		map.map.setLayoutProperty(id, 'text-size', fontSize);  
   	});  
   }  

Using the above, simple pass in your Azure Maps map object and the font size setting you want into the setUnitFontSize function after the map has triggered the ready event.

   map = new atlas.Map('myMap', ...);  
     
   map.events.add('ready', function () {  
     
   	//Create an indoor maps manager.  
   	indoorManager = new atlas.indoor.IndoorManager(map, {  
   		tilesetId: tilesetId,  
   		statesetId: statesetId  
   	});  
     
   	//Delay changing the style as the initial styles are loading.  
   	setTimeout(() => {  
   		//Change the font size of unit labels.  
   		setUnitFontSize(map, 12);  
   	}, 1000);  
   });