@raruto/leaflet-elevation
Advanced tools
A Leaflet plugin that allows to add elevation profiles using d3js
A Leaflet plugin that allows to add elevation profiles using d3js
For a working example see one of the following demos:
Initially based on the work of Felix “MrMufflon” Bache
<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.7.1/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-ui@0.6.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>
<body>
...
<div id="map"></div>
...
</body>
<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",
// Toggle close icon visibility
closeBtn: true,
// 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,
// Altitude chart profile: true || "summary" || "disabled" || false
altitude: true,
// Display time info: true || "summary" || false
time: true,
// Display distance info: true || "summary" || false
distance: 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,
// Toggle "leaflet-edgescale" integration
edgeScale: false,
// Toggle "leaflet-hotline" integration
hotline: true,
// Display track datetimes: true || false
timestamps: 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 = 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>
Within your local development environment:
git clone git@github.com:Raruto/leaflet-elevation.git
cd ./leaflet-elevation
npm i # install dependencies
npm run dev # start dev server at: http://localhost:8080
npm run build # generate "dist" files (once)
npm run test # test all "*.spec.js" files (once)
After that you can start developing inside the src and test folders (eg. open "http://localhost:8080/test" in your browser to preview changes). Check also CONTRIBUTING.md file for some information about it.
There are multiple options to achieve this:
leaflet-elevation.css for some other default "*-theme" names)..elevation-control .area {
fill: red;
}
.elevation-control .background {
background-color: white;
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,
});
Usually, when working with a js bundler like Vite or Webpack, you need to provide to this library the full path to some dynamically imported files from the srcFolder:
import './your-custom-style.css';
import 'leaflet/dist/leaflet.css';
import L from 'leaflet';
import '@raruto/leaflet-elevation/src/index.js';
import '@raruto/leaflet-elevation/src/index.css';
const map = L.map('map', {
center: [41.4583, 12.7059]
zoom: 5,
});
const controlElevation = L.control.elevation({
// CHANGE ME: with your own http server folder (eg. "http://custom-server/public/path/to/leaflet-elevation/src/")
srcFolder: 'http://unpkg.com/@raruto/leaflet-elevation/src/'
}).addTo(map);
// Load track from url (allowed data types: "*.geojson", "*.gpx", "*.tcx")
controlElevation.load("https://raruto.github.io/leaflet-elevation/examples/via-emilia.gpx");
Related: Leaflet-UI presets, QGIS Integration
All notable changes to this project are documented in the releases page.
Compatibile with:
Contributors: MrMufflon, HostedDinner, ADoroszlai, Raruto
License: GPL-3.0+
FAQs
A Leaflet plugin that allows to add elevation profiles using d3js
The npm package @raruto/leaflet-elevation receives a total of 8,384 weekly downloads. As such, @raruto/leaflet-elevation popularity was classified as popular.
We found that @raruto/leaflet-elevation demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Malicious Go packages are impersonating popular libraries to install hidden loader malware on Linux and macOS, targeting developers with obfuscated payloads.
Security News
Bybit's $1.46B hack by North Korea's Lazarus Group pushes 2025 crypto losses to $1.6B in just two months, already surpassing all of 2024's $1.49B total.
Security News
OpenSSF has published OSPS Baseline, an initiative designed to establish a minimum set of security-related best practices for open source software projects.