UNPKG

rlayers

Version:

React Components for OpenLayers

mmomtchev.github.io/rlayers/

mmomtchev/rlayers

1 lines • 58.8 kB

JavaScript

"use strict";(self.webpackChunkrlayers=self.webpackChunkrlayers||[]).push([[2445],{2445(n,s,a){a.d(s,{default:()=>t});const t='<span class="token comment">/* This example reimplements the excellent OpenLayers example by @twpayne\n * from https://openlayers.org/en/latest/examples/igc.html\n * It illustrates various techniques that can be used to greatly improve performance\n *\n * React makes creating complex web applications very easy\n * It also makes very easy writing terribly inefficient code\n * You can get away with it when your DOM is not too complex\n * But when dealing with a canvas-drawn map, every care must be\n * taken to avoid unnecessary re-rendering\n */</span>\n\n<span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token constant">JSX</span><span class="token punctuation">,</span> useCallback <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> <span class="token punctuation">{</span> fromLonLat <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"ol/proj"</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> <span class="token constant">IGC</span> <span class="token keyword">from</span> <span class="token string">"ol/format/IGC"</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> <span class="token punctuation">{</span> getVectorContext <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"ol/render"</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> <span class="token punctuation">{</span> Geometry<span class="token punctuation">,</span> LineString<span class="token punctuation">,</span> Point <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"ol/geom"</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> <span class="token punctuation">{</span> Coordinate <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"ol/coordinate"</span><span class="token punctuation">;</span>\n\n<span class="token keyword">import</span> <span class="token punctuation">{</span>\n RMap<span class="token punctuation">,</span>\n RLayerTile<span class="token punctuation">,</span>\n RLayerVector<span class="token punctuation">,</span>\n RFeature<span class="token punctuation">,</span>\n RenderEvent<span class="token punctuation">,</span>\n MapBrowserEvent<span class="token punctuation">,</span>\n VectorSourceEvent<span class="token punctuation">,</span>\n<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"rlayers"</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> <span class="token punctuation">{</span> RStyle<span class="token punctuation">,</span> RStroke<span class="token punctuation">,</span> RFill<span class="token punctuation">,</span> RCircle<span class="token punctuation">,</span> useRStyle <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"rlayers/style"</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> <span class="token string">"ol/ol.css"</span><span class="token punctuation">;</span>\n\n<span class="token comment">// This won\'t work in CodePen</span>\n<span class="token keyword">import</span> ClementLatour <span class="token keyword">from</span> <span class="token string">"!!file-loader!./data/igc/Clement-Latour.igc"</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> DamienDeBaenst <span class="token keyword">from</span> <span class="token string">"!!file-loader!./data/igc/Damien-de-Baenst.igc"</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> SylvainDhonneur <span class="token keyword">from</span> <span class="token string">"!!file-loader!./data/igc/Sylvain-Dhonneur.igc"</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> TomPayne <span class="token keyword">from</span> <span class="token string">"!!file-loader!./data/igc/Tom-Payne.igc"</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> UlrichPrinz <span class="token keyword">from</span> <span class="token string">"!!file-loader!./data/igc/Ulrich-Prinz.igc"</span><span class="token punctuation">;</span>\n\n<span class="token keyword">type</span> <span class="token class-name">InputFormEventType</span> <span class="token operator">=</span> React<span class="token punctuation">.</span>FormEvent<span class="token operator"><</span>HTMLInputElement<span class="token operator">></span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> igcsDesc <span class="token operator">=</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span> c<span class="token operator">:</span> <span class="token string">"rgba(0, 0, 250, 0.7)"</span><span class="token punctuation">,</span> i<span class="token operator">:</span> ClementLatour <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span> c<span class="token operator">:</span> <span class="token string">"rgba(0, 50, 200, 0.7)"</span><span class="token punctuation">,</span> i<span class="token operator">:</span> DamienDeBaenst <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span> c<span class="token operator">:</span> <span class="token string">"rgba(0, 100, 150, 0.7)"</span><span class="token punctuation">,</span> i<span class="token operator">:</span> SylvainDhonneur <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span> c<span class="token operator">:</span> <span class="token string">"rgba(0, 150, 200, 0.7)"</span><span class="token punctuation">,</span> i<span class="token operator">:</span> TomPayne <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span> c<span class="token operator">:</span> <span class="token string">"rgba(0, 200, 50, 0.7)"</span><span class="token punctuation">,</span> i<span class="token operator">:</span> UlrichPrinz <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n<span class="token comment">// A constant avoids re-rendering of the component</span>\n<span class="token comment">// a property initialized with an anonymous object is not constant</span>\n<span class="token comment">// it will recreate a new instance at every evaluation</span>\n<span class="token keyword">const</span> origin <span class="token operator">=</span> <span class="token function">fromLonLat</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">45.7</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n<span class="token comment">// This part is re-rendered on every pointermove</span>\n<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">IGCComp</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token constant">JSX</span><span class="token punctuation">.</span>Element <span class="token punctuation">{</span>\n <span class="token keyword">const</span> <span class="token punctuation">[</span>time<span class="token punctuation">,</span> setTime<span class="token punctuation">]</span> <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">useState</span><span class="token punctuation">(</span><span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> <span class="token punctuation">[</span>point<span class="token punctuation">,</span> setPoint<span class="token punctuation">]</span> <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token generic-function"><span class="token function">useState</span><span class="token generic class-name"><span class="token operator"><</span>Point<span class="token operator">></span></span></span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> <span class="token punctuation">[</span>line<span class="token punctuation">,</span> setLine<span class="token punctuation">]</span> <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token generic-function"><span class="token function">useState</span><span class="token generic class-name"><span class="token operator"><</span>LineString<span class="token operator">></span></span></span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> <span class="token punctuation">[</span>slider<span class="token punctuation">,</span> setSlider<span class="token punctuation">]</span> <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">useState</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> <span class="token punctuation">[</span>highlights<span class="token punctuation">,</span> setHighlights<span class="token punctuation">]</span> <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token generic-function"><span class="token function">useState</span><span class="token generic class-name"><span class="token operator"><</span>Coordinate<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token operator">></span></span></span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> <span class="token punctuation">[</span>flight<span class="token punctuation">,</span> setFlight<span class="token punctuation">]</span> <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">useState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n start<span class="token operator">:</span> <span class="token number">Infinity</span><span class="token punctuation">,</span>\n stop<span class="token operator">:</span> <span class="token operator">-</span><span class="token number">Infinity</span><span class="token punctuation">,</span>\n duration<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> <span class="token punctuation">[</span>igcs<span class="token punctuation">,</span> setIgcs<span class="token punctuation">]</span> <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">useState</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token builtin">Promise</span><span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span>igcsDesc<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">fetch</span><span class="token punctuation">(</span>i<span class="token punctuation">.</span>i<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span>r<span class="token punctuation">)</span> <span class="token operator">=></span> r<span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>\n <span class="token punctuation">(</span>r<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">setIgcs</span><span class="token punctuation">(</span>r<span class="token punctuation">)</span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token keyword">const</span> styles <span class="token operator">=</span> <span class="token punctuation">{</span>\n redCircle<span class="token operator">:</span> <span class="token function">useRStyle</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n blueCircle<span class="token operator">:</span> <span class="token function">useRStyle</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n <span class="token comment">// This is a technique for an array of React.RefObjects</span>\n <span class="token comment">// It is ugly but it works</span>\n flightPath<span class="token operator">:</span> React<span class="token punctuation">.</span><span class="token generic-function"><span class="token function">useRef</span><span class="token generic class-name"><span class="token operator"><</span>RStyle<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token operator">></span></span></span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token comment">// createRef instead of useRef here will severely impact performance</span>\n <span class="token keyword">const</span> igcVectorLayer <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token generic-function"><span class="token function">useRef</span><span class="token generic class-name"><span class="token operator"><</span>RLayerVector<span class="token operator">></span></span></span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> highlightVectorLayer <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token generic-function"><span class="token function">useRef</span><span class="token generic class-name"><span class="token operator"><</span>RLayerVector<span class="token operator">></span></span></span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token keyword">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">React.Fragment</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n </span><span class="token punctuation">{</span>React<span class="token punctuation">.</span><span class="token function">useMemo</span><span class="token punctuation">(</span>\n <span class="token comment">// This is not a dynamic RStyle, these are 5 static RStyle\'s</span>\n <span class="token comment">// Thus the useMemo</span>\n <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span>\n igcsDesc<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span>igc<span class="token punctuation">,</span> idx<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">RStyle</span></span>\n <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>idx<span class="token punctuation">}</span></span>\n <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>el<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">void</span> <span class="token punctuation">(</span>styles<span class="token punctuation">.</span>flightPath<span class="token punctuation">.</span>current<span class="token punctuation">[</span>idx<span class="token punctuation">]</span> <span class="token operator">=</span> el<span class="token punctuation">)</span><span class="token punctuation">}</span></span>\n <span class="token punctuation">></span></span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">RStroke</span></span> <span class="token attr-name">color</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>igc<span class="token punctuation">.</span>c<span class="token punctuation">}</span></span> <span class="token attr-name">width</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">3</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">RStyle</span></span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n <span class="token punctuation">[</span>styles<span class="token punctuation">.</span>flightPath<span class="token punctuation">]</span>\n <span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">RStyle</span></span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>redCircle<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">RStroke</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>red<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">1</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">RCircle</span></span> <span class="token attr-name">radius</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">6</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">RFill</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>red<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">RCircle</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">RStyle</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">RStyle</span></span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>blueCircle<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">RCircle</span></span> <span class="token attr-name">radius</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">6</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">RFill</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>blue<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">RCircle</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">RStyle</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">RMap</span></span>\n <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>example-map<span class="token punctuation">"</span></span>\n <span class="token attr-name">initial</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> center<span class="token operator">:</span> origin<span class="token punctuation">,</span> zoom<span class="token operator">:</span> <span class="token number">9</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onPointerMove</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token function">useCallback</span><span class="token punctuation">(</span>\n <span class="token punctuation">(</span>e<span class="token operator">:</span> MapBrowserEvent<span class="token operator"><</span>PointerEvent <span class="token operator">|</span> KeyboardEvent <span class="token operator">|</span> WheelEvent<span class="token operator">></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token comment">// This useCallback is very important -> without it</span>\n <span class="token comment">// onPointerMove will be a new anonymous function on every render</span>\n <span class="token keyword">const</span> source <span class="token operator">=</span> igcVectorLayer<span class="token punctuation">.</span>current<span class="token punctuation">.</span>source<span class="token punctuation">;</span>\n <span class="token keyword">const</span> feature <span class="token operator">=</span> source<span class="token punctuation">.</span><span class="token function">getClosestFeatureToCoordinate</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span>coordinate<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token comment">// Did the user move the mouse before the flight paths were loaded?</span>\n <span class="token keyword">if</span> <span class="token punctuation">(</span>feature <span class="token operator">===</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> point <span class="token operator">=</span> feature<span class="token punctuation">.</span><span class="token function">getGeometry</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getClosestPoint</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span>coordinate<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> date <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span>point<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span> <span class="token operator">*</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token function">setPoint</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Point</span><span class="token punctuation">(</span>point<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token function">setLine</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">LineString</span><span class="token punctuation">(</span><span class="token punctuation">[</span>e<span class="token punctuation">.</span>coordinate<span class="token punctuation">,</span> <span class="token punctuation">[</span>point<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span> point<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token function">setTime</span><span class="token punctuation">(</span>\n <span class="token string">"<strong>"</span> <span class="token operator">+</span>\n feature<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">"PLT"</span><span class="token punctuation">)</span> <span class="token operator">+</span>\n <span class="token string">"</strong><br><em>"</span> <span class="token operator">+</span>\n date<span class="token punctuation">.</span><span class="token function">toUTCString</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span>\n <span class="token string">"</em>"</span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n e<span class="token punctuation">.</span>map<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">[</span>igcVectorLayer<span class="token punctuation">]</span>\n <span class="token punctuation">)</span><span class="token punctuation">}</span></span>\n <span class="token punctuation">></span></span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">RLayerTile</span></span>\n <span class="token attr-name">zIndex</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">5</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">url</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://{a-c}.tile.opentopomap.org/{z}/{x}/{y}.png<span class="token punctuation">"</span></span>\n <span class="token attr-name">attributions</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Kartendaten: © OpenStreetMap-Mitwirkende, SRTM | Kartendarstellung: © OpenTopoMap (CC-BY-SA)<span class="token punctuation">"</span></span>\n <span class="token punctuation">/></span></span><span class="token plain-text">\n </span><span class="token punctuation">{</span>\n <span class="token comment">// This layer contains the flight paths, we install an `onAddFeature` handler</span>\n <span class="token comment">// to receive all features as their loaded to do additional processing</span>\n <span class="token punctuation">}</span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">RLayerVector</span></span>\n <span class="token attr-name">zIndex</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">10</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>igcVectorLayer<span class="token punctuation">}</span></span>\n <span class="token attr-name">onAddFeature</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token function">useCallback</span><span class="token punctuation">(</span>\n <span class="token comment">// This useCallback transforms this function to a constant value</span>\n <span class="token comment">// None of its dependencies change after initialization</span>\n <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> geometry <span class="token operator">=</span> e<span class="token punctuation">.</span>feature<span class="token punctuation">.</span><span class="token function">getGeometry</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token keyword">as</span> LineString<span class="token punctuation">;</span>\n flight<span class="token punctuation">.</span>start <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">min</span><span class="token punctuation">(</span>\n flight<span class="token punctuation">.</span>start<span class="token punctuation">,</span>\n geometry<span class="token punctuation">.</span><span class="token function">getFirstCoordinate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n flight<span class="token punctuation">.</span>stop <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">max</span><span class="token punctuation">(</span>\n flight<span class="token punctuation">.</span>stop<span class="token punctuation">,</span>\n geometry<span class="token punctuation">.</span><span class="token function">getLastCoordinate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n flight<span class="token punctuation">.</span>duration <span class="token operator">=</span> flight<span class="token punctuation">.</span>stop <span class="token operator">-</span> flight<span class="token punctuation">.</span>start<span class="token punctuation">;</span>\n <span class="token function">setFlight</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token operator">...</span>flight <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">[</span>flight<span class="token punctuation">]</span>\n <span class="token punctuation">)</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onPostRender</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token function">useCallback</span><span class="token punctuation">(</span>\n <span class="token comment">// This useCallback is less efficient than the previous one</span>\n <span class="token comment">// as it depends on the state</span>\n <span class="token comment">// LayerVector is re-rendered every time point/line change</span>\n <span class="token punctuation">(</span>e<span class="token operator">:</span> RenderEvent<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> vectorContext <span class="token operator">=</span> <span class="token function">getVectorContext</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">;</span>\n vectorContext<span class="token punctuation">.</span><span class="token function">setStyle</span><span class="token punctuation">(</span>RStyle<span class="token punctuation">.</span><span class="token function">getStyleStatic</span><span class="token punctuation">(</span>styles<span class="token punctuation">.</span>redCircle<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">if</span> <span class="token punctuation">(</span>point <span class="token operator">&&</span> line<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n vectorContext<span class="token punctuation">.</span><span class="token function">drawGeometry</span><span class="token punctuation">(</span>point<span class="token punctuation">)</span><span class="token punctuation">;</span>\n vectorContext<span class="token punctuation">.</span><span class="token function">drawGeometry</span><span class="token punctuation">(</span>line<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">[</span>point<span class="token punctuation">,</span> line<span class="token punctuation">,</span> styles<span class="token punctuation">.</span>redCircle<span class="token punctuation">]</span>\n <span class="token punctuation">)</span><span class="token punctuation">}</span></span>\n <span class="token punctuation">></span></span><span class="token plain-text">\n </span><span class="token punctuation">{</span>React<span class="token punctuation">.</span><span class="token function">useMemo</span><span class="token punctuation">(</span>\n <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>\n <span class="token comment">// This component appears dynamic to React because of the map but it is in fact constant</span>\n <span class="token comment">// useMemo will render it truly constant</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">React.Fragment</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n </span><span class="token punctuation">{</span>igcs<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span>igc<span class="token punctuation">,</span> idx<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">RFeature</span></span>\n <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>idx<span class="token punctuation">}</span></span>\n <span class="token attr-name">feature</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>\n <span class="token keyword">new</span> <span class="token class-name"><span class="token constant">IGC</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">readFeatures</span><span class="token punctuation">(</span>igc<span class="token punctuation">,</span> <span class="token punctuation">{</span>\n featureProjection<span class="token operator">:</span> <span class="token string">"EPSG:3857"</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>\n <span class="token punctuation">}</span></span>\n <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>flightPath<span class="token punctuation">.</span>current<span class="token punctuation">[</span>idx<span class="token punctuation">]</span><span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">React.Fragment</span></span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">,</span>\n <span class="token comment">// The array trick renders it impossible for React to track the useMemo dependencies</span>\n <span class="token comment">// -> we do it manually</span>\n <span class="token comment">// eslint-disable-next-line react-hooks/exhaustive-deps</span>\n <span class="token punctuation">[</span>igcs<span class="token punctuation">,</span> styles<span class="token punctuation">.</span>flightPath<span class="token punctuation">,</span> styles<span class="token punctuation">.</span>flightPath<span class="token punctuation">.</span>current<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">]</span>\n <span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">RLayerVector</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n </span><span class="token punctuation">{</span>\n <span class="token comment">// This layer contains the blue circle (the highlighted section)</span>\n <span class="token punctuation">}</span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">RLayerVector</span></span>\n <span class="token attr-name">zIndex</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">10</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>highlightVectorLayer<span class="token punctuation">}</span></span>\n <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>blueCircle<span class="token punctuation">}</span></span>\n <span class="token punctuation">></span></span><span class="token plain-text">\n </span><span class="token punctuation">{</span>React<span class="token punctuation">.</span><span class="token function">useMemo</span><span class="token punctuation">(</span>\n <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>\n <span class="token comment">// This component appears dynamic to React because of the map but it is in fact constant</span>\n <span class="token comment">// useMemo will render it truly constant</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">React.Fragment</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n </span><span class="token punctuation">{</span>highlights<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span>coords<span class="token punctuation">,</span> i<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">RFeature</span></span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>i<span class="token punctuation">}</span></span> <span class="token attr-name">geometry</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">new</span> <span class="token class-name">Point</span><span class="token punctuation">(</span>coords<span class="token punctuation">)</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">React.Fragment</span></span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">,</span>\n <span class="token punctuation">[</span>highlights<span class="token punctuation">]</span>\n <span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">RLayerVector</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n </span><span class="token tag">