@netmust/leaflet-elevation NPM

leaflet-elevation.js

A Leaflet plugin that allows to add elevation profiles using d3js

For a working example see one of the following demos:

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

```html
<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

leaflet d3js javascript elevation highchart altitude gpx gps-visualizer

@infinitebrahmanuniverse/nolb-_net @everything-registry/sub-chunk-642 @zalastax/nolb-_net

0.0.2

5 years ago

0.0.1

5 years ago