Step 7 — 3D buildings & trees

"use client";

import { useState } from "react";
import { UbHubMap } from "@ubhub/maps/react";

export function CityMap() {
  const [showBuildings, setShowBuildings] = useState(true);
  const [showTrees, setShowTrees] = useState(true);

  return (
    <UbHubMap
      style={{ height: 600 }}
      buildings="detailed"           // none | flat (default) | extruded | detailed | 3d
      trees="extruded"               // none (default) | points | extruded | 3d
      pitch={55}                     // 0 keeps the map flat
      buildingStyle={{ color: "#1d4ed8", heightScale: 1.5 }}
      treeStyle={{ color: "#22c55e" }}
      showBuildings={showBuildings}  // toggles live, no new map load
      showTrees={showTrees}
    />
  );
}

npm install @deck.gl/core @deck.gl/layers @deck.gl/geo-layers @deck.gl/mesh-layers @deck.gl/mapbox \
  @loaders.gl/core @loaders.gl/3d-tiles @loaders.gl/gltf @loaders.gl/draco @loaders.gl/mvt

import { UbHubMap } from "@ubhub/maps/react";
import { ubhub3d } from "@ubhub/maps/3d";

<UbHubMap
  style={{ height: 600 }}
  buildings="3d"
  trees="3d"
  scene3d={ubhub3d}   // the detailed meshes and tree models
  pitch={55}
  initialZoom={16}
/>;