Raruto/leaflet-elevation

Custom inline summary

haldo98 opened this issue · 1 comments

haldo98 commented

Hi...

I cannot find examples or solutions (i'm a newbie) to set up a custom summary in a non detached elevation summary.
I found examples only for the detached ones

Can you please help?
Thank You

Raruto commented

i'm a newbie

Hi @haldo98,

you can start to edit the following example:

leaflet-elevation/examples/leaflet-elevation_custom-summary.html

Lines 1 to 152 in 8681792

<!DOCTYPE html>
<html>
<head>
<title>leaflet-elevation.js</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="dns-prefetch" href="https://tile.openstreetmap.org">
<link rel="dns-prefetch preconnect" href="https://unpkg.com" />
<link rel="preload" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" as="script">
<link rel="preload" href="https://unpkg.com/leaflet-ui@0.5.9/dist/leaflet-ui.js" as="script">
<style>@import '../libs/fullpage.css';</style>
<!-- leaflet-ui -->
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-ui@0.5.9/dist/leaflet-ui.js"></script>
<!-- leaflet-elevation -->
<link rel="stylesheet" href="https://unpkg.com/@raruto/leaflet-elevation@2.2.8/dist/leaflet-elevation.min.css" />
<script src="https://unpkg.com/@raruto/leaflet-elevation@2.2.8/dist/leaflet-elevation.min.js"></script>
<style>
.data-summary {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
padding: 0 45px;
}
.data-summary .summarylabel {
font-weight: bold;
}
.data-summary .summarylabel,
.data-summary .summaryvalue {
display: inline-block;
min-width: 100px;
}
.data-row {
margin-bottom: 1em;
}
.elevation-detached.elevation-collapsed .elevation-toggle-icon {
top: 1.5em;
}
</style>
</head>
<body>
<div id="map" class="leaflet-map"></div>
<div id="elevation-div" class="elevation-div"></div>
<div id="data-summary" class="data-summary">
<div class="data-row">
<span class="totlen">
<span class="summarylabel">Total Length: </span>
<span class="summaryvalue">0</span>
</span>
<span class="maxele">
<span class="summarylabel">Max Elevation: </span>
<span class="summaryvalue">0</span>
</span>
<span class="minele">
<span class="summarylabel">Min Elevation: </span>
<span class="summaryvalue">0</span>
</span>
</div>
<div class="data-row">
<span class="gain">
<span class="summarylabel">Gain: </span>
<span class="summaryvalue">0</span>
</span>
<span class="loss">
<span class="summarylabel">Loss: </span>
<span class="summaryvalue">0</span>
</span>
</div>
</div>
<script>
let opts = {
map: {
center: [41.4583, 12.7059],
zoom: 5,
fullscreenControl: false,
resizerControl: true,
preferCanvas: false,
rotate: true,
// bearing: 45,
rotateControl: {
closeOnZeroBearing: true
},
},
elevationControl: {
data: "https://raruto.github.io/leaflet-elevation/examples/demo.geojson",
options: {
theme: "lightblue-theme",
collapsed: true,
detached: true,
closeBtn: true,
elevationDiv: "#elevation-div",
summary: false,
downloadLink: false,
slope: "summary",
speed: "summary",
time: "summary",
almostOver: true,
},
},
layersControl: {
options: {
collapsed: false,
},
},
};
let map = L.map('map', opts.map);
let controlElevation = L.control.elevation(opts.elevationControl.options).addTo(map);
let controlLayer = L.control.layers(null, null, opts.layersControl.options);
controlElevation.on('eledata_loaded', ({layer, name}) => controlLayer.addTo(map) && layer.eachLayer((trkseg) => trkseg.feature.geometry.type != "Point" && controlLayer.addOverlay(trkseg, trkseg.feature && trkseg.feature.properties && trkseg.feature.properties.name || name)));
// Custom Summary info
controlElevation.on('eledata_loaded', ({layer, name, track_info}) => {
let q = document.querySelector.bind(document);
q('.totlen .summaryvalue').innerHTML = track_info.distance.toFixed(2) + " km";
q('.maxele .summaryvalue').innerHTML = track_info.elevation_max.toFixed(2) + " m";
q('.minele .summaryvalue').innerHTML = track_info.elevation_min.toFixed(2) + " m";
q('.gain .summaryvalue').innerHTML = "+" + track_info.ascent.toFixed(0) + " m";
q('.loss .summaryvalue').innerHTML = "-" + track_info.descent.toFixed(0) + " m";
});
controlElevation.load(opts.elevationControl.data);
</script>
<a href="https://github.com/Raruto/leaflet-elevation" class="view-on-github" style="position: fixed; top: 10px; left: calc(50% - 60px); z-index: 9999;"> <img alt="View on Github" src="https://raruto.github.io/img/view-on-github.png" title="View on Github" width="163"> </a>
</body>
</html>

and try to edit it as follows:

<template> <!-- wrap your custom "data-summary" around this node -->

  <div id="data-summary" class="data-summary">

    <div class="data-row">

      <span class="totlen">
        <span class="summarylabel">Total Length: </span>
        <span class="summaryvalue">0</span>
      </span>

      <span class="maxele">
        <span class="summarylabel">Max Elevation: </span>
        <span class="summaryvalue">0</span>
      </span>

      <span class="minele">
        <span class="summarylabel">Min Elevation: </span>
        <span class="summaryvalue">0</span>
      </span>

    </div>

    <div class="data-row">

      <span class="gain">
        <span class="summarylabel">Gain: </span>
        <span class="summaryvalue">0</span>
      </span>

      <span class="loss">
        <span class="summarylabel">Loss: </span>
        <span class="summaryvalue">0</span>
      </span>

    </div>

  </div>

</template>
// Inline summary (detached: false)
let controlElevation = L.control.elevation({detached: false, ...}).addTo(map);

// Custom Summary info ("inline-summary")
controlElevation.on('eledata_loaded', ({layer, name, track_info}) => {
    let q = document.querySelector.bind(document);

    q('template .totlen .summaryvalue').innerHTML = track_info.distance.toFixed(2) + " km";
    q('template .maxele .summaryvalue').innerHTML = track_info.elevation_max.toFixed(2) + " m";
    q('template .minele .summaryvalue').innerHTML = track_info.elevation_min.toFixed(2) + " m";
    q('template .gain .summaryvalue').innerHTML   = "+" + track_info.ascent.toFixed(0) + " m";
    q('template .loss .summaryvalue').innerHTML   = "-" + track_info.descent.toFixed(0) + " m";

    // append your <template> content as a DOM Element
    q('.elevation-summary.inline-summary').innerHTML = q('template').cloneNode(true).innerHTML;
});

controlElevation.load(opts.elevationControl.data);

Doing this way you can manually build the desired HTML structure instead of trying to directly altering the DOM just via JS (eg. through document.createElement or similar)

For more info:

👋 Raruto