azure maps outlining a polygon extrusion or adding a line extrusion layer to highlight the outline of shapes

Question

azure maps outlining a polygon extrusion or adding a line extrusion layer to highlight the outline of shapes

90 Views Asked by Erik Bussing At 04 April 2025 at 06:02

I am currently trying to create a mapping tool for a building in azure maps, to give some 3d styling to it I want to add a polygon extrusion layer and increase the height of the polygons based on which floor you're looking at. However this makes it harder to see the outline of the different rooms. I would like to have something like a "line extrusion layer" or an option to highlight the the edges op the extrude polygon, even being able to remove the top of the extrusion would be welcome. Do you guys have any ideas how I could accomplish this? Is it possible to put a line layer on top of the extrusions? instead of on the map itself?

I have spent a lot of time looking into different options, but haven't found anything close to what i'm looking for. I simply want to have a black line running along the edge of my extrusions

Original Q&A

There are 1 best solutions below

**rbrundritt** · Answer 1

Unfortunately, there isn't a line extrusion layer. There is however a couple of ways to improve your scenario.

Option 1: Polygon extrusion per floor

Use the base and height properties of the polygon extrusion layer to create slices of each floor. This should create a seam/line between each floor, and will also allow you to use events to select and highlight individual floors. To accomplish this you can either create a polygon for each floor and assign them a base/height based on the floor number, or you could create a layer for each floor and reuse the same polygon in the data source. Using the layer method would be more scalable as your app would be working with a lot less data. If your floor heights are constant, things can be a bit easier. If we assume you have a value that indicates the number of floors a building has, you can then use a filter on each layer to determine if a floor should be created for that polygon. This may look something like this:

Below is some sample source code. You can also try this live here: https://rbrundritt.azurewebsites.net/Demos/AzureMaps/BuildingFloors/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
    <link href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" rel="stylesheet" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>

    <script>
        var map, datasource;

        //The colors to use for each floor.
        var colorScale = {
            1: '#09e076',
            2: '#0bbf67',
            3: '#f7e305',
            4: '#f7c707',
            5: '#f78205',
            6: '#f75e05',
            7: '#f72505'
        };

        //The height of a single floor in meters.
        var floorHeight = 4; 

        function GetMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                center: [-122.134183, 47.643853],
                zoom: 14,
                maxPitch: 85,
                style: 'satellite',

                //Pitch the map so that the extrusion of the polygons is visible.
                pitch: 45,

                view: 'Auto',

                //Add authentication details for connecting to Azure Maps.
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '[YOUR_AZURE_MAPS_KEY]'
                }
            });

            //Create a legend.
            createLegend();

            //Wait until the map resources are ready.
            map.events.add('ready', function () {
                //Create a data source to add your data to.
                datasource = new atlas.source.DataSource();
                map.sources.add(datasource);

                //Load a dataset of polygons that have metadata we can style against.
                datasource.importDataFromUrl('MSFT_Campus_Buildings.geojson');                

                //Create a polygon extrusion layer per floor.
                for(var i = 1; i <= 7; i++) {
                    map.layers.add(new atlas.layer.PolygonExtrusionLayer(datasource, null, {
                        base: floorHeight * (i - 1),
                        height: floorHeight * i,
                        fillColor: colorScale[i],
                        filter: ['>=', ['get', 'floors'], i]
                    }), 'labels');                
                }
            });
        }

        function createLegend() {
            var html = [];

            Object.keys(colorScale).forEach(function (key) {
                html.push('<i style="background:', colorScale[key], '"></i> ', key, '<br/>');
            });

            document.getElementById('legend').innerHTML += html.join('');
        }
    </script>
    <style>
        html, body, #myMap {
            margin: 0;
            padding:0;
            height: 100%;
            width:100%;
        }

        #myMap {
            background: linear-gradient(to bottom, #1e528e 0%,#728a7c 15%,#e9ce5d 100%); /** Give the sky/background some color for when the maps is pitched a lot **/
        }

        #legend {
            position: absolute;
            top: 1px;
            left: 5px;
            font-family: Arial;
            font-size: 12px;
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 5px;
            padding: 5px;
            line-height: 20px;
        }

            #legend i {
                width: 18px;
                height: 18px;
                float: left;
                margin-right: 8px;
                opacity: 0.7;
            }
    </style>
</head>
<body onload="GetMap()">
    <div id="myMap"></div>

    <div id="legend">Floor<br /></div>
</body>
</html>

I tried setting the color of all floors to the same color and the seams were not very visible. If you want all floors to be the same color, you could add a thin layer between each floor that has a separate color like this:

Here is a modified version of the code above that does this. You can also try it live here: https://rbrundritt.azurewebsites.net/Demos/AzureMaps/BuildingFloors/FloorSeperator.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
    <link href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" rel="stylesheet" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>

    <script>
        var map, datasource;

        //The height of a single floor in meters.
        var floorHeight = 3.9;
        var floorSeperatorHeight = 0.1;

        function GetMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                center: [-122.134183, 47.643853],
                zoom: 14,
                maxPitch: 85,
                style: 'satellite',

                //Pitch the map so that the extrusion of the polygons is visible.
                pitch: 45,

                view: 'Auto',

                //Add authentication details for connecting to Azure Maps.
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '[YOUR_AZURE_MAPS_KEY]'
                }
            });

            //Wait until the map resources are ready.
            map.events.add('ready', function () {
                //Create a data source to add your data to.
                datasource = new atlas.source.DataSource();
                map.sources.add(datasource);

                //Load a dataset of polygons that have metadata we can style against.
                datasource.importDataFromUrl('MSFT_Campus_Buildings.geojson');

                //Create a polygon extrusion layer per floor. And a thin layer above the top floor to act as a seperator.
                var floorBase = 0;

                for (var i = 1; i <= 7; i++) {
                    floorBase = (floorHeight + floorSeperatorHeight) * (i - 1);

                    map.layers.add(new atlas.layer.PolygonExtrusionLayer(datasource, null, {
                        base: floorBase,
                        height: floorBase + floorHeight,
                        filter: ['>=', ['get', 'floors'], i]
                    }), 'labels');

                    //Add a layer to render a thin line seperator between each floor. Can skip the top floor by making filter ">" rather than ">="
                    map.layers.add(new atlas.layer.PolygonExtrusionLayer(datasource, null, {
                        base: floorBase + floorHeight,
                        height: floorBase + floorHeight + floorSeperatorHeight,
                        fillColor: 'black',
                        filter: ['>', ['get', 'floors'], i]
                    }), 'labels');
                }
            });
        }
    </script>
    <style>
        html, body, #myMap {
            margin: 0;
            padding:0;
            height: 100%;
            width:100%;
        }

        #myMap {
            background: linear-gradient(to bottom, #1e528e 0%,#728a7c 15%,#e9ce5d 100%); /** Give the sky/background some color for when the maps is pitched a lot **/
        }
    </style>
</head>
<body onload="GetMap()">
    <div id="myMap"></div>
</body>
</html>

Option 2: Integrate Deck.gl

Deck.gl is another WebGL rendering layer that does support rendering polygon extrusions and lines as shown here: https://deck.gl/examples/geojson-layer-polygons. Deck.gl can be used with Azure Maps via the WebGlLayer as shown in this sample: https://samples.azuremaps.com/?search=deck&sample=deck-gl-custom-webgl-layer This will give you the lines you are looking for but would introduce a lot of new things outside of the Azure Maps API which would make it harder to keep things consistent. For example, events are handled differently, so you would potentially have two different types of events being used with your map which may make it harder for someone to maintain in the future. I also having a feeling this method would be a lot more complicated to achieve.

azure maps outlining a polygon extrusion or adding a line extrusion layer to highlight the outline of shapes

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in C#

Related Questions in HTML

Related Questions in AZURE-MAPS

Trending Questions

Popular # Hahtags

Popular Questions