Mapbox 3D building mapping dynamically

Question

I am trying to achieve dynamic 3D model of a building which i choose during search criteria, so far the code i have done is below.

 map.on('load', function () {
        // Listen for the `geocoder.input` event that is triggered when a user
        // makes a selection
        geocoder.on('result', function (ev) {
            debugger;
            var layers = map.getStyle().layers;
            var styleSpec = ev.result;
            var styleSpecBox = document.getElementById('json-response');
            var styleSpecText = JSON.stringify(styleSpec, null, 2);
            var syntaxStyleSpecText = syntaxHighlight(styleSpecText);
            styleSpecBox.innerHTML = syntaxStyleSpecText;

            map.addSource('floorplan', {
                // GeoJSON Data source used in vector tiles, documented at
                // https://gist.github.com/ryanbaumann/a7d970386ce59d11c16278b90dde094d
                'type': 'geojson',
                'data': 'https://docs.mapbox.com/mapbox-gl-js/assets/indoor-3d-map.geojson'
            });


            map.addLayer({
                'id': 'room-extrusion',
                'type': 'fill-extrusion',
                'source': 'floorplan',
                'paint': {
                    // See the Mapbox Style Specification for details on data expressions.
                    // https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions

                    // Get the fill-extrusion-color from the source 'color' property.
                    'fill-extrusion-color': ['get', 'color'],

                    // Get fill-extrusion-height from the source 'height' property.
                    'fill-extrusion-height': ['get', 'height'],

                    // Get fill-extrusion-base from the source 'base_height' property.
                    'fill-extrusion-base': ['get', 'base_height'],

                    // Make extrusions slightly opaque for see through indoor walls.
                    'fill-extrusion-opacity': 0.5
                }
            });
        });





    });

As i have tried to add this json URL (https://docs.mapbox.com/mapbox-gl-js/assets/indoor-3d-map.geojson) which i have found on this link: https://docs.mapbox.com/mapbox-gl-js/example/3d-extrusion-floorplan/ It only shows a fixed location in 3D of a building which is given on the second URL.

Now actually I want to achieve a specific 3D building on the map as only dynamic when i use search criteria.

Mapbox Developer Support Mapbox Developer Support · Accepted Answer · 2020-05-08T19:29:13

The GeoJSON data at this file which you are using contains polygon features along with coordinates representing where in the geographic space these polygons are located. The extrude polygons for 3D indoor mapping example which you are referencing creates the "3D model" being display by taking the two-dimensional geometries specified by the polygon features in the GeoJSON used as a source, and then adding a corresponding layer which makes use of fill extrusions to visually extrude these two-dimensional polygons into three dimensions.

So, unless you change the contents of the GeoJSON file used as the source, it is expected behavior that the "3D model" of the building will continue to display at the same geographic location. If the geocoder returns the location of a particular building based on the input search criteria, you will still need to specify which GeoJSON polygons should be extruded to create the extruded model of the building. The Geocoding API response body for an address search itself likely won't be enough for this, since only a coordinate will be returned representing the location of this POI. As such, you would need to integrate some custom building data or another custom workflow to generate the polygons needed to extrude a variety of building polygon geometries.

Mapbox 3D building mapping dynamically

1 Answers