leaflet-elevation.js
A Leaflet plugin that allows to add elevation profiles using d3js
For a working example see one of the following demos:
- loading .gpx file
- loading .geojson file
- loading string data
- hoverable chart / hidden map
- hoverable chart / hidden chart
- hoverable .gpx tracks
- toggable .gpx tracks
- toggable .gpx charts
- custom-theme colors
- close button
- follow marker location
- gpx waypoint icons
- upload local gpx file
Initially based on the work of Felix “MrMufflon” Bache
How to use
-
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@latest/leaflet-elevation.css" /> <script src="https://unpkg.com/@raruto/leaflet-elevation@latest/leaflet-elevation.js"></script> ... </head>
-
choose the div container used for the slippy map
<body> ... <div id="map"></div> ... </body>
-
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, // 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") controlElevation.load("https://raruto.github.io/examples/leaflet-elevation/via-emilia.gpx"); </script>
Related: QGIS Integration
Compatibile with: leaflet@1.3.2, leaflet-gpx@1.4.0, d3js@4.13