How to display shapes on top of Mapbox standard 3D style

[alamenai]

Hi everyone,

Today, I faced a challenge where I want to display a roofs and panels on top of the building of standard map 3d ( Mapbox ). On 2D satellite the shapes appeared but when I switched to 3D , they appeared in the bottom of the base layer.

3D

  mapRef.current = new mapboxGL.Map({
      accessToken: token,
      style: "mapbox://styles/mapbox/standard", // 3D
      container: "map-container",
      zoom: 10,
      center: [13.405, 52.52],
      antialias: true,
      pitch: 40,
      pitchWithRotate: true,
      bearing,
    })

2D

  mapRef.current = new mapboxGL.Map({
      accessToken: token,
      style: "mapbox://styles/mapbox/satellite-v9", // 2D
      container: "map-container",
      zoom: 10,
      center: [13.405, 52.52],
      antialias: true,
      pitch: 40,
      pitchWithRotate: true,
      bearing,
    })

Drawing shapes code :

  const addRoof = (roof: Roof) => {
    if (!mapRef.current) return

    const roofPolygonData = createRoofPolygonFeature(roof)
    // const roofSourceId = `roof-${address}-${roof.id}`

    // addRoofSource(roofSourceId, roofPolygonData)
    // addRoofLayers(roofSourceId, roof)
    //addRoofEventHandlers(roof)

    // Calculate the bounding box of the polygon
    const center = turf.center(roofPolygonData)

    addPanelLayers(roof)

    addCenterSourceAndLayer(roof, center)
  }

  const createRoofPolygonFeature = (roof: Roof): Feature => {
    const polygon = turf.polygon([roof.coords])
    const roofCoordinates = polygon.geometry.coordinates

    if (roof.holes) {
      roof.holes.forEach((hole: Position[]) => {
        roofCoordinates.push(hole)
      })
    }

    const feature = {
      type: "Feature",
      properties: {},
      geometry: {
        type: "Polygon",
        coordinates: roofCoordinates,
      },
    }

    // Store the draw instance in the mapRef
    if (mapRef.current) {
      const current = mapRef.current as MapWithDraw
      current.draw.add(feature as Feature)
    }

    return feature as Feature
  }