Search code examples
javascriptazure-maps

how can i force a rerender of the map in azuremaps?


I'm trying to make a search function for my indoor azuremaps project, I can search throught the loaded geojson shapes based on name. Now when I highlight, or click on a search result I want it to show the corresponding room in a different color, to do this I made a switch case statement in the data driven styling of the layer, but when I change the corresponding property nothing happens. I assume I have to rerender the map.

//Add a layer for rendering the outline of polygons.
        var polygonExtrusionLayer = new atlas.layer.PolygonExtrusionLayer(datasource, null, {
            height: ['*', ['+', 1, ['to-number', ['get', 'Bouwlaag']]], floorheight],
            base: ['*', ['to-number', ['get', 'Bouwlaag']], floorheight],
            fillOpacity: 0.8,
            fillColor: ['case',
                ['<', ['to-number', ['get', 'Bouwlaag']], currentFloor],
                'lightblue',
                ['case',
                    ['==', ['get', 'resultId'], resultId],
                    'red',
                    'blue'
                ]
            ],
            filter:
                ['all',
                    ['any',
                        ['==', ['geometry-type'], 'Polygon'],       //Only render Polygon or MultiPolygon in this layer.
                        ['==', ['geometry-type'], 'MultiPolygon']
                    ],
                    ['<=', ['to-number', ['get', 'Bouwlaag']], currentFloor]
                ]
        });
function featureClicked(id) {
    var shape = datasource.getShapeById(id);
    console.log(id)
    resultId = id;
    currentFloor = Number(shape.getProperties().Bouwlaag);
    shape.addProperty('resultId', id);
}

I searched online and in this article(text it says that the map canvas is refreshed when I call the addProperty feature of a shape, but when I do so nothing happens. I have a similar question when updating the floor I'm looking at, nothing changes, do I have to keep creating and removing layers, or am I missing something that will allow me to for a refresh/rerender of the map?


Solution

  • If you are using the Azure Maps Creator Indoor maps platform, the data source is in vector tile form and can't be edited in the client, thus shape.addProperty won't do anything.

    Looking at your code, you could use the shapes ID instead of a resultId in your layer, then update the layer settings using layer.setOptions. For example:

    function featureClicked(id) {
        polygonExtrusionLayer .setOptions({
         fillColor: ['case',
                    ['<', ['to-number', ['get', 'Bouwlaag']], currentFloor],
                    'lightblue',
                    ['case',
                        ['==', ['ID'], id],
                        'red',
                        'blue'
                    ]
                ]
        });
    }
    

    Note that you will need to make sure that the layer and the currentFloor value is available in that function.