Skip to content
Leaflet plugin that allows to add elevation profiles using d3js
JavaScript CSS
Branch: master
Clone or download
Latest commit 447201b Nov 13, 2019


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
    <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=""></script>
    <script src=""></script>
    <!-- leaflet-elevation -->
    <link rel="stylesheet" href="" />
    <script src=""></script>
  2. choose the div container used for the slippy map
    <div id="map"></div>
  3. create your first simple “leaflet-elevation” slippy map
      // 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,
        // Chart distance/elevation units.
        imperial: false,
        // [Lat, Long] vs [Long, Lat] points. (leaflet default: [Lat, Long])
        reverseCoords: false,
        // Summary track info style: "line" || "multiline" || false,
        summary: 'multiline',
      // 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")

Related: QGIS Integration

Compatibile with: leaflet@1.3.2, leaflet-gpx@1.4.0, d3js@4.13

Contributors: MrMufflon, HostedDinner, ADoroszlai, Raruto

You can’t perform that action at this time.