diff --git a/docs/data/expressions-related.json b/docs/data/expressions-related.json
index 1716955fd..7693756e8 100644
--- a/docs/data/expressions-related.json
+++ b/docs/data/expressions-related.json
@@ -1,220 +1,176 @@
 {
-  "!": [
-    {
-      "title": "Create and style clusters",
-      "href": "https://maplibre.org/maplibre-gl-js-docs/example/cluster/"
-    }
-  ],
-  "!=": [
-    {
-      "title": "Display HTML clusters with custom properties",
-      "href": "https://maplibre.org/maplibre-gl-js-docs/example/cluster-html/"
-    }
-  ],
-  "/": [
-    {
-      "title": "Visualize population density",
-      "href": "https://maplibre.org/maplibre-gl-js-docs/example/visualize-population-density/"
-    }
-  ],
-  "<": [
-    {
-      "title": "Display HTML clusters with custom properties",
-      "href": "https://maplibre.org/maplibre-gl-js-docs/example/cluster-html/"
-    }
-  ],
-  "==": [
-    {
-      "title": "Add multiple geometries from one GeoJSON source",
-      "href": "https://maplibre.org/maplibre-gl-js-docs/example/multiple-geometries/"
-    },
-    {
-      "title": "Create a time slider",
-      "href": "https://maplibre.org/maplibre-gl-js-docs/example/timeline-animation/"
-    },
-    {
-      "title": "Display buildings in 3D",
-      "href": "https://maplibre.org/maplibre-gl-js-docs/example/3d-buildings/"
-    },
-    {
-      "title": "Filter symbols by toggling a list",
-      "href": "https://maplibre.org/maplibre-gl-js-docs/example/filter-markers/"
-    }
-  ],
-  ">=": [
-    {
-      "title": "Display HTML clusters with custom properties",
-      "href": "https://maplibre.org/maplibre-gl-js-docs/example/cluster-html/"
-    }
-  ],
-  "all": [
-    {
-      "title": "Display HTML clusters with custom properties",
-      "href": "https://maplibre.org/maplibre-gl-js-docs/example/cluster-html/"
-    }
-  ],
-  "boolean": [
-    {
-      "title": "Create a hover effect",
-      "href": "https://maplibre.org/maplibre-gl-js-docs/example/hover-styles/"
-    }
-  ],
-  "case": [
-    {
-      "title": "Create a hover effect",
-      "href": "https://maplibre.org/maplibre-gl-js-docs/example/hover-styles/"
-    },
-    {
-      "title": "Display HTML clusters with custom properties",
-      "href": "https://maplibre.org/maplibre-gl-js-docs/example/cluster-html/"
-    }
-  ],
-  "coalesce": [
-    {
-      "title": "Use a fallback image",
-      "href": "https://maplibre.org/maplibre-gl-js-docs/example/fallback-image/"
-    }
-  ],
-  "concat": [
-    {
-      "title": "Add a generated icon to the map",
-      "href": "https://maplibre.org/maplibre-gl-js-docs/example/add-image-missing-generated/"
-    },
-    {
-      "title": "Create a time slider",
-      "href": "https://maplibre.org/maplibre-gl-js-docs/example/timeline-animation/"
-    },
-    {
-      "title": "Use a fallback image",
-      "href": "https://maplibre.org/maplibre-gl-js-docs/example/fallback-image/"
-    },
-    {
-      "title": "Variable label placement",
-      "href": "https://maplibre.org/maplibre-gl-js-docs/example/variable-label-placement/"
-    }
-  ],
-  "downcase": [
-    {
-      "title": "Change the case of labels",
-      "href": "https://maplibre.org/maplibre-gl-js-docs/example/change-case-of-labels/"
-    }
-  ],
-  "feature-state": [
-    {
-      "title": "Create a hover effect",
-      "href": "https://maplibre.org/maplibre-gl-js-docs/example/hover-styles/"
-    }
-  ],
-  "format": [
-    {
-      "title": "Change the case of labels",
-      "href": "https://maplibre.org/maplibre-gl-js-docs/example/change-case-of-labels/"
-    },
-    {
-      "title": "Display and style rich text labels",
-      "href": "https://maplibre.org/maplibre-gl-js-docs/example/display-and-style-rich-text-labels/"
-    },
-    {
-      "title": "Display buildings in 3D",
-      "href": "https://maplibre.org/maplibre-gl-js-docs/example/3d-buildings/"
-    }
-  ],
-  "get": [
-    {
-      "title": "Change the case of labels",
-      "href": "https://maplibre.org/maplibre-gl-js-docs/example/change-case-of-labels/"
-    },
-    {
-      "title": "Display HTML clusters with custom properties",
-      "href": "https://maplibre.org/maplibre-gl-js-docs/example/cluster-html/"
-    },
-    {
-      "title": "Extrude polygons for 3D indoor mapping",
-      "href": "https://maplibre.org/maplibre-gl-js-docs/example/3d-extrusion-floorplan/"
-    }
-  ],
-  "has": [
-    {
-      "title": "Create and style clusters",
-      "href": "https://maplibre.org/maplibre-gl-js-docs/example/cluster/"
-    }
-  ],
-  "image": [
-    {
-      "title": "Use a fallback image",
-      "href": "https://maplibre.org/maplibre-gl-js-docs/example/fallback-image/"
-    }
-  ],
-  "in": [
-    {
-      "title": "Measure distances",
-      "href": "https://maplibre.org/maplibre-gl-js-docs/example/measure/"
-    }
-  ],
-  "interpolate": [
-    {
-      "title": "Animate map camera around a point",
-      "href": "https://maplibre.org/maplibre-gl-js-docs/example/animate-camera-around-point/"
-    },
-    {
-      "title": "Change building color based on zoom level",
-      "href": "https://maplibre.org/maplibre-gl-js-docs/example/change-building-color-based-on-zoom-level/"
-    },
-    {
-      "title": "Create a heatmap layer",
-      "href": "https://maplibre.org/maplibre-gl-js-docs/example/heatmap-layer/"
-    },
-    {
-      "title": "Visualize population density",
-      "href": "https://maplibre.org/maplibre-gl-js-docs/example/visualize-population-density/"
-    }
-  ],
-  "let": [
-    {
-      "title": "Visualize population density",
-      "href": "https://maplibre.org/maplibre-gl-js-docs/example/visualize-population-density/"
-    }
-  ],
-  "literal": [
-    {
-      "title": "Display and style rich text labels",
-      "href": "https://maplibre.org/maplibre-gl-js-docs/example/display-and-style-rich-text-labels/"
-    }
-  ],
-  "number-format": [
-    {
-      "title": "Display HTML clusters with custom properties",
-      "href": "https://maplibre.org/maplibre-gl-js-docs/example/cluster-html/"
-    }
-  ],
-  "step": [
-    {
-      "title": "Create and style clusters",
-      "href": "https://maplibre.org/maplibre-gl-js-docs/example/cluster/"
-    }
-  ],
-  "to-color": [
-    {
-      "title": "Visualize population density",
-      "href": "https://maplibre.org/maplibre-gl-js-docs/example/visualize-population-density/"
-    }
-  ],
-  "to-string": [
-    {
-      "title": "Create a time slider",
-      "href": "https://maplibre.org/maplibre-gl-js-docs/example/timeline-animation/"
-    }
-  ],
-  "upcase": [
-    {
-      "title": "Change the case of labels",
-      "href": "https://maplibre.org/maplibre-gl-js-docs/example/change-case-of-labels/"
-    }
-  ],
-  "var": [
-    {
-      "title": "Visualize population density",
-      "href": "https://maplibre.org/maplibre-gl-js-docs/example/visualize-population-density/"
-    }
-  ]
+    "!": [{
+        "title": "Create and style clusters",
+        "href": "https://maplibre.org/maplibre-gl-js-docs/example/cluster/"
+    }],
+    "!=": [{
+        "title": "Display HTML clusters with custom properties",
+        "href": "https://maplibre.org/maplibre-gl-js-docs/example/cluster-html/"
+    }],
+    "/": [{
+        "title": "Visualize population density",
+        "href": "https://maplibre.org/maplibre-gl-js-docs/example/visualize-population-density/"
+    }],
+    "<": [{
+        "title": "Display HTML clusters with custom properties",
+        "href": "https://maplibre.org/maplibre-gl-js-docs/example/cluster-html/"
+    }],
+    "==": [{
+            "title": "Add multiple geometries from one GeoJSON source",
+            "href": "https://maplibre.org/maplibre-gl-js-docs/example/multiple-geometries/"
+        },
+        {
+            "title": "Create a time slider",
+            "href": "https://maplibre.org/maplibre-gl-js-docs/example/timeline-animation/"
+        },
+        {
+            "title": "Display buildings in 3D",
+            "href": "https://maplibre.org/maplibre-gl-js-docs/example/3d-buildings/"
+        },
+        {
+            "title": "Filter symbols by toggling a list",
+            "href": "https://maplibre.org/maplibre-gl-js-docs/example/filter-markers/"
+        }
+    ],
+    ">=": [{
+        "title": "Display HTML clusters with custom properties",
+        "href": "https://maplibre.org/maplibre-gl-js-docs/example/cluster-html/"
+    }],
+    "all": [{
+        "title": "Display HTML clusters with custom properties",
+        "href": "https://maplibre.org/maplibre-gl-js-docs/example/cluster-html/"
+    }],
+    "boolean": [{
+        "title": "Create a hover effect",
+        "href": "https://maplibre.org/maplibre-gl-js-docs/example/hover-styles/"
+    }],
+    "case": [{
+            "title": "Create a hover effect",
+            "href": "https://maplibre.org/maplibre-gl-js-docs/example/hover-styles/"
+        },
+        {
+            "title": "Display HTML clusters with custom properties",
+            "href": "https://maplibre.org/maplibre-gl-js-docs/example/cluster-html/"
+        }
+    ],
+    "coalesce": [{
+        "title": "Use a fallback image",
+        "href": "https://maplibre.org/maplibre-gl-js-docs/example/fallback-image/"
+    }],
+    "concat": [{
+            "title": "Add a generated icon to the map",
+            "href": "https://maplibre.org/maplibre-gl-js-docs/example/add-image-missing-generated/"
+        },
+        {
+            "title": "Create a time slider",
+            "href": "https://maplibre.org/maplibre-gl-js-docs/example/timeline-animation/"
+        },
+        {
+            "title": "Use a fallback image",
+            "href": "https://maplibre.org/maplibre-gl-js-docs/example/fallback-image/"
+        },
+        {
+            "title": "Variable label placement",
+            "href": "https://maplibre.org/maplibre-gl-js-docs/example/variable-label-placement/"
+        }
+    ],
+    "downcase": [{
+        "title": "Change the case of labels",
+        "href": "https://maplibre.org/maplibre-gl-js-docs/example/change-case-of-labels/"
+    }],
+    "feature-state": [{
+        "title": "Create a hover effect",
+        "href": "https://maplibre.org/maplibre-gl-js-docs/example/hover-styles/"
+    }],
+    "format": [{
+            "title": "Change the case of labels",
+            "href": "https://maplibre.org/maplibre-gl-js-docs/example/change-case-of-labels/"
+        },
+        {
+            "title": "Display and style rich text labels",
+            "href": "https://maplibre.org/maplibre-gl-js-docs/example/display-and-style-rich-text-labels/"
+        },
+        {
+            "title": "Display buildings in 3D",
+            "href": "https://maplibre.org/maplibre-gl-js-docs/example/3d-buildings/"
+        }
+    ],
+    "get": [{
+            "title": "Change the case of labels",
+            "href": "https://maplibre.org/maplibre-gl-js-docs/example/change-case-of-labels/"
+        },
+        {
+            "title": "Display HTML clusters with custom properties",
+            "href": "https://maplibre.org/maplibre-gl-js-docs/example/cluster-html/"
+        },
+        {
+            "title": "Extrude polygons for 3D indoor mapping",
+            "href": "https://maplibre.org/maplibre-gl-js-docs/example/3d-extrusion-floorplan/"
+        },
+        {
+            "title": "Provide immersive camera for First Person View",
+            "href": "https://maplibre.org/maplibre-gl-js-docs/example/immersive-camera/"
+        }
+    ],
+    "has": [{
+        "title": "Create and style clusters",
+        "href": "https://maplibre.org/maplibre-gl-js-docs/example/cluster/"
+    }],
+    "image": [{
+        "title": "Use a fallback image",
+        "href": "https://maplibre.org/maplibre-gl-js-docs/example/fallback-image/"
+    }],
+    "in": [{
+        "title": "Measure distances",
+        "href": "https://maplibre.org/maplibre-gl-js-docs/example/measure/"
+    }],
+    "interpolate": [{
+            "title": "Animate map camera around a point",
+            "href": "https://maplibre.org/maplibre-gl-js-docs/example/animate-camera-around-point/"
+        },
+        {
+            "title": "Change building color based on zoom level",
+            "href": "https://maplibre.org/maplibre-gl-js-docs/example/change-building-color-based-on-zoom-level/"
+        },
+        {
+            "title": "Create a heatmap layer",
+            "href": "https://maplibre.org/maplibre-gl-js-docs/example/heatmap-layer/"
+        },
+        {
+            "title": "Visualize population density",
+            "href": "https://maplibre.org/maplibre-gl-js-docs/example/visualize-population-density/"
+        }
+    ],
+    "let": [{
+        "title": "Visualize population density",
+        "href": "https://maplibre.org/maplibre-gl-js-docs/example/visualize-population-density/"
+    }],
+    "literal": [{
+        "title": "Display and style rich text labels",
+        "href": "https://maplibre.org/maplibre-gl-js-docs/example/display-and-style-rich-text-labels/"
+    }],
+    "number-format": [{
+        "title": "Display HTML clusters with custom properties",
+        "href": "https://maplibre.org/maplibre-gl-js-docs/example/cluster-html/"
+    }],
+    "step": [{
+        "title": "Create and style clusters",
+        "href": "https://maplibre.org/maplibre-gl-js-docs/example/cluster/"
+    }],
+    "to-color": [{
+        "title": "Visualize population density",
+        "href": "https://maplibre.org/maplibre-gl-js-docs/example/visualize-population-density/"
+    }],
+    "to-string": [{
+        "title": "Create a time slider",
+        "href": "https://maplibre.org/maplibre-gl-js-docs/example/timeline-animation/"
+    }],
+    "upcase": [{
+        "title": "Change the case of labels",
+        "href": "https://maplibre.org/maplibre-gl-js-docs/example/change-case-of-labels/"
+    }],
+    "var": [{
+        "title": "Visualize population density",
+        "href": "https://maplibre.org/maplibre-gl-js-docs/example/visualize-population-density/"
+    }]
 }
diff --git a/docs/img/src/immersive-camera.png b/docs/img/src/immersive-camera.png
new file mode 100644
index 000000000..9993daadd
Binary files /dev/null and b/docs/img/src/immersive-camera.png differ
diff --git a/docs/pages/assets/indoor-3d-positions.geojson b/docs/pages/assets/indoor-3d-positions.geojson
new file mode 100644
index 000000000..59a1c433e
--- /dev/null
+++ b/docs/pages/assets/indoor-3d-positions.geojson
@@ -0,0 +1,202 @@
+
+{
+    "type": "FeatureCollection",
+    "generator": "JOSM",
+    "features": [
+        {
+            "type": "Feature",
+            "properties": {
+                "highway": "footway"
+            },
+            "geometry": {
+                "type": "LineString",
+                "coordinates": [
+                    [
+                        -87.61618641082,
+                        41.86594492405
+                    ],
+                    [
+                        -87.61619261145,
+                        41.86624276266
+                    ],
+                    [
+                        -87.61620191240,
+                        41.86654290870
+                    ],
+                    [
+                        -87.61625771811,
+                        41.86623583620
+                    ],
+                    [
+                        -87.61704537618,
+                        41.86624147571
+                    ],
+                    [
+                        -87.61787298315,
+                        41.86622198327
+                    ],
+                    [
+                        -87.61789158505,
+                        41.86648749723
+                    ],
+                    [
+                        -87.61791948791,
+                        41.86597032120
+                    ],
+                    [
+                        -87.61786058189,
+                        41.86619427740
+                    ],
+                    [
+                        -87.61623911621,
+                        41.86619427740
+                    ],
+                    [
+                        -87.61618641082,
+                        41.86594492405
+                    ]
+                ]
+            }
+        },
+        {
+            "type": "Feature",
+            "properties": {
+                "bearing": "90",
+                "ref": "9"
+            },
+            "geometry": {
+                "type": "Point",
+                "coordinates": [
+                    -87.61786058189,
+                    41.86619427740
+                ]
+            }
+        },
+        {
+            "type": "Feature",
+            "properties": {
+                "bearing": "180",
+                "ref": "10"
+            },
+            "geometry": {
+                "type": "Point",
+                "coordinates": [
+                    -87.61623911621,
+                    41.86619427740
+                ]
+            }
+        },
+        {
+            "type": "Feature",
+            "properties": {
+                "bearing": "0",
+                "ref": "1"
+            },
+            "geometry": {
+                "type": "Point",
+                "coordinates": [
+                    -87.61618641082,
+                    41.86594492405
+                ]
+            }
+        },
+        {
+            "type": "Feature",
+            "properties": {
+                "bearing": "-90",
+                "ref": "4"
+            },
+            "geometry": {
+                "type": "Point",
+                "coordinates": [
+                    -87.61625771811,
+                    41.86623583620
+                ]
+            }
+        },
+        {
+            "type": "Feature",
+            "properties": {
+                "bearing": "-90",
+                "ref": "2"
+            },
+            "geometry": {
+                "type": "Point",
+                "coordinates": [
+                    -87.61619261145,
+                    41.86624276266
+                ]
+            }
+        },
+        {
+            "type": "Feature",
+            "properties": {
+                "bearing": "0",
+                "ref": "5"
+            },
+            "geometry": {
+                "type": "Point",
+                "coordinates": [
+                    -87.61704537618,
+                    41.86624147571
+                ]
+            }
+        },
+        {
+            "type": "Feature",
+            "properties": {
+                "bearing": "-90",
+                "ref": "3"
+            },
+            "geometry": {
+                "type": "Point",
+                "coordinates": [
+                    -87.61620191240,
+                    41.86654290870
+                ]
+            }
+        },
+        {
+            "type": "Feature",
+            "properties": {
+                "bearing": "90",
+                "ref": "6"
+            },
+            "geometry": {
+                "type": "Point",
+                "coordinates": [
+                    -87.61787298315,
+                    41.86622198327
+                ]
+            }
+        },
+        {
+            "type": "Feature",
+            "properties": {
+                "bearing": "180",
+                "ref": "7"
+            },
+            "geometry": {
+                "type": "Point",
+                "coordinates": [
+                    -87.61789158505,
+                    41.86648749723
+                ]
+            }
+        },
+        {
+            "type": "Feature",
+            "properties": {
+                "bearing": "0",
+                "ref": "8"
+            },
+            "geometry": {
+                "type": "Point",
+                "coordinates": [
+                    -87.61791948791,
+                    41.86597032120
+                ]
+            }
+        }
+    ]
+}
\ No newline at end of file
diff --git a/docs/pages/example/immersive-camera.html b/docs/pages/example/immersive-camera.html
new file mode 100644
index 000000000..afce8ab57
--- /dev/null
+++ b/docs/pages/example/immersive-camera.html
@@ -0,0 +1,150 @@
+<div id="map"></div>
+<script>
+    let position = 0;
+    let positions;
+    var map = new maplibregl.Map({
+        container: 'map',
+        style: {
+            "id": "raster",
+            "version": 8,
+            "name": "Raster tiles",
+            "center": [0, 0],
+            "zoom": 0,
+            "sources": {
+                "raster-tiles": {
+                    "type": "raster",
+                    "tiles": [
+                        "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
+                    ],
+                    "tileSize": 256,
+                    "minzoom": 0,
+                    "maxzoom": 19
+                }
+            },
+            "layers": [{
+                "id": "background",
+                "type": "background",
+                "paint": {
+                    "background-color": "#e0dfdf"
+                }
+            }, {
+                "id": "simple-tiles",
+                "type": "raster",
+                "source": "raster-tiles"
+            }]
+        },
+        center: [-87.61694, 41.86625],
+        zoom: 15.99,
+        pitch: 40,
+        bearing: 0,
+        antialias: true,
+        maxPitch: 85,
+        maxZoom: 25,
+    });
+
+
+    map.getCameraPosition = () => {
+        const pitch = map.transform._pitch;
+        const altitude = Math.cos(pitch) * map.transform.cameraToCenterDistance;
+        const latOffset = Math.tan(pitch) * map.transform.cameraToCenterDistance;
+        const latPosPointInPixels = map.transform.centerPoint.add(new maplibregl.Point(0, latOffset));
+        const latLong = map.transform.pointLocation(latPosPointInPixels);
+        const verticalScaleConstant = map.transform.worldSize / (2 * Math.PI * 6378137 * Math.abs(Math.cos(latLong.lat * (Math.PI / 180))));
+        const altitudeInMeters = altitude / verticalScaleConstant;
+        return {
+            lng: latLong.lng,
+            lat: latLong.lat,
+            altitude: altitudeInMeters,
+            pitch: pitch * 180 / Math.PI
+        };
+    }
+    map.setCameraPosition = (camPos) => {
+        const {
+            lng,
+            lat,
+            altitude,
+            pitch
+        } = camPos;
+        const pitch_ = pitch * Math.PI / 180;
+        const cameraToCenterDistance = 0.5 / Math.tan(map.transform._fov / 2) * map.transform.height;
+        const pixelAltitude = Math.abs(Math.cos(pitch_) * cameraToCenterDistance);
+        const metersInWorldAtLat = (2 * Math.PI * 6378137 * Math.abs(Math.cos(lat * (Math.PI / 180))));
+        const worldsize = (pixelAltitude / altitude) * metersInWorldAtLat;
+        const zoom = Math.log(worldsize / map.transform.tileSize) / Math.LN2;
+        const latOffset = Math.tan(pitch_) * cameraToCenterDistance;
+        const newPixelPoint = new maplibregl.Point(map.transform.width / 2, map.transform.height / 2 + latOffset);
+        const newLongLat = new maplibregl.LngLat(lng, lat);
+        map.transform.zoom = zoom;
+        map.transform.pitch = pitch;
+        map.transform.setLocationAtPoint(newLongLat, newPixelPoint);
+    }
+    map.camera_go_to = (camera_pos) => {
+        // console.log('camera_go_to');
+
+        let current_pos = map.getCameraPosition();
+        let old_bearing = map.getBearing();
+
+        // Move quickly to expected position to get target point position for flyTo call
+        map.setBearing(camera_pos.bearing);
+        map.setCameraPosition(camera_pos);
+
+        let target_pos_ = {
+            center: map.getCenter(),
+            zoom: map.getZoom(),
+            pitch: map.getPitch(),
+            bearing: camera_pos.bearing,
+            duration: 1000,
+        }
+
+        // back to old position
+        map.setBearing(old_bearing);
+        map.setCameraPosition(current_pos);
+
+        // Do it baby
+        map.easeTo(target_pos_);
+    }
+
+    map.on('click', () => {
+        position = position % 10 + 1;
+        let feature = positions.features.find((feat_) =>
+            feat_.geometry.type === "Point" &&
+            parseInt(feat_.properties.ref) === position);
+        let cam_pos = {
+            lng: feature.geometry.coordinates[0],
+            lat: feature.geometry.coordinates[1],
+            altitude: 30,
+            pitch: 70,
+            bearing: parseInt(feature.properties.bearing)
+        }
+        map.camera_go_to(cam_pos);
+    })
+    map.on('load', function() {
+        fetch("https://maplibre.org/maplibre-gl-js-docs/assets/indoor-3d-positions.geojson")
+            .then((response) => {
+                var contentType = response.headers.get("content-type");
+                if (contentType && contentType.indexOf("application/geo+json") !== -1) {
+                    return response.json().then(function(json) {
+                        positions = json;
+                    });
+                } else {
+                    console.log("No json!");
+                }
+            });
+
+        map.addSource('floorplan', {
+            'type': 'geojson',
+            'data': 'https://maplibre.org/maplibre-gl-js-docs/assets/indoor-3d-map.geojson'
+        });
+        map.addLayer({
+            'id': 'room-extrusion',
+            'type': 'fill-extrusion',
+            'source': 'floorplan',
+            'paint': {
+                'fill-extrusion-color': ['get', 'color'],
+                'fill-extrusion-height': ['get', 'height'],
+                'fill-extrusion-base': ['get', 'base_height'],
+                'fill-extrusion-opacity': 0.5
+            }
+        });
+    });
+</script>
\ No newline at end of file
diff --git a/docs/pages/example/immersive-camera.md b/docs/pages/example/immersive-camera.md
new file mode 100644
index 000000000..d126d4793
--- /dev/null
+++ b/docs/pages/example/immersive-camera.md
@@ -0,0 +1,21 @@
+---
+title: Immersive camera for First Person View
+description: Provide low level map functions to manipulate camera coordinates directly.
+topics:
+  - Camera
+thumbnail: immersive-camera
+contentType: example
+layout: example
+hideFeedback: true
+language:
+- JavaScript
+products:
+- MapLibre GL JS
+prependJs:
+- "import Example from '../../components/example';"
+- "import html from './immersive-camera.html';"
+---
+
+Extend map with functions for First Person View camera.
+
+{{ <Example html={html} {...this.props} /> }}