import { MapView, Models, ModelLayer, ShapeSource } from '@rnmapbox/maps';

function MultipleModels() {
  const modelData = {
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        geometry: { type: 'Point', coordinates: [-122.4194, 37.7749] },
        properties: { type: 'car' },
      },
      {
        type: 'Feature',
        geometry: { type: 'Point', coordinates: [-122.4184, 37.7739] },
        properties: { type: 'tree' },
      },
      {
        type: 'Feature',
        geometry: { type: 'Point', coordinates: [-122.4204, 37.7759] },
        properties: { type: 'building' },
      },
    ],
  };

  return (
    <MapView style={{ flex: 1 }}>
      <Models
        models={{
          car: require('./assets/models/car.glb'),
          tree: require('./assets/models/tree.glb'),
          building: 'https://example.com/models/building.glb',
        }}
      />
      
      <ShapeSource id="models" shape={modelData}>
        <ModelLayer
          id="3d-objects"
          style={{
            modelId: ['get', 'type'],
            modelScale: [1, 1, 1],
          }}
        />
      </ShapeSource>
    </MapView>
  );
}

import { useState } from 'react';
import { MapView, Models, ModelLayer, ShapeSource } from '@rnmapbox/maps';
import { Button } from 'react-native';

function DynamicModels() {
  const [models, setModels] = useState({
    default: require('./assets/models/default.glb'),
  });

  const addModel = (name: string, url: string) => {
    setModels((prev) => ({
      ...prev,
      [name]: url,
    }));
  };

  return (
    <>
      <MapView style={{ flex: 1 }}>
        <Models models={models} />
        
        <ShapeSource id="modelPoints" shape={pointsGeoJSON}>
          <ModelLayer
            id="3d-models"
            style={{
              modelId: ['get', 'modelName'],
              modelScale: [1, 1, 1],
            }}
          />
        </ShapeSource>
      </MapView>
      
      <Button
        title="Add Car Model"
        onPress={() => addModel('car', 'https://example.com/car.glb')}
      />
    </>
  );
}

import { MapView, Models, ModelLayer, ShapeSource } from '@rnmapbox/maps';

function AnimatedModels() {
  const vehicleLocation = {
    type: 'Feature',
    geometry: {
      type: 'Point',
      coordinates: [-122.4194, 37.7749],
    },
    properties: {
      bearing: 90,
    },
  };

  return (
    <MapView style={{ flex: 1 }}>
      <Models
        models={{
          car: require('./assets/models/car-animated.glb'),
        }}
      />
      
      <ShapeSource id="vehicle" shape={vehicleLocation}>
        <ModelLayer
          id="animated-car"
          style={{
            modelId: 'car',
            modelScale: [1, 1, 1],
            modelRotation: [0, 0, ['get', 'bearing']],
            modelOpacity: 1,
          }}
        />
      </ShapeSource>
    </MapView>
  );
}