React Multi-Layer Map Example

1import {
2    ZoomExtentsModifier,
3    ZoomPanModifier,
4    NumericAxis,
5    SciChartSurface,
6    NumberRange,
7    XyDataSeries,
8    MouseWheelZoomModifier,
9    FastLineRenderableSeries,
10    ETriangleSeriesDrawMode,
11    FastTriangleRenderableSeries,
12    SeriesSelectionModifier,
13    ESeriesType,
14} from "scichart";
15
16import { appTheme } from "../../../theme";
17
18const colors = [
19    "#543005",
20    "#8c510a",
21    "#bf812d",
22    "#dfc27d",
23    "#f6e8c3",
24    "#f5f5f5",
25    "#c7eae5",
26    "#80cdc1",
27    "#35978f",
28    "#01665e",
29    "#003c30",
30];
31
32function preserveAspectRatio(
33    width: number,
34    height: number,
35    minVisibleX: number,
36    maxVisibleX: number,
37    minVisibleY: number,
38    maxVisibleY: number
39) {
40    // Calculate current visible dimensions
41    const visibleWidth = maxVisibleX - minVisibleX;
42    const visibleHeight = maxVisibleY - minVisibleY;
43
44    // Calculate aspect ratios
45    const containerAspectRatio = width / height;
46    const visibleAspectRatio = visibleWidth / visibleHeight;
47
48    // Calculate center points for maintaining position
49    const centerX = (minVisibleX + maxVisibleX) / 2;
50    const centerY = (minVisibleY + maxVisibleY) / 2;
51
52    let newMinX, newMaxX, newMinY, newMaxY;
53
54    if (containerAspectRatio > visibleAspectRatio) {
55        // Container is wider - expand visible X range
56        const newVisibleWidth = visibleHeight * containerAspectRatio;
57        const widthDiff = newVisibleWidth - visibleWidth;
58
59        newMinX = minVisibleX - widthDiff / 2;
60        newMaxX = maxVisibleX + widthDiff / 2;
61        newMinY = minVisibleY;
62        newMaxY = maxVisibleY;
63    } else {
64        // Container is taller - expand visible Y range
65        const newVisibleHeight = visibleWidth / containerAspectRatio;
66        const heightDiff = newVisibleHeight - visibleHeight;
67
68        newMinX = minVisibleX;
69        newMaxX = maxVisibleX;
70        newMinY = minVisibleY - heightDiff / 2;
71        newMaxY = maxVisibleY + heightDiff / 2;
72    }
73
74    return {
75        minVisibleX: newMinX,
76        maxVisibleX: newMaxX,
77        minVisibleY: newMinY,
78        maxVisibleY: newMaxY,
79    };
80}
81
82export const drawExample = async (rootElement: string | HTMLDivElement) => {
83    // Create a SciChartSurface
84    const { wasmContext, sciChartSurface } = await SciChartSurface.create(rootElement, {
85        theme: appTheme.SciChartJsTheme,
86    });
87
88    const growBy = new NumberRange(0.1, 0.1);
89
90    sciChartSurface.xAxes.add(new NumericAxis(wasmContext, { growBy, isInnerAxis: true }));
91    sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { growBy, isInnerAxis: true }));
92
93    const xAxis = sciChartSurface.xAxes.get(0);
94    const yAxis = sciChartSurface.yAxes.get(0);
95
96    // Add zoom/pan controls
97    sciChartSurface.chartModifiers.add(
98        new ZoomExtentsModifier(),
99        new ZoomPanModifier({ enableZoom: true }),
100        new MouseWheelZoomModifier(),
101        // new SeriesSelectionModifier({
102        //     enableHover: true,
103        //     onHoverChanged: (args) => {
104        //         console.log("onHoverChanged");
105        //         args.allSeries
106        //             .filter((series) => series.type === ESeriesType.TriangleSeries)
107        //             .forEach((series, index) => {
108        //                 // outlines[index].strokeThickness = series.isHovered ? 15 : 1
109        //             });
110        //     },
111        // })
112    );
113
114    sciChartSurface.genericAnimationsRun.subscribe(() => {
115        const result = preserveAspectRatio(
116            sciChartSurface.viewRect.width,
117            sciChartSurface.viewRect.height,
118            xAxis.visibleRange.min,
119            xAxis.visibleRange.max,
120            yAxis.visibleRange.min,
121            yAxis.visibleRange.max
122        );
123
124        xAxis.visibleRange = new NumberRange(result.minVisibleX, result.maxVisibleX);
125        yAxis.visibleRange = new NumberRange(result.minVisibleY, result.maxVisibleY);
126    });
127
128    let dataArray: any[] = [];
129    let outlines: number[][][] = [];
130
131    function setConvertedData(convertedData: any[]) {
132        outlines = [];
133        dataArray = convertedData;
134        convertedData.forEach((d) => {
135            outlines.push(d.outline);
136        });
137    }
138
139    const setMap = () => {
140        // outline
141
142        const series = dataArray.map((d, i) => {
143            const dataSeries = new XyDataSeries(wasmContext, {
144                xValues: d.areaData.map((p: any[]) => p[0]),
145                yValues: d.areaData.map((p: any[]) => p[1]),
146            });
147
148            const triangleSeries = new FastTriangleRenderableSeries(wasmContext, {
149                dataSeries: dataSeries,
150                drawMode: ETriangleSeriesDrawMode.List,
151                fill: colors[(i % colors.length) + 1],
152                opacity: 0.5,
153            });
154
155            return triangleSeries;
156        });
157
158        sciChartSurface.renderableSeries.add(...series);
159
160        // outline
161        const outlinesSC = outlines.map((outline) => {
162            const xVals = outline.map((d) => d[0]);
163            const yVals = outline.map((d) => d[1]);
164
165            //FastMountainRenderableSeries
166            const lineSeries = new FastLineRenderableSeries(wasmContext, {
167                dataSeries: new XyDataSeries(wasmContext, {
168                    xValues: xVals,
169                    yValues: yVals,
170                }),
171                stroke: "black", //appTheme.VividSkyBlue,
172                strokeThickness: 2,
173                opacity: 1,
174                // fill: "rgba(100, 149, 237, 1)",
175                // zeroLineY: calculatePolygonCenter(outline)[1],
176            });
177
178            return lineSeries;
179        });
180
181        sciChartSurface.renderableSeries.add(...outlinesSC);
182
183        sciChartSurface.zoomExtents();
184    };
185
186    const clearMap = () => {
187        sciChartSurface.renderableSeries.clear(true);
188    };
189
190    return { wasmContext, sciChartSurface, controls: { setMap, clearMap, setConvertedData } };
191};
192