{"id":22484829,"url":"https://github.com/Raruto/leaflet-elevation","last_synced_at":"2025-08-02T18:30:39.697Z","repository":{"id":34772202,"uuid":"155921237","full_name":"Raruto/leaflet-elevation","owner":"Raruto","description":"Leaflet plugin that allows to add elevation profiles using d3js","archived":false,"fork":false,"pushed_at":"2025-02-10T23:12:17.000Z","size":6132,"stargazers_count":270,"open_issues_count":15,"forks_count":88,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-07-02T19:02:23.994Z","etag":null,"topics":["altitude","d3js","elevation","geojson","gps-visualizer","gpx","highchart","javascript","kml","leaflet","leaflet-elevation","tcx"],"latest_commit_sha":null,"homepage":"https://raruto.github.io/leaflet-elevation","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Raruto.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-11-02T21:02:46.000Z","updated_at":"2025-06-23T03:04:21.000Z","dependencies_parsed_at":"2025-02-24T09:01:26.328Z","dependency_job_id":"ba176ce7-991e-4f99-9adc-b4d9cb5c1e3b","html_url":"https://github.com/Raruto/leaflet-elevation","commit_stats":{"total_commits":654,"total_committers":14,"mean_commits":"46.714285714285715","dds":0.5596330275229358,"last_synced_commit":"b0006d635a048ec3d1db519819ad3a9813e7ffc6"},"previous_names":[],"tags_count":96,"template":false,"template_full_name":null,"purl":"pkg:github/Raruto/leaflet-elevation","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Raruto%2Fleaflet-elevation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Raruto%2Fleaflet-elevation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Raruto%2Fleaflet-elevation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Raruto%2Fleaflet-elevation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Raruto","download_url":"https://codeload.github.com/Raruto/leaflet-elevation/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Raruto%2Fleaflet-elevation/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268432587,"owners_count":24249584,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-02T02:00:12.353Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["altitude","d3js","elevation","geojson","gps-visualizer","gpx","highchart","javascript","kml","leaflet","leaflet-elevation","tcx"],"created_at":"2024-12-06T17:11:38.123Z","updated_at":"2025-08-02T18:30:39.685Z","avatar_url":"https://github.com/Raruto.png","language":"JavaScript","readme":"# leaflet-elevation.js\n\n[![NPM version](https://img.shields.io/npm/v/@raruto/leaflet-elevation.svg?color=red)](https://www.npmjs.com/package/@raruto/leaflet-elevation)\n[![License](https://img.shields.io/badge/license-GPL%203-blue.svg?style=flat)](LICENSE)\n\nA Leaflet plugin that allows to add elevation profiles using d3js\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_hoverable-tracks.html\"\u003e\u003cimg src=\"https://raruto.github.io/img/leaflet-elevation.png\" alt=\"Leaflet elevation viewer\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n---\n\n_For a working example see one of the following demos:_\n\n- [loading .gpx file](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation.html)\n- [loading .geojson file](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_geojson-data.html)\n- [loading .kml file](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_kml-data.html)\n- [loading .tcx file](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_tcx-data.html)\n- [loading a local .gpx file](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_upload-gpx.html)\n- [loading data from a textarea](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_string-data.html)\n- [loading individual .geojson tracks](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_geojson-group.html)\n- [loading individual .gpx tracks](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_toggable-tracks.html)\n- [loading multiple .gpx tracks (hover to toggle)](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_hoverable-tracks.html)\n- [loading multiple .gpx tracks (click to toggle)](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_toggable-charts.html)\n- [loading multiple maps](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_multiple-maps.html)\n- [stacking multiple charts (elevation, slope, speed)](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_multiple-charts.html)\n- [translating plugin labels](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_i18n-strings.html)\n- [rotating chart labels](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_chart_labels.html)\n- [using custom colors](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_custom-theme.html)\n- [using .gpx extensions (cadence, heart, pace)](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_extended-ui.html)\n- [using .gpx waypoint icons](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_gpx-waypoints.html)\n- [using .geojson waypoint icons](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_geojson-waypoints.html)\n\n\n\u003cbr/\u003e\n\n- [autohide map](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_hidden-map.html)\n- [autohide chart](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_hidden-chart.html)\n- [clear button](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_clear-button.html)\n- [collapsible button](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_close-button.html)\n- [custom summary](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_custom-summary.html)\n- [edge scale control](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_edge-scale.html)\n- [follow marker](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_follow-marker.html)\n- [layer almostover](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_almost-over.html)\n- [linear gradient](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_linear-gradient.html)\n- [slope chart](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_slope-chart.html)\n- [speed chart](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_speed-chart.html)\n- [temperature chart](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_temperature-chart.html)\n- [walking marker](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_dynamic-runner.html)\n\n---\n\n\u003cblockquote\u003e\n    \u003cp align=\"center\"\u003e\n        \u003cem\u003eInitially based on the \u003ca href=\"http://mrmufflon.github.io/Leaflet.Elevation/\"\u003ework\u003c/a\u003e of \u003cstrong\u003eFelix “MrMufflon” Bache\u003c/strong\u003e\u003c/em\u003e\n    \u003c/p\u003e\n\u003c/blockquote\u003e\n\n---\n\n## How to use\n\n1. **include CSS \u0026 JavaScript**\n    ```html\n    \u003chead\u003e\n    ...\n    \u003cstyle\u003e html, body, #map, #elevation-div { height: 100%; width: 100%; padding: 0; margin: 0; } #map { height: 75%; } #elevation-div {\theight: 25%; font: 12px/1.5 \"Helvetica Neue\", Arial, Helvetica, sans-serif; } \u003c/style\u003e\n\n    \u003c!-- leaflet-ui --\u003e\n    \u003cscript src=\"https://unpkg.com/leaflet@1.7.1/dist/leaflet.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://unpkg.com/leaflet-ui@0.6.0/dist/leaflet-ui.js\"\u003e\u003c/script\u003e\n\n    \u003c!-- leaflet-elevation --\u003e\n    \u003clink rel=\"stylesheet\" href=\"https://unpkg.com/@raruto/leaflet-elevation/dist/leaflet-elevation.css\" /\u003e\n    \u003cscript src=\"https://unpkg.com/@raruto/leaflet-elevation/dist/leaflet-elevation.js\"\u003e\u003c/script\u003e\n    ...\n    \u003c/head\u003e\n    ```\n2. **choose the div container used for the slippy map**\n    ```html\n    \u003cbody\u003e\n    ...\n    \u003cdiv id=\"map\"\u003e\u003c/div\u003e\n    ...\n    \u003c/body\u003e\n    ```\n3. **create your first simple “leaflet-elevation” slippy map**\n    ```html\n    \u003cscript\u003e\n      // Full list options at \"leaflet-elevation.js\"\n      var elevation_options = {\n\n        // Default chart colors: theme lime-theme, magenta-theme, ...\n        theme: \"lightblue-theme\",\n\n        // Chart container outside/inside map container\n        detached: true,\n\n        // if (detached), the elevation chart container\n        elevationDiv: \"#elevation-div\",\n\n        // if (!detached) autohide chart profile on chart mouseleave\n        autohide: false,\n\n        // if (!detached) initial state of chart profile control\n        collapsed: false,\n        \n        // if (!detached) control position on one of map corners\n        position: \"topright\",\n        \n        // Toggle close icon visibility\n        closeBtn: true,\n\n        // Autoupdate map center on chart mouseover.\n        followMarker: true,\n\n        // Autoupdate map bounds on chart update.\n        autofitBounds: true,\n\n        // Chart distance/elevation units.\n        imperial: false,\n\n        // [Lat, Long] vs [Long, Lat] points. (leaflet default: [Lat, Long])\n        reverseCoords: false,\n\n        // Acceleration chart profile: true || \"summary\" || \"disabled\" || false\n        acceleration: false,\n\n        // Slope chart profile: true || \"summary\" || \"disabled\" || false\n        slope: false,\n\n        // Speed chart profile: true || \"summary\" || \"disabled\" || false\n        speed: false,\n\n        // Altitude chart profile: true || \"summary\" || \"disabled\" || false\n        altitude: true,\n\n        // Display time info: true || \"summary\" || false\n        time: true,\n\n        // Display distance info: true || \"summary\" || false\n        distance: true,\n\n        // Summary track info style: \"inline\" || \"multiline\" || false\n        summary: 'multiline',\n\n        // Download link: \"link\" || false || \"modal\"\n        downloadLink: 'link',\n\n        // Toggle chart ruler filter\n        ruler: true,\n\n        // Toggle chart legend filter\n        legend: true,\n\n        // Toggle \"leaflet-almostover\" integration\n        almostOver: true,\n\n        // Toggle \"leaflet-distance-markers\" integration\n        distanceMarkers: false,\n\n        // Toggle \"leaflet-edgescale\" integration\n        edgeScale: false,\n        \n        // Toggle \"leaflet-hotline\" integration\n        hotline: true,\n\n        // Display track datetimes: true || false\n        timestamps: false,\n\n        // Display track waypoints: true || \"markers\" || \"dots\" || false\n        waypoints: true,\n\n        // Toggle custom waypoint icons: true || { associative array of \u003csym\u003e tags } || false\n        wptIcons: {\n          '': L.divIcon({\n            className: 'elevation-waypoint-marker',\n            html: '\u003ci class=\"elevation-waypoint-icon\"\u003e\u003c/i\u003e',\n            iconSize: [30, 30],\n            iconAnchor: [8, 30],\n          }),\n        },\n\n        // Toggle waypoint labels: true || \"markers\" || \"dots\" || false\n        wptLabels: true,\n\n        // Render chart profiles as Canvas or SVG Paths\n        preferCanvas: true,\n\n      };\n\n      // Instantiate map (leaflet-ui).\n      var map = L.map('map', { mapTypeId: 'terrain', center: [41.4583, 12.7059], zoom: 5 });\n\n      // Instantiate elevation control.\n      var controlElevation = L.control.elevation(elevation_options).addTo(map);\n\n      // Load track from url (allowed data types: \"*.geojson\", \"*.gpx\", \"*.tcx\")\n      controlElevation.load(\"https://raruto.github.io/leaflet-elevation/examples/via-emilia.gpx\");\n\n    \u003c/script\u003e\n    ```\n\n### Build Guide\n\nWithin your local development environment:\n\n```shell\ngit clone git@github.com:Raruto/leaflet-elevation.git\ncd ./leaflet-elevation\n\nnpm i         # install dependencies\nnpm run dev   # start dev server at: http://localhost:8080\nnpm run build # generate \"dist\" files (once)\nnpm run test  # test all \"*.spec.js\" files (once)\n```\n\nAfter 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](.github/CONTRIBUTING.md) file for some information about it.\n\n### FAQ\n\n\u003cdetails\u003e\n  \u003csummary\u003e1. How can I change the color of the elevation plot?\u003c/summary\u003e\u003cbr\u003e\n\nThere are multiple options to achieve this:\n\n* 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).\n* check out [this example](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_custom-theme.html)\n* Or add the following lines for custom colors.\n```css\n.elevation-control .area {\n    fill: red;\n}\n.elevation-control .background {\n    background-color: white;\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e2. How to enable/disable the leaflet user interface customizations?\u003c/summary\u003e\u003cbr\u003e\n\nThese customizations are actually part of the [leaflet-ui](https://github.com/Raruto/leaflet-ui) and can be toggled on/off using e.g. the following options:\n```js\nvar map = L.map('map', {\n    center: [41.4583, 12.7059],  // needs value to initialize\n    zoom: 5,                     // needs value to initialize\n    mapTypeId: 'topo',\n    mapTypeIds: ['osm', 'terrain', 'satellite', 'topo'],\n    gestureHandling: false,     // zoom with Cmd + Scroll\n    zoomControl: true,          // plus minus buttons\n    pegmanControl: false,\n    locateControl: false,\n    fullscreenControl: true,\n    layersControl: true,\n    minimapControl: false,\n    editInOSMControl: false,\n    loadingControl: false,\n    searchControl: false,\n    disableDefaultUI: false,\n    printControl: false,\n});\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e \u003csummary\u003e3. How can I import this library as ES module?\u003c/summary\u003e\n\nUsually, when working with a js bundler like [Vite](https://vitest.dev/) or [Webpack](https://webpack.js.org/), you need to provide to this library the full path to some dynamically imported files from the [`srcFolder`](./src/):\n\n```js\nimport './your-custom-style.css';\nimport 'leaflet/dist/leaflet.css';\nimport L from 'leaflet';\nimport '@raruto/leaflet-elevation/src/index.js';\nimport '@raruto/leaflet-elevation/src/index.css';\n\nconst map = L.map('map', {\n    center: [41.4583, 12.7059]\n    zoom: 5,\n});\n\nconst controlElevation = L.control.elevation({\n    // CHANGE ME: with your own http server folder (eg. \"http://custom-server/public/path/to/leaflet-elevation/src/\")\n    srcFolder: 'http://unpkg.com/@raruto/leaflet-elevation/src/'\n}).addTo(map);\n\n// Load track from url (allowed data types: \"*.geojson\", \"*.gpx\", \"*.tcx\")\ncontrolElevation.load(\"https://raruto.github.io/leaflet-elevation/examples/via-emilia.gpx\");\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e4. Some real world projects based on this plugin?\u003c/summary\u003e\u003cbr\u003e\n\n- https://parcours.scasb.org/\n- https://velocat.ru/velo/phpBB3/map.php\n- https://plugins.qgis.org/plugins/track_profile_2_web/\n- https://wordpress.org/plugins/os-datahub-maps/\n- https://wordpress.org/plugins/extensions-leaflet-map/\n- https://github.com/der-stefan/OpenTopoMap\n- https://gpx.n-peloton.fr/\n- https://walkaholic.me/map\n\n\u003c/details\u003e\n\n_Related: [Leaflet-UI presets](https://github.com/raruto/leaflet-ui), [QGIS Integration](https://github.com/faunalia/trackprofile2web)_\n\n### Changelog\n\nAll notable changes to this project are documented in the [releases](https://github.com/Raruto/leaflet-elevation/releases) page.\n\n---\n\n**Compatibile with:**\n[![Leaflet 1.x compatible!](https://img.shields.io/badge/Leaflet-1.7.0-1EB300.svg?style=flat)](http://leafletjs.com/reference.html)\n[![d3.js v7 compatibile!](https://img.shields.io/badge/d3.js-7.8-1EB300.svg?style=flat)](https://www.npmjs.com/package/d3)\n[![@tmcw/togeojson v5 compatibile!](https://img.shields.io/badge/@tmcw/togeojson-5.6-1EB300.svg?style=flat)](https://www.npmjs.com/package/@tmcw/togeojson)\n\n\n---\n\n**Contributors:** [MrMufflon](https://github.com/MrMufflon/Leaflet.Elevation), [HostedDinner](https://github.com/HostedDinner/Leaflet.Elevation), [ADoroszlai](http://ADoroszlai.github.io/joebed/), [Raruto](https://github.com/Raruto/leaflet-elevation)\n\n---\n\n**License:** GPL-3.0+\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FRaruto%2Fleaflet-elevation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FRaruto%2Fleaflet-elevation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FRaruto%2Fleaflet-elevation/lists"}