Skip to content

3D Buildings

Customize the existing building-3d layer with height-based coloring using setPaintProperty.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script src="https://cdn.smartmaps.cloud/packages/smartmaps/smartmaps-gl/v2/umd/smartmaps-gl.min.js"></script>
        <style>
            body { margin: 0; padding: 0; }
            html, body, #map { height: 100%; }
        </style>
    </head>
    <body>
        <div id="map"></div>
        <script>
            const map = new smartmapsgl.Map({
                apiKey: "[INSERT API-KEY]",
                container: "map",
                center: [9.1829, 48.7758],
                zoom: 16,
                pitch: 55,
                bearing: -20,
                style: smartmapsgl.MapStyle.LIGHT
            });

            map.on("load", () => {
                // The style already includes a "building-3d" layer.
                // Customize its paint properties to add height-based coloring.
                map.setPaintProperty("building-3d", "fill-extrusion-color", [
                    "interpolate", ["linear"], ["get", "render_height"],
                    0, "#d4e6f1",
                    30, "#5dade2",
                    60, "#2e86c1",
                    100, "#1b4f72"
                ]);
                map.setPaintProperty("building-3d", "fill-extrusion-opacity", 0.85);
            });
        </script>
    </body>
</html>