npm - @geoblocks/elevation-profile - Versions diffs - 0.0.11 → 0.0.13 - Mend

@geoblocks/elevation-profile 0.0.11 → 0.0.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/README.md +63 -0
package/dist/elevation-profile.d.ts +6 -2
package/dist/elevation-profile.d.ts.map +1 -1
package/dist/elevation-profile.js +35 -6
package/dist/elevation-profile.js.map +1 -1
package/elevation-profile.ts +25 -7
package/package.json +8 -8
package/dist/index.600fa9d1.js +0 -5366
package/dist/index.600fa9d1.js.map +0 -1
package/dist/index.html +0 -291

package/dist/index.html DELETED Viewed

@@ -1,291 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
-    <script src="/index.600fa9d1.js" defer=""></script>
-    <style>body {
-  margin: 0;
-}
-.container {
-  margin: 50px;
-  position: relative;
-}
-#tooltip {
-  color: #fff;
-  background-color: #707070;
-  padding: 10px;
-  display: none;
-  position: absolute;
-  transform: translate(-50%, -100%);
-}
-elevation-profile {
-  width: 80%;
-  height: 300px;
-  display: block;
-}
-elevation-profile .grid.x {
-  display: none;
-}
-elevation-profile line {
-  shape-rendering: crispedges;
-}
-elevation-profile .axis .domain, .grid .domain {
-  display: none;
-}
-elevation-profile .axis line, .grid line {
-  stroke: #707070;
-}
-elevation-profile .pointer-line {
-  stroke: #707070;
-  stroke-opacity: .3;
-  stroke-width: 2px;
-  stroke-dasharray: 3 3;
-}
-elevation-profile .pointer-circle {
-  fill: #3761a4;
-  stroke: #fff;
-  stroke-width: 3px;
-}
-elevation-profile .pointer-circle-outline {
-  fill: #000;
-  fill-opacity: .2;
-}
-elevation-profile .elevation, elevation-profile .elevation.highlight {
-  stroke: #3761a4;
-  stroke-width: 2px;
-  stroke-linejoin: round;
-}
-elevation-profile .elevation.highlight {
-  stroke-width: 3px;
-}
-elevation-profile .area {
-  fill: #e6e6e6;
-  fill-opacity: .85;
-}
-</style>
-  </head>
-  <body>
-    <div class="container">
-      <div id="tooltip"></div>
-      <elevation-profile locale="de-CH"></elevation-profile>
-    </div>
-    <button id="set-lines">set lines</button>
-    <button id="reset-lines">reset lines</button>
-    <button id="save">save</button>
-    <pre id="logs"></pre>
-    <script>const profile = document.querySelector("elevation-profile");
-const tooltip = document.querySelector("#tooltip");
-const logs = document.querySelector("#logs");
-const setLines = document.querySelector("#set-lines");
-const resetLines = document.querySelector("#reset-lines");
-const save = document.querySelector("#save");
-profile.updateScale = (x, y, width, height)=>{
-    // Flattened array of [xMax,ratioYOverX].
-    const ratiosXY = [
-        0,
-        0.5,
-        0.33,
-        0.2,
-        0.1,
-        0.05
-    ];
-    const ratiosMinDist = [
-        0,
-        2000,
-        5000,
-        20000,
-        100000,
-        Infinity
-    ];
-    console.assert(ratiosXY.length === ratiosMinDist.length);
-    let i;
-    const xDomain = x.domain();
-    let yDomain = y.domain();
-    // Add padding to Y domain
-    const padding = (yDomain[1] - yDomain[0]) * 0.1;
-    y.domain([
-        yDomain[0] - padding,
-        yDomain[1] + padding
-    ]);
-    yDomain = y.domain();
-    const xMin = xDomain[0];
-    const xMax = xDomain[1];
-    const yMin = yDomain[0];
-    let yMax = yDomain[1];
-    // Search for the best XY ratio
-    let yDomainLength = 0;
-    i = 0;
-    let reverse = false;
-    // The algorithm is:
-    // - advance to reach the expected ratio;
-    // - if the computed ydomain would not be large enough, reverse direction;
-    // - go backwards until a good ydomain is found;
-    // - if none is found keep the ydomain values from d3.
-    while(true){
-        if (!reverse && xMax > ratiosMinDist[i]) {
-            // advance in the ratio table
-            ++i;
-            continue;
-        }
-        const ratioYOverX = ratiosXY[i];
-        const xResolution = (xMax - xMin) / width;
-        yDomainLength = ratioYOverX * xResolution * height;
-        if (i > 0 && yDomainLength < yMax - yMin) {
-            // not enough space with this ratio to show all the
-            // y values. Go back to try another ratio.
-            reverse = true;
-            --i;
-            continue;
-        }
-        break;
-    }
-    // Apply XY ratio
-    if (yDomainLength) {
-        const yMean = (yMax + yMin) / 2;
-        const yHalfDomain = yDomainLength / 2;
-        y.domain([
-            yMean - yHalfDomain,
-            yMean + yHalfDomain
-        ]);
-    }
-    // Lower bound for y-axis
-    if (y.domain()[0] < 0) {
-        const shift = 0 - y.domain()[0];
-        // For yLowerBound=0 and y0=-50, y is shifted 50m up
-        y.domain([
-            0,
-            y.domain()[1] + shift
-        ]);
-    }
-};
-save.addEventListener("click", ()=>{
-    const svg = profile.innerHTML;
-    const blob = new Blob([
-        svg
-    ], {
-        type: "image/svg+xml"
-    });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = "elevation.svg";
-    a.click();
-});
-setLines.addEventListener("click", ()=>{
-    profile.lines = [
-        [
-            [
-                740073,
-                5905947,
-                434,
-                0
-            ],
-            [
-                740073,
-                5905947,
-                485,
-                25
-            ],
-            [
-                740073,
-                5905947,
-                490,
-                60
-            ],
-            [
-                740072,
-                5905940,
-                512,
-                100
-            ]
-        ],
-        [
-            [
-                740007,
-                5905729,
-                490,
-                155
-            ],
-            [
-                740000,
-                5905709,
-                489,
-                169
-            ],
-            [
-                739997,
-                5905704,
-                501,
-                173
-            ],
-            [
-                739997,
-                5905704,
-                512,
-                180
-            ],
-            [
-                739997,
-                5905704,
-                501,
-                210
-            ]
-        ],
-        [
-            [
-                740007,
-                5905729,
-                512,
-                255
-            ],
-            [
-                740000,
-                5905709,
-                505,
-                369
-            ],
-            [
-                739997,
-                5905704,
-                501,
-                390
-            ]
-        ]
-    ];
-});
-resetLines.addEventListener("click", ()=>{
-    profile.lines = [];
-});
-profile.addEventListener("over", (event)=>{
-    logs.textContent = JSON.stringify(event.detail, null, 2);
-    tooltip.style.display = "block";
-    tooltip.textContent = `${event.detail.coordinate[2]} m`;
-    tooltip.style.left = `${event.detail.position.x}px`;
-    tooltip.style.top = `${event.detail.position.y - 20}px`;
-});
-profile.addEventListener("out", (event)=>{
-    logs.textContent = "";
-    tooltip.style.display = "none";
-});
-</script>
-  </body>
-</html>