Add a 3D model to a map

Select platform: Android iOS JavaScript

You can add your own imported 3D model to a 3D map.

A map view showing a 3D model

The following code sample demonstrates how to add a 3D model and position it in 3D space using the Model struct .

Swift

 struct 
  
 SimpleModelDemo 
 : 
  
 View 
  
 { 
  
 @ 
 State 
  
 var 
  
 camera 
 : 
  
 Camera 
  
 = 
  
 . 
 init 
 ( 
 latitude 
 : 
  
 37.791376 
 , 
  
 longitude 
 : 
  
 - 
 122.397571 
 , 
  
 altitude 
 : 
  
 240 
 , 
  
 heading 
 : 
  
 288.0 
 , 
  
 tilt 
 : 
  
 88.0 
 , 
  
 roll 
 : 
  
 0.0 
 , 
  
 range 
 : 
  
 1500 
 ) 
  
 @ 
 State 
  
 var 
  
 balloonModel 
 : 
  
 Model 
  
 = 
  
 . 
 init 
 ( 
  
 position 
 : 
  
 . 
 init 
 ( 
  
 latitude 
 : 
  
 37.791376 
 , 
  
 longitude 
 : 
  
 - 
 122.397571 
 , 
  
 altitude 
 : 
  
 200.0 
 ), 
  
 url 
 : 
  
 URL 
 ( 
 string 
 : 
  
 "" 
 ) 
  
 ?? 
  
 URL 
 ( 
 fileURLWithPath 
 : 
  
 fileUrl 
 ), 
  
 altitudeMode 
 : 
  
 . 
 relativeToMesh 
 , 
  
 scale 
 : 
  
 . 
 init 
 ( 
 x 
 : 
  
 5 
 , 
  
 y 
 : 
  
 5 
 , 
  
 z 
 : 
  
 5 
 ), 
  
 orientation 
 : 
  
 . 
 init 
 ( 
 heading 
 : 
  
 0 
 , 
  
 tilt 
 : 
  
 0 
 , 
  
 roll 
 : 
  
 0 
 ) 
  
 ) 
  
 var 
  
 body 
 : 
  
 some 
  
 View 
  
 { 
  
 Map 
 ( 
 camera 
 : 
  
 $ 
 camera 
 , 
  
 mode 
 : 
  
 . 
 satellite 
 ) 
  
 { 
  
 balloonModel 
  
 } 
  
 } 
 } 
 private 
  
 let 
  
 fileUrl 
  
 = 
  
 Bundle 
 . 
 main 
 . 
 url 
 ( 
 forResource 
 : 
  
 "balloon" 
 , 
  
 withExtension 
 : 
  
 "glb" 
 ) 
 ! 
 . 
 path 
  
Design a Mobile Site
View Site in Mobile | Classic
Share by: