ThomasG77/demo-elevation-track.html

## demo-elevation-track.html


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Display a map</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <script src="https://unpkg.com/maplibre-gl@1.14.0-rc.1/dist/maplibre-gl.js"></script>
    <script src="https://unpkg.com/@turf/turf/turf.min.js"></script>
    <link href="https://unpkg.com/maplibre-gl@1.14.0-rc.1/dist/maplibre-gl.css" rel="stylesheet" />
    <style>
      body { margin: 0; padding: 0; }
      #map { position: absolute; top: 0; bottom: 0; width: 100%; }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      const lng = 14.764994999932776;
      const lat = 47.2200;
      const zoomLevel = 14;

      var map = new maplibregl.Map({
        container: 'map', // container id
        style: {
          'version': 8,
          'sources': {
            'raster-tiles': {
            'type': 'raster',
            'tiles': [
              'https://tile.openstreetmap.org/{z}/{x}/{y}.png'
            ],
            'tileSize': 256,
            'attribution': '© <a href="/copyright">OpenStreetMap contributors</a> ♥ <a class="donate-attr" href="https://donate.openstreetmap.org">Make a Donation</a>. <a href="https://wiki.osmfoundation.org/wiki/Terms_of_Use" target="_blank">Website and API terms</a>'
            }
          },
          'layers': [{
            'id': 'simple-tiles',
            'type': 'raster',
            'source': 'raster-tiles',
            'minzoom': 0,
            'maxzoom': 19
          }]
        }, // style URL
        center: [lng, lat], // starting position [lng, lat]
        zoom: zoomLevel, // starting zoom
        pitch: 45
      });
      map.addControl(new maplibregl.NavigationControl({
        showZoom: true,
        showCompass: true,
        visualizePitch: true
      }))

      var mygeojson = {
        "type": "FeatureCollection",
        "features": [{
          "type": "Feature",
          "properties": {
            "name": "Businesslauf Spielberg 1st #KingofRedbullRing",
            "type": "9",
          },
          "geometry": {
            "type": "LineString",
            "coordinates": [
            [
              14.765181,
              47.220035,
              725.2
            ],
            [
              14.765127,
              47.220028,
              726
            ],
            [
              14.764863,
              47.219974,
              726
            ],
            ]
          }
        }]
      };

      var mygeojsonfeatures = mygeojson.features;

      var results = [];
      for (let j = 0; j < mygeojsonfeatures.length; j++) {
        var mycoords = mygeojsonfeatures[j].geometry.coordinates;
        for (let i = 0; i < mycoords.length; i++) {
          let line;
          if (i == 0) {
            line = turf.lineString([
            mycoords[i].slice(0, 2),
            turf.midpoint(turf.point(mycoords[i].slice(0, 2)), turf.point(mycoords[i + 1].slice(0, 2))).geometry.coordinates
            ]);
          } else if (i == mycoords.length - 1) {
            line = turf.lineString([
            turf.midpoint(turf.point(mycoords[i - 1].slice(0, 2)), turf.point(mycoords[i].slice(0, 2))).geometry.coordinates,
            mycoords[i].slice(0, 2)
            ]);
          } else {
            line = turf.lineString([
            turf.midpoint(turf.point(mycoords[i - 1].slice(0, 2)), turf.point(mycoords[i].slice(0, 2))).geometry.coordinates,
            mycoords[i].slice(0, 2),
            turf.midpoint(turf.point(mycoords[i].slice(0, 2)), turf.point(mycoords[i + 1].slice(0, 2))).geometry.coordinates
            ]);
          }
          line.properties = Object.assign({}, mygeojsonfeatures[j].properties);
          line.properties.elevation = mycoords[i][2];
          // console.log(mycoords[i][2], line.properties.elevation);
          results.push(line)
        }
      }

      var geojson = {
        "type": "FeatureCollection",
        "features": results
      }

      map.on("load", () => {
        map.addSource("track", {
          type: "geojson",
          data: geojson,
        })

        map.addLayer({
          id: "track",
          type: "fill-extrusion",
          source: "track",
          paint: {
            "fill-extrusion-color": "#ff0000",
            "fill-extrusion-height": ["get", "elevation"],
            "fill-extrusion-opacity": 0.5,
          }
        })
      });
    </script>
  </body>
</html>


	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Display a map</title>
	<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
	<script src="https://unpkg.com/maplibre-gl@1.14.0-rc.1/dist/maplibre-gl.js"></script>
	<script src="https://unpkg.com/@turf/turf/turf.min.js"></script>
	<link href="https://unpkg.com/maplibre-gl@1.14.0-rc.1/dist/maplibre-gl.css" rel="stylesheet" />
	<style>
	body { margin: 0; padding: 0; }
	#map { position: absolute; top: 0; bottom: 0; width: 100%; }
	</style>
	</head>
	<body>
	<div id="map"></div>
	<script>
	const lng = 14.764994999932776;
	const lat = 47.2200;
	const zoomLevel = 14;

	var map = new maplibregl.Map({
	container: 'map', // container id
	style: {
	'version': 8,
	'sources': {
	'raster-tiles': {
	'type': 'raster',
	'tiles': [
	'https://tile.openstreetmap.org/{z}/{x}/{y}.png'
	],
	'tileSize': 256,
	'attribution': '© <a href="/copyright">OpenStreetMap contributors</a> ♥ <a class="donate-attr" href="https://donate.openstreetmap.org">Make a Donation</a>. <a href="https://wiki.osmfoundation.org/wiki/Terms_of_Use" target="_blank">Website and API terms</a>'
	}
	},
	'layers': [{
	'id': 'simple-tiles',
	'type': 'raster',
	'source': 'raster-tiles',
	'minzoom': 0,
	'maxzoom': 19
	}]
	}, // style URL
	center: [lng, lat], // starting position [lng, lat]
	zoom: zoomLevel, // starting zoom
	pitch: 45
	});
	map.addControl(new maplibregl.NavigationControl({
	showZoom: true,
	showCompass: true,
	visualizePitch: true
	}))

	var mygeojson = {
	"type": "FeatureCollection",
	"features": [{
	"type": "Feature",
	"properties": {
	"name": "Businesslauf Spielberg 1st #KingofRedbullRing",
	"type": "9",
	},
	"geometry": {
	"type": "LineString",
	"coordinates": [
	[
	14.765181,
	47.220035,
	725.2
	],
	[
	14.765127,
	47.220028,
	726
	],
	[
	14.764863,
	47.219974,
	726
	],
	]
	}
	}]
	};

	var mygeojsonfeatures = mygeojson.features;

	var results = [];
	for (let j = 0; j < mygeojsonfeatures.length; j++) {
	var mycoords = mygeojsonfeatures[j].geometry.coordinates;
	for (let i = 0; i < mycoords.length; i++) {
	let line;
	if (i == 0) {
	line = turf.lineString([
	mycoords[i].slice(0, 2),
	turf.midpoint(turf.point(mycoords[i].slice(0, 2)), turf.point(mycoords[i + 1].slice(0, 2))).geometry.coordinates
	]);
	} else if (i == mycoords.length - 1) {
	line = turf.lineString([
	turf.midpoint(turf.point(mycoords[i - 1].slice(0, 2)), turf.point(mycoords[i].slice(0, 2))).geometry.coordinates,
	mycoords[i].slice(0, 2)
	]);
	} else {
	line = turf.lineString([
	turf.midpoint(turf.point(mycoords[i - 1].slice(0, 2)), turf.point(mycoords[i].slice(0, 2))).geometry.coordinates,
	mycoords[i].slice(0, 2),
	turf.midpoint(turf.point(mycoords[i].slice(0, 2)), turf.point(mycoords[i + 1].slice(0, 2))).geometry.coordinates
	]);
	}
	line.properties = Object.assign({}, mygeojsonfeatures[j].properties);
	line.properties.elevation = mycoords[i][2];
	// console.log(mycoords[i][2], line.properties.elevation);
	results.push(line)
	}
	}

	var geojson = {
	"type": "FeatureCollection",
	"features": results
	}

	map.on("load", () => {
	map.addSource("track", {
	type: "geojson",
	data: geojson,
	})

	map.addLayer({
	id: "track",
	type: "fill-extrusion",
	source: "track",
	paint: {
	"fill-extrusion-color": "#ff0000",
	"fill-extrusion-height": ["get", "elevation"],
	"fill-extrusion-opacity": 0.5,
	}
	})
	});
	</script>
	</body>
	</html>