image-icon setting a nested property

[eduboxgithub]

mapbox-gl-js version: 0.51

Question

I'm using the cluster feature documented here (https://www.mapbox.com/mapbox-gl-js/example/cluster/).

I made I few changes. Instead of circle in the "unclustered-point" and using a symbol with an icon-image. To correctly bind and use symbol with icon-image I had to create my custom sprite with about 600 icons (made it with spritezero-cli). The sprite is correctly loaded and all seems to work.

this.Map.addLayer(
{
	id: "unclustered-point",
	type: "symbol",
	source: "roadsigns",
	filter: ["!", ["has", "point_count"]],
	layout: 
	{
		"icon-image": "{Sign.Code}",
	}
});

The problem is the binding "icon-image": "{Sign.Code}".
I receive the data from a server request and parse it to GeoJSON with features.
In the properties prop of the GeoJSON a set the object received from the server:

RoadSign =
{
      Id: 1,
      Date: "24-12-2018",
      Location: { lng:0, lat:0 }
      Sign: { Name: "STOP", Id:1, Code:"A21" }
}

I tested to edit the object received from the server adding a SignCode prop on the root object.
If I do it the image is correctly assigned from the sprite, but some extra iterations needs to be done.

RoadSign =
{
      Id: 1,
      Date: "24-12-2018",
      Location: { lng:0, lat:0 }
      Sign: { Name: "STOP", Id:1, Code:"A21" }
      SignCode: "A21" 
}

this.Map.addLayer(
{
	id: "unclustered-point",
	type: "symbol",
	source: "roadsigns",
	filter: ["!", ["has", "point_count"]],
	layout: 
	{
		"icon-image": "{SignCode}",
	}
});

Is it not possible to bind to a nested prop from the properties object of the GeoJSON?

Links to related documentation

Cluster Example: https://www.mapbox.com/mapbox-gl-js/example/cluster/
Icon-Image value and bind: https://www.mapbox.com/mapbox-gl-js/style-spec

[asheemmamoowala]

The icon-image property needs to use a get expression with an object type assertion for Sign.

See the example here: #2434 (comment)