> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/mapbox-gl-js/ja/llms.txt)
# Add an elevated line to a map
> **Note (new): Feature available in Mapbox GL JS v3.8. or higher**
>
> To use this feature your application must use Mapbox GL JS v3.8 or any later releases.
> **Note (warning): Experimental Feature**
>
> Note that this is an experimental feature which is under development and is subject to change.
This example uses [line-z-offset](https://docs.mapbox.com/style-spec/reference/layers/#layout-line-line-z-offset) property to create an elevated line.
The `line-z-offset` property uses [at-interpolated](https://docs.mapbox.com/style-spec/reference/expressions/#at-interpolated) expression to sample a value from the `elevation` array of a `GeoJSON` source via linear interpolation.
The [line-elevation-reference](https://docs.mapbox.com/style-spec/reference/layers/#layout-line-line-elevation-reference) property defines sea level as the reference point for the layer's elevation values.
> Example code:
**JavaScript**
```html
Add an elevated line to a map
```
**React**
```jsx
import React, { useEffect, useRef } from 'react';
import * as mapboxgl from 'mapbox-gl/esm';
import 'mapbox-gl/dist/mapbox-gl.css';
const MapboxExample = () => {
const mapContainerRef = useRef();
const mapRef = useRef();
useEffect(() => {
mapRef.current = new mapboxgl.Map({
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN',
container: mapContainerRef.current,
center: [6.7782, 45.8418],
zoom: 11,
pitch: 62,
bearing: -150,
style: 'mapbox://styles/mapbox/standard',
minZoom: 9,
maxZoom: 15
});
mapRef.current.on('style.load', () => {
mapRef.current.addSource('mapbox-dem', {
type: 'raster-dem',
url: 'mapbox://mapbox.mapbox-terrain-dem-v1',
tileSize: 512,
maxzoom: 14
});
// add the DEM source as a terrain layer
mapRef.current.setTerrain({ source: 'mapbox-dem', exaggeration: 1.0 });
mapRef.current.addSource('geojson', {
type: 'geojson',
lineMetrics: true,
data: {
type: 'Feature',
properties: {
// add an array of elevation values.
// the number of values doesn't need to match the number of coordinates.
elevation: [
4600, 4600, 4600, 4599, 4598, 4596, 4593, 4590, 4584, 4578, 4569,
4559, 4547, 4533, 4516, 4497, 4475, 4450, 4422, 4390, 4355, 4316,
4275, 4227, 4177, 4124, 4068, 4009, 3946, 3880, 3776, 3693, 3599,
3502, 3398, 3290, 3171, 3052, 2922, 2786, 2642, 2490, 2332, 2170,
1994, 1810, 1612, 1432, 1216, 1000
]
},
geometry: {
coordinates: [
[6.862885, 45.833563],
[6.863605, 45.846851],
[6.859783, 45.862445],
[6.848727, 45.876361],
[6.827155, 45.892361],
[6.802194, 45.905032],
[6.780023, 45.909602],
[6.753605, 45.906074],
[6.728807, 45.89912],
[6.700449, 45.883872],
[6.683772, 45.863866],
[6.684058, 45.841619],
[6.691115, 45.825417],
[6.704446, 45.813349],
[6.720959, 45.807886],
[6.748477, 45.809517],
[6.775554, 45.817254],
[6.791236, 45.828871],
[6.801289, 45.838797],
[6.806307, 45.849788],
[6.803161, 45.866159],
[6.794599, 45.880461],
[6.769846, 45.890231],
[6.744712, 45.889576],
[6.722788, 45.881677],
[6.708097, 45.868556],
[6.699435, 45.851973],
[6.707324, 45.83298],
[6.723743, 45.822384],
[6.739347, 45.818626],
[6.756019, 45.822069],
[6.773963, 45.832436],
[6.78592, 45.848229],
[6.786155, 45.860521],
[6.77443, 45.870586],
[6.749012, 45.87567],
[6.731251, 45.868501],
[6.716033, 45.853689],
[6.714748, 45.84697],
[6.714635, 45.838934],
[6.71785, 45.832829],
[6.72401, 45.828151],
[6.730551, 45.827333],
[6.733951, 45.8299],
[6.735957, 45.834154],
[6.735286, 45.839871],
[6.734471, 45.843933],
[6.730893, 45.847233],
[6.72855, 45.847899],
[6.72659, 45.847822],
[6.724876, 45.846455],
[6.725096, 45.8439],
[6.726635, 45.841201],
[6.728074, 45.837041],
[6.727822, 45.834292]
],
type: 'LineString'
}
}
});
// add the elevated line layer
mapRef.current.addLayer({
id: 'elevated-line',
type: 'line',
source: 'geojson',
layout: {
'line-z-offset': [
'at-interpolated',
[
'*',
['line-progress'],
['-', ['length', ['get', 'elevation']], 1]
],
['get', 'elevation']
],
'line-elevation-reference': 'sea'
},
paint: {
'line-emissive-strength': 1.0,
'line-width': 8,
'line-color': 'royalblue'
}
});
});
}, []);
return ;
};
export default MapboxExample;
```