leaflet-elevation.js

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

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 (JS/CSS) -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.2/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.3.2/dist/leaflet.js"></script>
<!-- D3.js -->
<script src="https://unpkg.com/d3@4.13.0/build/d3.min.js" charset="utf-8"></script>
<!-- leaflet-gpx -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/1.4.0/gpx.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 containers used for the slippy map

<body>
...
<div id="map"></div>
<div id="elevation-div"></div>
...
</body>

create your first simple “leaflet-elevation” slippy map

<script>
  var opts = {
    map: {
      center: [41.4583, 12.7059],
      zoom: 5,
      markerZoomAnimation: false,
      zoomControl: false,
    },
    zoomControl: {
      position: 'topleft',
    },
    otmLayer: {
      url: 'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',
      options: {
        attribution: 'Map data: &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)',
        /*subdomains:"1234"*/
      },
    },
    elevationControl: {
      data: "https://raruto.github.io/examples/leaflet-elevation/via-emilia.gpx",
      options: {
        position: "topleft",
        theme: "magenta-theme", //default: lime-theme
        useHeightIndicator: true, //if false a marker is drawn at map position
        collapsed: false, //collapsed mode, show chart on click or mouseover
        detachedView: true, //if false the chart is drawn within map container
        elevationDiv: "#elevation-div", // if (detached), the elevation chart container
      },
    },
    layersControl: {
      options: {
        collapsed: false,
      },
    },
  };

  var map = new L.Map('map', opts.map);

  var baseLayers = {};
  baseLayers.OTM = new L.TileLayer(opts.otmLayer.url, opts.otmLayer.options);

  var controlZoom = new L.Control.Zoom(opts.zoomControl);
  var controlElevation = L.control.elevation(opts.elevationControl.options);
  var controlLayer = L.control.layers(baseLayers, null, opts.layersControl.options);

  controlZoom.addTo(map);
  controlLayer.addTo(map);
  controlElevation.addTo(map); // attach elevation chart to map

  controlElevation.loadData(opts.elevationControl.data); // url or plain gpx/geojson data

  map.addLayer(baseLayers.OTM);
</script>

Related: QGIS Integration

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

Contributors: MrMufflon, HostedDinner, ADoroszlai, Raruto

About

Leaflet plugin that allows to add elevation profiles using d3js

GNU General Public License v3.0

Languages

Language:JavaScript 90.3%Language:CSS 9.7%