mapbox / mapbox-gl-js

Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL
https://docs.mapbox.com/mapbox-gl-js/
Other
11.22k stars 2.23k forks source link

image-icon setting a nested property #7689

Closed eduboxgithub closed 5 years ago

eduboxgithub commented 5 years ago

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 commented 5 years ago

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

See the example here: https://github.com/mapbox/mapbox-gl-js/issues/2434#issuecomment-368641275