Skip to content
master
Switch branches/tags
Code

Files

Permalink
Failed to load latest commit information.

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: "inline" || "multiline" || false
        summary: 'multiline',
    
        // Download link: "link" || false || "modal"
        downloadLink: 'link',
    
        // 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,
    
        // Display track waypoints: true || "markers" || "dots" || false
        waypoints: true,
    
        // Toggle custom waypoint icons: true || { associative array of <sym> tags } || false
        wptIcons: {
          '': L.divIcon({
            className: 'elevation-waypoint-marker',
            html: '<i class="elevation-waypoint-icon"></i>',
            iconSize: [30, 30],
            iconAnchor: [8, 30],
          }),
        },
    
        // Toggle waypoint labels: true || "markers" || "dots" || false
        wptLabels: true,
    
        // 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>

FAQ

1. How can I change the color of the elevation plot?

There are multiple options to achieve this:

  • You could either use some default presets (see: theme: "lightblue-theme" option in readme file and the following file leaflet-elevation.css for some other default "*-theme" names).
  • check out this example
  • Or add the following lines for custom colors.
.elevation-control.elevation .area {
    fill: red;
}
.elevation-control.elevation .background {
    background-color: white;
2. How to enable/disable the leaflet user interface customizations?

These customizations are actually part of the leaflet-ui and can be toggled on/off using e.g. the following options:

var map = L.map('map', {
    center: [41.4583, 12.7059],  // needs value to initialize
    zoom: 5,                     // needs value to initialize
    mapTypeId: 'topo',
    mapTypeIds: ['osm', 'terrain', 'satellite', 'topo'],
    gestureHandling: false,     // zoom with Cmd + Scroll
    zoomControl: true,          // plus minus buttons
    pegmanControl: false,
    locateControl: false,
    fullscreenControl: true,
    layersControl: true,
    minimapControl: false,
    editInOSMControl: false,
    loadingControl: false,
    searchControl: false,
    disableDefaultUI: false,
    printControl: false,
});

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