| 53 | } |
| 54 | |
| 55 | onRenderHTML(rootElement: HTMLElement): void { |
| 56 | // Reserve space for the text label (to the left of the horizontal line) |
| 57 | const lineOffsetX = 50; |
| 58 | // Overall SVG width includes the left offset plus the computed scale line width. |
| 59 | const svgWidth = lineOffsetX + this.scaleWidth; |
| 60 | const tickHeight = 10; // vertical tick extends upward by 10 pixels from the horizontal line |
| 61 | render( |
| 62 | <svg |
| 63 | className="deck-widget-scale" |
| 64 | width={svgWidth} |
| 65 | height={30} |
| 66 | style={{overflow: 'visible', background: 'transparent'}} |
| 67 | onClick={this.handleClick.bind(this)} |
| 68 | > |
| 69 | {/* Pretty distance label positioned to the left of the horizontal line */} |
| 70 | <text |
| 71 | x={lineOffsetX + 5} |
| 72 | y="10" |
| 73 | textAnchor="end" |
| 74 | alignmentBaseline="middle" |
| 75 | style={{fontSize: '16px', fill: 'black', fontWeight: 'bold', fontFamily: 'sans-serif'}} |
| 76 | > |
| 77 | {this.scaleText} |
| 78 | </text> |
| 79 | {/* Horizontal line */} |
| 80 | <line |
| 81 | x1={lineOffsetX} |
| 82 | y1="15" |
| 83 | x2={lineOffsetX + this.scaleWidth} |
| 84 | y2="15" |
| 85 | stroke="black" |
| 86 | strokeWidth="6" |
| 87 | /> |
| 88 | {/* Left vertical tick (extending upward from the horizontal line) */} |
| 89 | <line |
| 90 | x1={lineOffsetX} |
| 91 | y1="15" |
| 92 | x2={lineOffsetX} |
| 93 | y2={15 - tickHeight} |
| 94 | stroke="black" |
| 95 | strokeWidth="6" |
| 96 | /> |
| 97 | {/* Right vertical tick (extending upward from the horizontal line) */} |
| 98 | <line |
| 99 | x1={lineOffsetX + this.scaleWidth} |
| 100 | y1="15" |
| 101 | x2={lineOffsetX + this.scaleWidth} |
| 102 | y2={15 - tickHeight} |
| 103 | stroke="black" |
| 104 | strokeWidth="6" |
| 105 | /> |
| 106 | </svg>, |
| 107 | rootElement |
| 108 | ); |
| 109 | } |
| 110 | |
| 111 | onViewportChange(viewport: Viewport): void { |
| 112 | // Only handle geospatial viewports (which contain latitude) |