View on GitHub

leaflet-elevation

Leaflet plugin that allows to add elevation profiles using d3js

leaflet-elevation.js

NPM version License

A Leaflet plugin that allows to add elevation profiles using d3js

Leaflet elevation viewer


For a working example see one of the following demos:






Initially based on the work of Felix “MrMufflon” Bache


How to use

  1. include CSS & JavaScript
     <head>
     ...
     <style> html, body, #map, #elevation-div { height: 100%; width: 100%; padding: 0; margin: 0; } #map { height: 75%; } #elevation-div {	height: 25%; font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif; } </style>
    
     <!-- leaflet-ui -->
     <script src="https://unpkg.com/leaflet@1.3.2/dist/leaflet.js"></script>
     <script src="https://unpkg.com/leaflet-ui@0.2.0/dist/leaflet-ui.js"></script>
    
     <!-- leaflet-elevation -->
     <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>
    
  2. choose the div container used for the slippy map
     <body>
     ...
     <div id="map"></div>
     ...
     </body>
    
  3. create your first simple “leaflet-elevation” slippy map
     <script>
       // Full list options at "leaflet-elevation.js"
       var elevation_options = {
    
         // Default chart colors: theme lime-theme, magenta-theme, ...
         theme: "lightblue-theme",
    
         // Chart container outside/inside map container
         detached: true,
    
         // if (detached), the elevation chart container
         elevationDiv: "#elevation-div",
    
         // if (!detached) autohide chart profile on chart mouseleave
         autohide: false,
    
         // if (!detached) initial state of chart profile control
         collapsed: false,
    
         // if (!detached) control position on one of map corners
         position: "topright",
    
         // Autoupdate map center on chart mouseover.
         followMarker: true,
    
         // Autoupdate map bounds on chart update.
         autofitBounds: true,
    
         // Chart distance/elevation units.
         imperial: false,
    
         // [Lat, Long] vs [Long, Lat] points. (leaflet default: [Lat, Long])
         reverseCoords: false,
    
         // Acceleration chart profile: true || "summary" || "disabled" || false
         acceleration: false,
    
         // Slope chart profile: true || "summary" || "disabled" || false
         slope: false,
    
         // Speed chart profile: true || "summary" || "disabled" || false
         speed: false,
    
         // Display time info: true || "summary" || false
         time: false,
    
         // Display distance info: true || "summary"
         distance: true,
    
         // Display altitude info: true || "summary"
         altitude: true,
    
         // Summary track info style: "line" || "multiline" || false
         summary: 'multiline',
    
         // Toggle chart ruler filter.
         ruler: true,
    
         // Toggle chart legend filter.
         legend: true,
    
         // Toggle "leaflet-almostover" integration
         almostOver: true,
    
         // Toggle "leaflet-distance-markers" integration
         distanceMarkers: false,
    
         // Render chart profiles as Canvas or SVG Paths
         preferCanvas: true
    
       };
    
       // Instantiate map (leaflet-ui).
       var map = new L.Map('map', { mapTypeId: 'terrain', center: [41.4583, 12.7059], zoom: 5 });
    
       // Instantiate elevation control.
       var controlElevation = L.control.elevation(elevation_options).addTo(map);
    
       // Load track from url (allowed data types: "*.geojson", "*.gpx", "*.tcx")
       controlElevation.load("https://raruto.github.io/leaflet-elevation/examples/via-emilia.gpx");
    
     </script>
    

    Related: Leaflet-UI presets, QGIS Integration


Compatibile with: Leaflet 1.x compatible! d3.js v6 compatibile! @tmcw/togeojson v4.3.0 compatibile!


Contributors: MrMufflon, HostedDinner, ADoroszlai, Raruto