@geoblocks/elevation-profile 0.0.8 → 0.0.10

package/dist/elevation-profile.d.ts

@@ -1,6 +1,8 @@
 import { LitElement, PropertyValues } from "lit";
 import { scaleLinear } from "d3-scale";
 export class ElevationProfile extends LitElement {
+    tolerance: number;
+    locale: string;
     lines: number[][][];
     margin: {
         top: number;
@@ -17,6 +19,7 @@ export class ElevationProfile extends LitElement {
         y: number;
     };
     updateScale(x: scaleLinear, y: scaleLinear, width: number, height: number): void;
+    updated(changedProperties: PropertyValues): void;
     willUpdate(changedProperties: PropertyValues): void;
     render(): import("lit-html").TemplateResult<2>;
     firstUpdated(): void;

package/dist/elevation-profile.d.ts.map

@@ -1 +1 @@
-{"mappings":";;AAiBA,6BAC8B,SAAQ,UAAU;IACrB,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,CAAM;IACxB,MAAM;;;;;MAA8C;IACpD,QAAQ;;;MAAmB;IAE5C,OAAO;;;MAAgB;IAgCzB,WAAW,CAAC,CAAC,EAAE,WAAW,EAAE,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI;IAE9E,UAAU,CAAC,iBAAiB,EAAE,cAAc;IAe5C,MAAM;IAmEN,YAAY;IA+CZ,gBAAgB;CAG1B;AAGD,QAAQ,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,gBAAgB,CAAC;KACvC;CACF","sources":["elevation-profile.ts"],"sourcesContent":["import {LitElement, svg} from 'lit';\nimport {customElement, state, property} from 'lit/decorators.js';\nimport {ResizeController} from '@lit-labs/observers/resize-controller.js';\nimport type {PropertyValues} from 'lit';\n\nimport {extent, bisector} from 'd3-array';\nimport {scaleLinear} from 'd3-scale';\nimport {line, area} from 'd3-shape';\nimport {axisBottom, axisLeft} from 'd3-axis';\nimport {select, pointer} from 'd3-selection';\n\ntype PlotPoint = {\n  x: number;\n  y: number;\n  coordinate: number[];\n};\n\n@customElement('elevation-profile')\nexport class ElevationProfile extends LitElement {\n  @property({type: Array}) lines: number[][][] = [];\n  @property({type: Object}) margin = {top: 20, right: 20, bottom: 20, left: 40};\n  @property({type: Object}) tickSize = {x: 100, y: 40};\n\n  @state() pointer = {x: 0, y: 0};\n  private _resizeController = new ResizeController(this, {});\n\n  private plotData: PlotPoint[] = [];\n  private scaleX = scaleLinear();\n  private scaleY = scaleLinear();\n\n  private bisectDistance = bisector((point: PlotPoint) => point.x);\n\n  private line = line()\n    .defined((point: PlotPoint) => !isNaN(point.y))\n    .x((point: PlotPoint) => this.scaleX(point.x))\n    .y((point: PlotPoint) => this.scaleY(point.y));\n  private area = area()\n    .defined((point: PlotPoint) => !isNaN(point.y))\n    .x((point: PlotPoint) => this.scaleX(point.x))\n    .y1((point: PlotPoint) => this.scaleY(point.y));\n  private xAxis = axisBottom(this.scaleX).tickFormat((value: number) => this.tickFormat(value));\n  private yAxis = axisLeft(this.scaleY).tickFormat((value: number) => this.meterFormat.format(value));\n  private xGrid = axisBottom(this.scaleX).tickFormat(() => '');\n  private yGrid = axisLeft(this.scaleY).tickFormat(() => '');\n\n  private meterFormat = Intl.NumberFormat('de-CH', {\n    style: 'unit',\n    unit: 'meter',\n  });\n\n  private kilometerFormat = Intl.NumberFormat('de-CH', {\n    style: 'unit',\n    unit: 'kilometer',\n  });\n\n  public updateScale(x: scaleLinear, y: scaleLinear, width: number, height: number): void {}\n\n  override willUpdate(changedProperties: PropertyValues) {\n    if (changedProperties.has('lines')) {\n      this.plotData.length = 0;\n      for (const line of this.lines) {\n        this.plotData.push(...line.map((coordinate) => ({x: coordinate[3], y: coordinate[2], coordinate})));\n        this.plotData.push({x: line[line.length - 1][3], y: NaN, coordinate: []});\n      }\n\n      this.scaleX.domain(extent(this.plotData, (data: PlotPoint) => data.x));\n      this.scaleY.domain(extent(this.plotData, (data: PlotPoint) => data.y)).nice();\n\n      this.updateScale(this.scaleX, this.scaleY, this.offsetWidth, this.offsetHeight);\n    }\n  }\n\n  override render() {\n    const width = this.offsetWidth;\n    const height = this.offsetHeight;\n\n    this.scaleX.range([this.margin.left, width - this.margin.right]);\n    this.scaleY.range([height - this.margin.bottom, this.margin.top]);\n\n    this.area.y0(height - this.margin.bottom);\n\n    this.yGrid.tickSize(-width + this.margin.left + this.margin.right);\n    this.xGrid.tickSize(height - this.margin.top - this.margin.bottom);\n\n    const xTicks = width / this.tickSize.x;\n    const yTicks = height / this.tickSize.y;\n    this.xAxis.ticks(xTicks);\n    this.xGrid.ticks(xTicks);\n    this.yAxis.ticks(yTicks);\n    this.yGrid.ticks(yTicks);\n\n    select(this.querySelector('.axis.x')).call(this.xAxis);\n    select(this.querySelector('.axis.y')).call(this.yAxis);\n    select(this.querySelector('.grid.x')).call(this.xGrid);\n    select(this.querySelector('.grid.y')).call(this.yGrid);\n\n    return svg`\n      <svg width=\"${width}\" height=\"${height}\" xmlns=\"http://www.w3.org/2000/svg\">\n        <g class=\"grid y\" transform=\"translate(${this.margin.left}, 0)\" />\n        <g class=\"grid x\" transform=\"translate(0, ${this.margin.bottom})\" />\n        <g class=\"axis x\" transform=\"translate(0, ${height - this.margin.bottom})\" />\n        <g class=\"axis y\" transform=\"translate(${this.margin.left}, 0)\" />\n        <path class=\"area\" d=\"${this.area(this.plotData)}\" />\n        <path class=\"elevation\" d=\"${this.line(this.plotData)}\" fill=\"none\" />\n        <g style=\"visibility: ${this.pointer.x > 0 ? 'visible' : 'hidden'}\">\n          <path class=\"elevation highlight\" d=\"${this.line(this.plotData)}\" fill=\"none\"\n            clip-path=\"polygon(0 0, ${this.pointer.x - this.margin.left} 0, ${this.pointer.x - this.margin.left} 100%, 0 100%)\"\n          />\n          <line\n            class=\"pointer-line y\"\n            x1=\"${this.pointer.x}\"\n            y1=\"${this.margin.top}\"\n            x2=\"${this.pointer.x}\"\n            y2=\"${height - this.margin.bottom}\"\n          />\n          <circle class=\"pointer-circle-outline\" cx=\"${this.pointer.x}\" cy=\"${this.pointer.y}\" r=\"16\"/>\n          <circle class=\"pointer-circle\" cx=\"${this.pointer.x}\" cy=\"${this.pointer.y}\" r=\"6\"/>\n        </g>\n        <rect\n          width=\"${width}\"\n          height=\"${height}\"\n          fill=\"none\"\n          pointer-events=\"all\"\n          style=\"display: block; touch-action: none;\"\n          @pointermove=\"${this.pointerMove}\"\n          @pointerout=\"${this.pointerOut}\"\n        />\n      </svg>\n    `;\n  }\n\n  private tickFormat(value: number) {\n    if (value < 1000) {\n      return this.meterFormat.format(value);\n    } else {\n      return this.kilometerFormat.format(value / 1000);\n    }\n  }\n\n  override firstUpdated() {\n    // FIXME: because the ref element are used before render is done, we need to force an update\n    this.requestUpdate();\n  }\n\n  private pointerMove(event: PointerEvent) {\n    const pointerDistance = this.scaleX.invert(pointer(event)[0]);\n    const index = Math.min(this.bisectDistance.left(this.plotData, pointerDistance), this.plotData.length - 1);\n\n    if (index < 0) {\n      return;\n    }\n    // FIXME:\n    // var d0 = this.plotData[index - 1]\n    // var d1 = this.plotData[index];\n    // // work out which date value is closest to the mouse\n    // var d = mouseDate - d0[0] > d1[0] - mouseDate ? d1 : d0;\n\n    const data = this.plotData[index];\n\n    if (isNaN(data.y)) {\n      return;\n    }\n\n    this.pointer = {\n      x: this.scaleX(data.x),\n      y: this.scaleY(data.y),\n    };\n\n    this.dispatchEvent(\n      new CustomEvent('over', {\n        detail: {\n          coordinate: this.plotData[index].coordinate,\n          position: this.pointer\n        }\n      }),\n    );\n  }\n\n  private pointerOut() {\n    this.pointer = {\n      x: 0,\n      y: 0,\n    };\n    this.dispatchEvent(new CustomEvent('out'));\n  }\n\n  override createRenderRoot() {\n    return this;\n  }\n}\n\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'elevation-profile': ElevationProfile;\n  }\n}\n"],"names":[],"version":3,"file":"elevation-profile.d.ts.map"}
+{"mappings":";;AAmBA,6BAC8B,SAAQ,UAAU;IACpB,SAAS,SAAK;IACd,MAAM,SAAsB;IAC7B,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,CAAM;IACxB,MAAM;;;;;MAA8C;IACpD,QAAQ;;;MAAmB;IAE5C,OAAO;;;MAAgB;IAyBzB,WAAW,CAAC,CAAC,EAAE,WAAW,EAAE,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI;IAE9E,OAAO,CAAC,iBAAiB,EAAE,cAAc;IAczC,UAAU,CAAC,iBAAiB,EAAE,cAAc;IAgB5C,MAAM;IAmEN,YAAY;IA+CZ,gBAAgB;CAG1B;AAGD,QAAQ,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,gBAAgB,CAAC;KACvC;CACF","sources":["elevation-profile.ts"],"sourcesContent":["import {LitElement, svg} from 'lit';\nimport {customElement, state, property} from 'lit/decorators.js';\nimport {ResizeController} from '@lit-labs/observers/resize-controller.js';\nimport type {PropertyValues} from 'lit';\n\nimport {extent, bisector} from 'd3-array';\nimport {scaleLinear} from 'd3-scale';\nimport {line, area} from 'd3-shape';\nimport {axisBottom, axisLeft} from 'd3-axis';\nimport {select, pointer} from 'd3-selection';\n\nimport simplify from 'simplify-js';\n\ntype PlotPoint = {\n  x: number;\n  y: number;\n  coordinate: number[];\n};\n\n@customElement('elevation-profile')\nexport class ElevationProfile extends LitElement {\n  @property({type: Number}) tolerance = 1;\n  @property({type: String}) locale = navigator.language;\n  @property({type: Array}) lines: number[][][] = [];\n  @property({type: Object}) margin = {top: 20, right: 20, bottom: 20, left: 40};\n  @property({type: Object}) tickSize = {x: 100, y: 40};\n\n  @state() pointer = {x: 0, y: 0};\n  private _resizeController = new ResizeController(this, {});\n\n  private plotData: PlotPoint[] = [];\n  private scaleX = scaleLinear();\n  private scaleY = scaleLinear();\n\n  private bisectDistance = bisector((point: PlotPoint) => point.x);\n\n  private line = line()\n    .defined((point: PlotPoint) => !isNaN(point.y))\n    .x((point: PlotPoint) => this.scaleX(point.x))\n    .y((point: PlotPoint) => this.scaleY(point.y));\n  private area = area()\n    .defined((point: PlotPoint) => !isNaN(point.y))\n    .x((point: PlotPoint) => this.scaleX(point.x))\n    .y1((point: PlotPoint) => this.scaleY(point.y));\n  private xAxis = axisBottom(this.scaleX).tickFormat((value: number) => this.tickFormat(value));\n  private yAxis = axisLeft(this.scaleY).tickFormat((value: number) => this.meterFormat!.format(value));\n  private xGrid = axisBottom(this.scaleX).tickFormat(() => '');\n  private yGrid = axisLeft(this.scaleY).tickFormat(() => '');\n\n  private meterFormat: Intl.NumberFormat | null = null;\n  private kilometerFormat: Intl.NumberFormat | null = null;\n\n  public updateScale(x: scaleLinear, y: scaleLinear, width: number, height: number): void {}\n\n  override updated(changedProperties: PropertyValues) {\n    if (changedProperties.has('locale')) {\n      this.meterFormat = new Intl.NumberFormat(this.locale, {\n        style: 'unit',\n        unit: 'meter',\n      });\n\n      this.kilometerFormat = new Intl.NumberFormat(this.locale, {\n        style: 'unit',\n        unit: 'kilometer',\n      });\n    }\n  }\n\n  override willUpdate(changedProperties: PropertyValues) {\n    if (changedProperties.has('lines')) {\n      this.plotData.length = 0;\n      for (const line of this.lines) {\n        const data = line.map((coordinate) => ({x: coordinate[3], y: coordinate[2], coordinate}));\n        this.plotData.push(...simplify(data, this.tolerance));\n        this.plotData.push({x: line[line.length - 1][3], y: NaN, coordinate: []});\n      }\n\n      this.scaleX.domain(extent(this.plotData, (data: PlotPoint) => data.x));\n      this.scaleY.domain(extent(this.plotData, (data: PlotPoint) => data.y)).nice();\n\n      this.updateScale(this.scaleX, this.scaleY, this.offsetWidth, this.offsetHeight);\n    }\n  }\n\n  override render() {\n    const width = this.offsetWidth;\n    const height = this.offsetHeight;\n\n    this.scaleX.range([this.margin.left, width - this.margin.right]);\n    this.scaleY.range([height - this.margin.bottom, this.margin.top]);\n\n    this.area.y0(height - this.margin.bottom);\n\n    this.yGrid.tickSize(-width + this.margin.left + this.margin.right);\n    this.xGrid.tickSize(height - this.margin.top - this.margin.bottom);\n\n    const xTicks = width / this.tickSize.x;\n    const yTicks = height / this.tickSize.y;\n    this.xAxis.ticks(xTicks);\n    this.xGrid.ticks(xTicks);\n    this.yAxis.ticks(yTicks);\n    this.yGrid.ticks(yTicks);\n\n    select(this.querySelector('.axis.x')).call(this.xAxis);\n    select(this.querySelector('.axis.y')).call(this.yAxis);\n    select(this.querySelector('.grid.x')).call(this.xGrid);\n    select(this.querySelector('.grid.y')).call(this.yGrid);\n\n    return svg`\n      <svg width=\"${width}\" height=\"${height}\" xmlns=\"http://www.w3.org/2000/svg\">\n        <g class=\"grid y\" transform=\"translate(${this.margin.left}, 0)\" />\n        <g class=\"grid x\" transform=\"translate(0, ${this.margin.bottom})\" />\n        <g class=\"axis x\" transform=\"translate(0, ${height - this.margin.bottom})\" />\n        <g class=\"axis y\" transform=\"translate(${this.margin.left}, 0)\" />\n        <path class=\"area\" d=\"${this.area(this.plotData)}\" />\n        <path class=\"elevation\" d=\"${this.line(this.plotData)}\" fill=\"none\" />\n        <g style=\"visibility: ${this.pointer.x > 0 ? 'visible' : 'hidden'}\">\n          <path class=\"elevation highlight\" d=\"${this.line(this.plotData)}\" fill=\"none\"\n            clip-path=\"polygon(0 0, ${this.pointer.x - this.margin.left} 0, ${this.pointer.x - this.margin.left} 100%, 0 100%)\"\n          />\n          <line\n            class=\"pointer-line y\"\n            x1=\"${this.pointer.x}\"\n            y1=\"${this.margin.top}\"\n            x2=\"${this.pointer.x}\"\n            y2=\"${height - this.margin.bottom}\"\n          />\n          <circle class=\"pointer-circle-outline\" cx=\"${this.pointer.x}\" cy=\"${this.pointer.y}\" r=\"16\"/>\n          <circle class=\"pointer-circle\" cx=\"${this.pointer.x}\" cy=\"${this.pointer.y}\" r=\"6\"/>\n        </g>\n        <rect\n          width=\"${width}\"\n          height=\"${height}\"\n          fill=\"none\"\n          pointer-events=\"all\"\n          style=\"display: block; touch-action: none;\"\n          @pointermove=\"${this.pointerMove}\"\n          @pointerout=\"${this.pointerOut}\"\n        />\n      </svg>\n    `;\n  }\n\n  private tickFormat(value: number) {\n    if (value < 1000) {\n      return this.meterFormat!.format(value);\n    } else {\n      return this.kilometerFormat!.format(value / 1000);\n    }\n  }\n\n  override firstUpdated() {\n    // FIXME: because the ref element are used before render is done, we need to force an update\n    this.requestUpdate();\n  }\n\n  private pointerMove(event: PointerEvent) {\n    const pointerDistance = this.scaleX.invert(pointer(event)[0]);\n    const index = Math.min(this.bisectDistance.left(this.plotData, pointerDistance), this.plotData.length - 1);\n\n    if (index < 0) {\n      return;\n    }\n    // FIXME:\n    // var d0 = this.plotData[index - 1]\n    // var d1 = this.plotData[index];\n    // // work out which date value is closest to the mouse\n    // var d = mouseDate - d0[0] > d1[0] - mouseDate ? d1 : d0;\n\n    const data = this.plotData[index];\n\n    if (isNaN(data.y)) {\n      return;\n    }\n\n    this.pointer = {\n      x: this.scaleX(data.x),\n      y: this.scaleY(data.y),\n    };\n\n    this.dispatchEvent(\n      new CustomEvent('over', {\n        detail: {\n          coordinate: this.plotData[index].coordinate,\n          position: this.pointer\n        }\n      }),\n    );\n  }\n\n  private pointerOut() {\n    this.pointer = {\n      x: 0,\n      y: 0,\n    };\n    this.dispatchEvent(new CustomEvent('out'));\n  }\n\n  override createRenderRoot() {\n    return this;\n  }\n}\n\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'elevation-profile': ElevationProfile;\n  }\n}\n"],"names":[],"version":3,"file":"elevation-profile.d.ts.map"}

package/dist/elevation-profile.js

@@ -6,6 +6,8 @@ import {scaleLinear as $agntW$scaleLinear} from "d3-scale";
 import {line as $agntW$line, area as $agntW$area} from "d3-shape";
 import {axisBottom as $agntW$axisBottom, axisLeft as $agntW$axisLeft} from "d3-axis";
 import {select as $agntW$select, pointer as $agntW$pointer} from "d3-selection";
+import $agntW$simplifyjs from "simplify-js";
+
 
 
 
@@ -24,6 +26,8 @@ var $916babf1e6dc2c08$var$__decorate = undefined && undefined.__decorate || func
 let $916babf1e6dc2c08$export$14ab3917b98d786a = class ElevationProfile extends (0, $agntW$LitElement) {
     constructor(){
         super(...arguments);
+        this.tolerance = 1;
+        this.locale = navigator.language;
         this.lines = [];
         this.margin = {
             top: 20,
@@ -50,25 +54,32 @@ let $916babf1e6dc2c08$export$14ab3917b98d786a = class ElevationProfile extends (
         this.yAxis = (0, $agntW$axisLeft)(this.scaleY).tickFormat((value)=>this.meterFormat.format(value));
         this.xGrid = (0, $agntW$axisBottom)(this.scaleX).tickFormat(()=>"");
         this.yGrid = (0, $agntW$axisLeft)(this.scaleY).tickFormat(()=>"");
-        this.meterFormat = Intl.NumberFormat("de-CH", {
-            style: "unit",
-            unit: "meter"
-        });
-        this.kilometerFormat = Intl.NumberFormat("de-CH", {
-            style: "unit",
-            unit: "kilometer"
-        });
+        this.meterFormat = null;
+        this.kilometerFormat = null;
     }
     updateScale(x, y, width, height) {}
+    updated(changedProperties) {
+        if (changedProperties.has("locale")) {
+            this.meterFormat = new Intl.NumberFormat(this.locale, {
+                style: "unit",
+                unit: "meter"
+            });
+            this.kilometerFormat = new Intl.NumberFormat(this.locale, {
+                style: "unit",
+                unit: "kilometer"
+            });
+        }
+    }
     willUpdate(changedProperties) {
         if (changedProperties.has("lines")) {
             this.plotData.length = 0;
             for (const line of this.lines){
-                this.plotData.push(...line.map((coordinate)=>({
+                const data = line.map((coordinate)=>({
                         x: coordinate[3],
                         y: coordinate[2],
                         coordinate: coordinate
-                    })));
+                    }));
+                this.plotData.push(...(0, $agntW$simplifyjs)(data, this.tolerance));
                 this.plotData.push({
                     x: line[line.length - 1][3],
                     y: NaN,
@@ -179,6 +190,16 @@ let $916babf1e6dc2c08$export$14ab3917b98d786a = class ElevationProfile extends (
         return this;
     }
 };
+$916babf1e6dc2c08$var$__decorate([
+    (0, $agntW$property)({
+        type: Number
+    })
+], $916babf1e6dc2c08$export$14ab3917b98d786a.prototype, "tolerance", void 0);
+$916babf1e6dc2c08$var$__decorate([
+    (0, $agntW$property)({
+        type: String
+    })
+], $916babf1e6dc2c08$export$14ab3917b98d786a.prototype, "locale", void 0);
 $916babf1e6dc2c08$var$__decorate([
     (0, $agntW$property)({
         type: Array

package/dist/elevation-profile.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["elevation-profile.ts"],"sourcesContent":["import {LitElement, svg} from 'lit';\nimport {customElement, state, property} from 'lit/decorators.js';\nimport {ResizeController} from '@lit-labs/observers/resize-controller.js';\nimport type {PropertyValues} from 'lit';\n\nimport {extent, bisector} from 'd3-array';\nimport {scaleLinear} from 'd3-scale';\nimport {line, area} from 'd3-shape';\nimport {axisBottom, axisLeft} from 'd3-axis';\nimport {select, pointer} from 'd3-selection';\n\ntype PlotPoint = {\n  x: number;\n  y: number;\n  coordinate: number[];\n};\n\n@customElement('elevation-profile')\nexport class ElevationProfile extends LitElement {\n  @property({type: Array}) lines: number[][][] = [];\n  @property({type: Object}) margin = {top: 20, right: 20, bottom: 20, left: 40};\n  @property({type: Object}) tickSize = {x: 100, y: 40};\n\n  @state() pointer = {x: 0, y: 0};\n  private _resizeController = new ResizeController(this, {});\n\n  private plotData: PlotPoint[] = [];\n  private scaleX = scaleLinear();\n  private scaleY = scaleLinear();\n\n  private bisectDistance = bisector((point: PlotPoint) => point.x);\n\n  private line = line()\n    .defined((point: PlotPoint) => !isNaN(point.y))\n    .x((point: PlotPoint) => this.scaleX(point.x))\n    .y((point: PlotPoint) => this.scaleY(point.y));\n  private area = area()\n    .defined((point: PlotPoint) => !isNaN(point.y))\n    .x((point: PlotPoint) => this.scaleX(point.x))\n    .y1((point: PlotPoint) => this.scaleY(point.y));\n  private xAxis = axisBottom(this.scaleX).tickFormat((value: number) => this.tickFormat(value));\n  private yAxis = axisLeft(this.scaleY).tickFormat((value: number) => this.meterFormat.format(value));\n  private xGrid = axisBottom(this.scaleX).tickFormat(() => '');\n  private yGrid = axisLeft(this.scaleY).tickFormat(() => '');\n\n  private meterFormat = Intl.NumberFormat('de-CH', {\n    style: 'unit',\n    unit: 'meter',\n  });\n\n  private kilometerFormat = Intl.NumberFormat('de-CH', {\n    style: 'unit',\n    unit: 'kilometer',\n  });\n\n  public updateScale(x: scaleLinear, y: scaleLinear, width: number, height: number): void {}\n\n  override willUpdate(changedProperties: PropertyValues) {\n    if (changedProperties.has('lines')) {\n      this.plotData.length = 0;\n      for (const line of this.lines) {\n        this.plotData.push(...line.map((coordinate) => ({x: coordinate[3], y: coordinate[2], coordinate})));\n        this.plotData.push({x: line[line.length - 1][3], y: NaN, coordinate: []});\n      }\n\n      this.scaleX.domain(extent(this.plotData, (data: PlotPoint) => data.x));\n      this.scaleY.domain(extent(this.plotData, (data: PlotPoint) => data.y)).nice();\n\n      this.updateScale(this.scaleX, this.scaleY, this.offsetWidth, this.offsetHeight);\n    }\n  }\n\n  override render() {\n    const width = this.offsetWidth;\n    const height = this.offsetHeight;\n\n    this.scaleX.range([this.margin.left, width - this.margin.right]);\n    this.scaleY.range([height - this.margin.bottom, this.margin.top]);\n\n    this.area.y0(height - this.margin.bottom);\n\n    this.yGrid.tickSize(-width + this.margin.left + this.margin.right);\n    this.xGrid.tickSize(height - this.margin.top - this.margin.bottom);\n\n    const xTicks = width / this.tickSize.x;\n    const yTicks = height / this.tickSize.y;\n    this.xAxis.ticks(xTicks);\n    this.xGrid.ticks(xTicks);\n    this.yAxis.ticks(yTicks);\n    this.yGrid.ticks(yTicks);\n\n    select(this.querySelector('.axis.x')).call(this.xAxis);\n    select(this.querySelector('.axis.y')).call(this.yAxis);\n    select(this.querySelector('.grid.x')).call(this.xGrid);\n    select(this.querySelector('.grid.y')).call(this.yGrid);\n\n    return svg`\n      <svg width=\"${width}\" height=\"${height}\" xmlns=\"http://www.w3.org/2000/svg\">\n        <g class=\"grid y\" transform=\"translate(${this.margin.left}, 0)\" />\n        <g class=\"grid x\" transform=\"translate(0, ${this.margin.bottom})\" />\n        <g class=\"axis x\" transform=\"translate(0, ${height - this.margin.bottom})\" />\n        <g class=\"axis y\" transform=\"translate(${this.margin.left}, 0)\" />\n        <path class=\"area\" d=\"${this.area(this.plotData)}\" />\n        <path class=\"elevation\" d=\"${this.line(this.plotData)}\" fill=\"none\" />\n        <g style=\"visibility: ${this.pointer.x > 0 ? 'visible' : 'hidden'}\">\n          <path class=\"elevation highlight\" d=\"${this.line(this.plotData)}\" fill=\"none\"\n            clip-path=\"polygon(0 0, ${this.pointer.x - this.margin.left} 0, ${this.pointer.x - this.margin.left} 100%, 0 100%)\"\n          />\n          <line\n            class=\"pointer-line y\"\n            x1=\"${this.pointer.x}\"\n            y1=\"${this.margin.top}\"\n            x2=\"${this.pointer.x}\"\n            y2=\"${height - this.margin.bottom}\"\n          />\n          <circle class=\"pointer-circle-outline\" cx=\"${this.pointer.x}\" cy=\"${this.pointer.y}\" r=\"16\"/>\n          <circle class=\"pointer-circle\" cx=\"${this.pointer.x}\" cy=\"${this.pointer.y}\" r=\"6\"/>\n        </g>\n        <rect\n          width=\"${width}\"\n          height=\"${height}\"\n          fill=\"none\"\n          pointer-events=\"all\"\n          style=\"display: block; touch-action: none;\"\n          @pointermove=\"${this.pointerMove}\"\n          @pointerout=\"${this.pointerOut}\"\n        />\n      </svg>\n    `;\n  }\n\n  private tickFormat(value: number) {\n    if (value < 1000) {\n      return this.meterFormat.format(value);\n    } else {\n      return this.kilometerFormat.format(value / 1000);\n    }\n  }\n\n  override firstUpdated() {\n    // FIXME: because the ref element are used before render is done, we need to force an update\n    this.requestUpdate();\n  }\n\n  private pointerMove(event: PointerEvent) {\n    const pointerDistance = this.scaleX.invert(pointer(event)[0]);\n    const index = Math.min(this.bisectDistance.left(this.plotData, pointerDistance), this.plotData.length - 1);\n\n    if (index < 0) {\n      return;\n    }\n    // FIXME:\n    // var d0 = this.plotData[index - 1]\n    // var d1 = this.plotData[index];\n    // // work out which date value is closest to the mouse\n    // var d = mouseDate - d0[0] > d1[0] - mouseDate ? d1 : d0;\n\n    const data = this.plotData[index];\n\n    if (isNaN(data.y)) {\n      return;\n    }\n\n    this.pointer = {\n      x: this.scaleX(data.x),\n      y: this.scaleY(data.y),\n    };\n\n    this.dispatchEvent(\n      new CustomEvent('over', {\n        detail: {\n          coordinate: this.plotData[index].coordinate,\n          position: this.pointer\n        }\n      }),\n    );\n  }\n\n  private pointerOut() {\n    this.pointer = {\n      x: 0,\n      y: 0,\n    };\n    this.dispatchEvent(new CustomEvent('out'));\n  }\n\n  override createRenderRoot() {\n    return this;\n  }\n}\n\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'elevation-profile': ElevationProfile;\n  }\n}\n"],"names":[],"version":3,"file":"elevation-profile.js.map"}
+{"mappings":"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","sources":["elevation-profile.ts"],"sourcesContent":["import {LitElement, svg} from 'lit';\nimport {customElement, state, property} from 'lit/decorators.js';\nimport {ResizeController} from '@lit-labs/observers/resize-controller.js';\nimport type {PropertyValues} from 'lit';\n\nimport {extent, bisector} from 'd3-array';\nimport {scaleLinear} from 'd3-scale';\nimport {line, area} from 'd3-shape';\nimport {axisBottom, axisLeft} from 'd3-axis';\nimport {select, pointer} from 'd3-selection';\n\nimport simplify from 'simplify-js';\n\ntype PlotPoint = {\n  x: number;\n  y: number;\n  coordinate: number[];\n};\n\n@customElement('elevation-profile')\nexport class ElevationProfile extends LitElement {\n  @property({type: Number}) tolerance = 1;\n  @property({type: String}) locale = navigator.language;\n  @property({type: Array}) lines: number[][][] = [];\n  @property({type: Object}) margin = {top: 20, right: 20, bottom: 20, left: 40};\n  @property({type: Object}) tickSize = {x: 100, y: 40};\n\n  @state() pointer = {x: 0, y: 0};\n  private _resizeController = new ResizeController(this, {});\n\n  private plotData: PlotPoint[] = [];\n  private scaleX = scaleLinear();\n  private scaleY = scaleLinear();\n\n  private bisectDistance = bisector((point: PlotPoint) => point.x);\n\n  private line = line()\n    .defined((point: PlotPoint) => !isNaN(point.y))\n    .x((point: PlotPoint) => this.scaleX(point.x))\n    .y((point: PlotPoint) => this.scaleY(point.y));\n  private area = area()\n    .defined((point: PlotPoint) => !isNaN(point.y))\n    .x((point: PlotPoint) => this.scaleX(point.x))\n    .y1((point: PlotPoint) => this.scaleY(point.y));\n  private xAxis = axisBottom(this.scaleX).tickFormat((value: number) => this.tickFormat(value));\n  private yAxis = axisLeft(this.scaleY).tickFormat((value: number) => this.meterFormat!.format(value));\n  private xGrid = axisBottom(this.scaleX).tickFormat(() => '');\n  private yGrid = axisLeft(this.scaleY).tickFormat(() => '');\n\n  private meterFormat: Intl.NumberFormat | null = null;\n  private kilometerFormat: Intl.NumberFormat | null = null;\n\n  public updateScale(x: scaleLinear, y: scaleLinear, width: number, height: number): void {}\n\n  override updated(changedProperties: PropertyValues) {\n    if (changedProperties.has('locale')) {\n      this.meterFormat = new Intl.NumberFormat(this.locale, {\n        style: 'unit',\n        unit: 'meter',\n      });\n\n      this.kilometerFormat = new Intl.NumberFormat(this.locale, {\n        style: 'unit',\n        unit: 'kilometer',\n      });\n    }\n  }\n\n  override willUpdate(changedProperties: PropertyValues) {\n    if (changedProperties.has('lines')) {\n      this.plotData.length = 0;\n      for (const line of this.lines) {\n        const data = line.map((coordinate) => ({x: coordinate[3], y: coordinate[2], coordinate}));\n        this.plotData.push(...simplify(data, this.tolerance));\n        this.plotData.push({x: line[line.length - 1][3], y: NaN, coordinate: []});\n      }\n\n      this.scaleX.domain(extent(this.plotData, (data: PlotPoint) => data.x));\n      this.scaleY.domain(extent(this.plotData, (data: PlotPoint) => data.y)).nice();\n\n      this.updateScale(this.scaleX, this.scaleY, this.offsetWidth, this.offsetHeight);\n    }\n  }\n\n  override render() {\n    const width = this.offsetWidth;\n    const height = this.offsetHeight;\n\n    this.scaleX.range([this.margin.left, width - this.margin.right]);\n    this.scaleY.range([height - this.margin.bottom, this.margin.top]);\n\n    this.area.y0(height - this.margin.bottom);\n\n    this.yGrid.tickSize(-width + this.margin.left + this.margin.right);\n    this.xGrid.tickSize(height - this.margin.top - this.margin.bottom);\n\n    const xTicks = width / this.tickSize.x;\n    const yTicks = height / this.tickSize.y;\n    this.xAxis.ticks(xTicks);\n    this.xGrid.ticks(xTicks);\n    this.yAxis.ticks(yTicks);\n    this.yGrid.ticks(yTicks);\n\n    select(this.querySelector('.axis.x')).call(this.xAxis);\n    select(this.querySelector('.axis.y')).call(this.yAxis);\n    select(this.querySelector('.grid.x')).call(this.xGrid);\n    select(this.querySelector('.grid.y')).call(this.yGrid);\n\n    return svg`\n      <svg width=\"${width}\" height=\"${height}\" xmlns=\"http://www.w3.org/2000/svg\">\n        <g class=\"grid y\" transform=\"translate(${this.margin.left}, 0)\" />\n        <g class=\"grid x\" transform=\"translate(0, ${this.margin.bottom})\" />\n        <g class=\"axis x\" transform=\"translate(0, ${height - this.margin.bottom})\" />\n        <g class=\"axis y\" transform=\"translate(${this.margin.left}, 0)\" />\n        <path class=\"area\" d=\"${this.area(this.plotData)}\" />\n        <path class=\"elevation\" d=\"${this.line(this.plotData)}\" fill=\"none\" />\n        <g style=\"visibility: ${this.pointer.x > 0 ? 'visible' : 'hidden'}\">\n          <path class=\"elevation highlight\" d=\"${this.line(this.plotData)}\" fill=\"none\"\n            clip-path=\"polygon(0 0, ${this.pointer.x - this.margin.left} 0, ${this.pointer.x - this.margin.left} 100%, 0 100%)\"\n          />\n          <line\n            class=\"pointer-line y\"\n            x1=\"${this.pointer.x}\"\n            y1=\"${this.margin.top}\"\n            x2=\"${this.pointer.x}\"\n            y2=\"${height - this.margin.bottom}\"\n          />\n          <circle class=\"pointer-circle-outline\" cx=\"${this.pointer.x}\" cy=\"${this.pointer.y}\" r=\"16\"/>\n          <circle class=\"pointer-circle\" cx=\"${this.pointer.x}\" cy=\"${this.pointer.y}\" r=\"6\"/>\n        </g>\n        <rect\n          width=\"${width}\"\n          height=\"${height}\"\n          fill=\"none\"\n          pointer-events=\"all\"\n          style=\"display: block; touch-action: none;\"\n          @pointermove=\"${this.pointerMove}\"\n          @pointerout=\"${this.pointerOut}\"\n        />\n      </svg>\n    `;\n  }\n\n  private tickFormat(value: number) {\n    if (value < 1000) {\n      return this.meterFormat!.format(value);\n    } else {\n      return this.kilometerFormat!.format(value / 1000);\n    }\n  }\n\n  override firstUpdated() {\n    // FIXME: because the ref element are used before render is done, we need to force an update\n    this.requestUpdate();\n  }\n\n  private pointerMove(event: PointerEvent) {\n    const pointerDistance = this.scaleX.invert(pointer(event)[0]);\n    const index = Math.min(this.bisectDistance.left(this.plotData, pointerDistance), this.plotData.length - 1);\n\n    if (index < 0) {\n      return;\n    }\n    // FIXME:\n    // var d0 = this.plotData[index - 1]\n    // var d1 = this.plotData[index];\n    // // work out which date value is closest to the mouse\n    // var d = mouseDate - d0[0] > d1[0] - mouseDate ? d1 : d0;\n\n    const data = this.plotData[index];\n\n    if (isNaN(data.y)) {\n      return;\n    }\n\n    this.pointer = {\n      x: this.scaleX(data.x),\n      y: this.scaleY(data.y),\n    };\n\n    this.dispatchEvent(\n      new CustomEvent('over', {\n        detail: {\n          coordinate: this.plotData[index].coordinate,\n          position: this.pointer\n        }\n      }),\n    );\n  }\n\n  private pointerOut() {\n    this.pointer = {\n      x: 0,\n      y: 0,\n    };\n    this.dispatchEvent(new CustomEvent('out'));\n  }\n\n  override createRenderRoot() {\n    return this;\n  }\n}\n\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'elevation-profile': ElevationProfile;\n  }\n}\n"],"names":[],"version":3,"file":"elevation-profile.js.map"}

package/elevation-profile.ts

@@ -9,6 +9,8 @@ import {line, area} from 'd3-shape';
 import {axisBottom, axisLeft} from 'd3-axis';
 import {select, pointer} from 'd3-selection';
 
+import simplify from 'simplify-js';
+
 type PlotPoint = {
   x: number;
   y: number;
@@ -17,6 +19,8 @@ type PlotPoint = {
 
 @customElement('elevation-profile')
 export class ElevationProfile extends LitElement {
+  @property({type: Number}) tolerance = 1;
+  @property({type: String}) locale = navigator.language;
   @property({type: Array}) lines: number[][][] = [];
   @property({type: Object}) margin = {top: 20, right: 20, bottom: 20, left: 40};
   @property({type: Object}) tickSize = {x: 100, y: 40};
@@ -39,27 +43,35 @@ export class ElevationProfile extends LitElement {
     .x((point: PlotPoint) => this.scaleX(point.x))
     .y1((point: PlotPoint) => this.scaleY(point.y));
   private xAxis = axisBottom(this.scaleX).tickFormat((value: number) => this.tickFormat(value));
-  private yAxis = axisLeft(this.scaleY).tickFormat((value: number) => this.meterFormat.format(value));
+  private yAxis = axisLeft(this.scaleY).tickFormat((value: number) => this.meterFormat!.format(value));
   private xGrid = axisBottom(this.scaleX).tickFormat(() => '');
   private yGrid = axisLeft(this.scaleY).tickFormat(() => '');
 
-  private meterFormat = Intl.NumberFormat('de-CH', {
-    style: 'unit',
-    unit: 'meter',
-  });
-
-  private kilometerFormat = Intl.NumberFormat('de-CH', {
-    style: 'unit',
-    unit: 'kilometer',
-  });
+  private meterFormat: Intl.NumberFormat | null = null;
+  private kilometerFormat: Intl.NumberFormat | null = null;
 
   public updateScale(x: scaleLinear, y: scaleLinear, width: number, height: number): void {}
 
+  override updated(changedProperties: PropertyValues) {
+    if (changedProperties.has('locale')) {
+      this.meterFormat = new Intl.NumberFormat(this.locale, {
+        style: 'unit',
+        unit: 'meter',
+      });
+
+      this.kilometerFormat = new Intl.NumberFormat(this.locale, {
+        style: 'unit',
+        unit: 'kilometer',
+      });
+    }
+  }
+
   override willUpdate(changedProperties: PropertyValues) {
     if (changedProperties.has('lines')) {
       this.plotData.length = 0;
       for (const line of this.lines) {
-        this.plotData.push(...line.map((coordinate) => ({x: coordinate[3], y: coordinate[2], coordinate})));
+        const data = line.map((coordinate) => ({x: coordinate[3], y: coordinate[2], coordinate}));
+        this.plotData.push(...simplify(data, this.tolerance));
         this.plotData.push({x: line[line.length - 1][3], y: NaN, coordinate: []});
       }
 
@@ -131,9 +143,9 @@ export class ElevationProfile extends LitElement {
 
   private tickFormat(value: number) {
     if (value < 1000) {
-      return this.meterFormat.format(value);
+      return this.meterFormat!.format(value);
     } else {
-      return this.kilometerFormat.format(value / 1000);
+      return this.kilometerFormat!.format(value / 1000);
     }
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoblocks/elevation-profile",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "license": "BSD-3-Clause",
   "repository": "github:geoblocks/elevation-profile",
   "type": "module",
@@ -35,7 +35,8 @@
     "d3-scale": "4.0.2",
     "d3-selection": "3.0.0",
     "d3-shape": "3.2.0",
-    "lit": "3.1.0"
+    "lit": "3.1.0",
+    "simplify-js": "1.2.4"
   },
   "devDependencies": {
     "@parcel/packager-ts": "2.10.3",