Elevation - route - Leaflet

by Mapycz

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.2/dist/leaflet.css" integrity="sha256-sA+zWATbFveLLNqWO2gtiw3HL/lh1giY/Inf1BJ0z14=" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.9.2/dist/leaflet.js" integrity="sha256-o9N1jGDZrf5tS+Ft4gbIK7mYMipq9lqpVJ91xHSyKhg=" crossorigin=""></script>
    <!-- leaflet-elevation plugin-->
    <link rel="stylesheet" href="https://unpkg.com/@raruto/leaflet-elevation/dist/leaflet-elevation.css" />
    <script src="https://unpkg.com/@raruto/leaflet-elevation/dist/leaflet-elevation.js"></script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

CSS

body {
  margin: 0;
  padding: 0;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

JavaScript

// replace with your own API key
const API_KEY = 'eyJpIjoyNTcsImMiOjE2Njc0ODU2MjN9.c_UlvdpHGTI_Jb-TNMYlDYuIkCLJaUpi911RdlwPsAY';
 // We create the map 
 const map = L.map('map').setView([49.8729317, 14.8981184], 16);      
 L.tileLayer(`https://api.mapy.cz/v1/maptiles/basic/256/{z}/{x}/{y}?apikey=${API_KEY}`, {
     minZoom: 0,
     maxZoom: 19,
     attribution: '<a href="https://api.mapy.cz/copyright" target="_blank">&copy; Seznam.cz a.s. a další</a>',
 }).addTo(map);

 // We create leaflet-elevation control
 var elevation_options = {
     detached: false,
     position: "bottomright",
     speed: false,
     altitude: true,
     time: false,
     summary: false,
     legend: false,
     distanceMarkers: false,
     hotline: false,
     height: 200,
 };
 var controlElevation = L.control.elevation(elevation_options).addTo(map);

 
 //We also require you to include our logo somewhere over the map.        
 const LogoControl = L.Control.extend({
     options: {
         position: 'bottomleft',
     },
     onAdd: function (map) {
         const container = L.DomUtil.create('div');
         const link = L.DomUtil.create('a', '', container);

         link.setAttribute('href', 'http://mapy.cz/');
         link.setAttribute('target', '_blank');
         link.innerHTML = '<img src="https://api.mapy.cz/img/api/logo.svg" />';
         L.DomEvent.disableClickPropagation(link);
         return container;
     },
 });
 new LogoControl().addTo(map);

 // Function that calls the routing API plans a foot route between two points
 const coordsStart = [15.7378861, 50.6968506];
 const coordsEnd = [15.6070481, 50.7251503];       
 async function route() {
     try {
         const url = new URL(`https://api.mapy.cz/v1/routing/route`);
         url.searchParams.set('apikey', API_KEY);
         url.searchParams.set('lang', 'cs');
         url.searchParams.set('start', coordsStart.join(','));
         url.searchParams.set('end', coordsEnd.join(','));
        ...