Azure Maps: Use Creator to create indoor maps with custom icons

Question

Hello,

I didn't find anything about it, but i would like insert custom images in my indoor maps.

Is it possible to do?

I tried built-in icons, but i would like insert a different image, if i add images inside my DWG file upload process don't accept it.

Thanks for your attention

Have a nice day!

Gabriele

Answer 1

There is no documented method for doing this, however, since this leverages the standard layers in Azure Maps, it is possible to override the icons it uses using one of two methods.

Method 1: override the layer styles

You can get a list of all layers in the map by using map.layers.getLayers(). You should see layers with id's related to indoors. The most notable is the labels_indoor. This is actually a layer group and contains close to 40 symbol layers. You can list the id's of all these layers with map.layers.getLayerById('labels_indoor').layers.forEach(l => { console.log(l.id) }). From here you can look at the id's of the layers and override the one's you want. You would then have to modify the styles using MapLibre style methods since the indoor module doesn't use the wrapped Azure Maps layer alternatives: https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#symbol. Here is an example that changes the icon of conference rooms.

   //Wait for the indoor maps functionality to be loaded to the map (this will add the layers).  
   map.events.add('indoorready', indoorManager, (e) => {  
     
   	//Add custom icons to the map sprite.  
   	map.imageSprite.add('myConferenceRoomIcon', 'pathToImage/myRoom.png').then(x => {  
     
   		//Loop through the indoor map label layers.   
   		map.layers.getLayerById('labels_indoor').layers.forEach(l => {   
     
   			//Find the layer we want.  
   			if(l.id === 'microsoft.maps.indoor.labels_indoor.indoor_unit_conference_label') {  
     
   				//Override the style of the layer using MapLibre methods.  
   				  
   				//Change icon image.  
   				map.map.setLayoutProperty(l.id, 'icon-image', 'myConferenceRoomIcon');  
   				  
   				//Change text color.   
   				map.map.setPaintProperty(l.id, 'text-color', 'red');  
   			}  
   		});  
   	});  
   });  

Method 2: override the icons in the maps image sprite

To do this you would need to figure out the ids of the images used by the creator platform, then load a new image using the same icon name. This should override the image that's used in the map. However, this will simply replace the icon and if it is a different size, or if you want it anchored differently, this method wouldn't help.

Important: Since none of the above is documented and you would be accessing undocumented style layers, it is possible these approaches would break in the future if the indoor maps styles of functionality changes. I believe the Azure Maps team is looking to support custom styling in the future, so when that becomes available, you would want to switch to what ever that new recommended approach is.

Answer 2

Hello,

Azure Maps supports creating indoor maps.

I checked the samples overview and found this indoor maps demo (full source code example found here).

There comes a full tutorial with that. Additionally, check out the Indoor maps module tutoral.