CODEWITHSUNDEEP
jqueryjsonmapbox
Mohd Alam
Mohd Alam

Reputation: 21

3D building Mapbox

my question to mapbox was :-"You have a great feature with 3D buildings. Is there any way to make just the building at the selected address in 3D and everything else around it in normal 2D?"

and i got response from mapbox:-"Our building data does not have a unique feature ID so styling them based on the feature ID might style a few buildings with the same feature ID. If you have your own building data with unique IDs, this would be possible. Otherwise, you need to implement a workaround such as Using Turf to identify the features IDs of building withing the polygon of the property data, once approved, style the building using fill-extrusion styling spec to create the 3D effect for the building."

Now we are trying to implement above scenario. we are providing a building address and getting response as shown in below screen:- https://i.sstatic.net/KJKnT.png

I see in the mapbox documentation there is a way to create a 3D building but my question is how can we utilize our response to create a 3D building and what will be the building id in above response. as we can see in below screen shot there is a geojson data. how can we get this geojson data which have polygon type and geometric. https://i.sstatic.net/rwxEr.png

Upvotes: 0

Views: 511

Answers (1)

Mapbox Developer Support
Mapbox Developer Support

Reputation: 636

To do something like this, you could try out the following steps:

  1. Pass the center coordinates of the geocoder response as a variable at runtime (please note that if you want to further store this in a database, then you would need to have access to the mapbox.places-permanent endpoint).
  2. Compare those coordinates with the polygon data in your custom building layer. You can do this comparison using Turf. Alternatively, you could use the Mapbox Tilequery API to query your custom building layer at that coordinate to retrieve your building's custom ID.
  3. You can use Map#setPaintProperty to set the fill-extrusion-height for that specific id.

For your individual questions highlighted in your screenshots:

  1. "floorplan" is the name of the source that you will specify yourself, and will reference below in Map#addLayer.
  2. You would not be able to generate a GeoJSON data from the geocoder -- instead, this data that will be added at runtime would be your custom building data that contains a custom ID for each building.
  3. "room-extrusion" is the name of the layer that will also specify yourself. It is this layer ID that you can refer to within Map#setPaintProperty.

Upvotes: 1

Related Questions