Skip to content

Commit 9060342

Browse files
mddifilippo89mddifilippo89
authored
Merge pull request #915 from IgniteUI/mdd-improve-react-azure-sample
mdd-improve-react-azure-sample
2 parents 506f0ef + 1d9fcd3 commit 9060342

File tree

1 file changed

+82
-174
lines changed
  • samples/maps/geo-map/display-azure-imagery/src

1 file changed

+82
-174
lines changed

‎samples/maps/geo-map/display-azure-imagery/src/index.tsx‎

Lines changed: 82 additions & 174 deletions
Original file line numberDiff line numberDiff line change
@@ -11,55 +11,13 @@ import {
1111
import { IgrButton, IgrDialog, IgrInput, IgrSelect, IgrSelectItem } from "igniteui-react";
1212
import { IgrDataChartInteractivityModule } from "igniteui-react-charts";
1313
import "igniteui-webcomponents/themes/light/bootstrap.css";
14+
import { MapUtils, MapRegion } from './MapUtils';
1415

1516
IgrGeographicMapModule.register();
1617
IgrDataChartInteractivityModule.register();
1718

18-
enum MapRegion { UnitedStates }
19-
20-
class MapUtils {
21-
public static navigateTo(geoMap: IgrGeographicMap | undefined, region: MapRegion) {
22-
if (!geoMap) return;
23-
if (region === MapRegion.UnitedStates)
24-
geoMap.zoomToGeographic({ left: -125, top: 50, width: 60, height: 25 });
25-
}
26-
27-
public static zoomToNYC(geoMap: IgrGeographicMap | undefined) {
28-
if (!geoMap) return;
29-
geoMap.zoomToGeographic({ left: -74.2591, top: 40.9176, width: -73.7004 - (-74.2591), height: 40.4774 - 40.9176 });
30-
}
31-
}
32-
33-
const placeholderImages: Record<string, string> = {
34-
Satellite: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_satellite.png",
35-
Road: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_road.png",
36-
DarkGrey: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_darkgrey.png",
37-
TerraOverlay: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_terra_overlay.png",
38-
HybridRoadOverlay: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/AzureHybridRoad.png",
39-
HybridDarkGreyOverlay: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_hybriddarkgrey.png",
40-
LabelsRoadOverlay: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_labelsroad.png",
41-
LabelsDarkGreyOverlay: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_labelsdarkgrey.png",
42-
TrafficDelayOverlay: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_trafficdelay.png",
43-
TrafficAbsoluteOverlay: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_traffic_absolute.png",
44-
TrafficReducedOverlay: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_traffic_light.png",
45-
TrafficRelativeOverlay: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_traffic_relative.png",
46-
WeatherInfraredOverlay: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_weather_Infrared_road.png",
47-
WeatherRadarOverlay: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_weather_radar.png"
48-
};
49-
50-
const trafficWeatherStyles = [
51-
AzureMapsImageryStyle.TrafficDelayOverlay,
52-
AzureMapsImageryStyle.TrafficAbsoluteOverlay,
53-
AzureMapsImageryStyle.TrafficReducedOverlay,
54-
AzureMapsImageryStyle.TrafficRelativeDarkOverlay,
55-
AzureMapsImageryStyle.WeatherInfraredOverlay,
56-
AzureMapsImageryStyle.WeatherRadarOverlay
57-
];
58-
5919
export default class MapDisplayImageryAzure extends React.Component<any, any> {
60-
private geoMap?: IgrGeographicMap;
61-
private dialogRef?: IgrDialog;
62-
20+
6321
constructor(props: any) {
6422
super(props);
6523
this.state = { apiKey: "", styleName: "Satellite", mapVisible: false };
@@ -73,114 +31,69 @@ export default class MapDisplayImageryAzure extends React.Component<any, any> {
7331
this.onStyleChange = this.onStyleChange.bind(this);
7432
}
7533

76-
render(): JSX.Element {
77-
return (
78-
<div
79-
style={{
80-
display: "flex",
81-
flexDirection: "column",
82-
alignItems: "center",
83-
gap: "16px",
84-
width: "100%",
85-
padding: "16px",
86-
boxSizing: "border-box"
87-
}}
88-
>
89-
{/* Controls panel */}
90-
<div
91-
style={{
92-
display: "flex",
93-
gap: "12px",
94-
alignItems: "center",
95-
justifyContent: "center",
96-
flexWrap: "wrap"
97-
}}
98-
>
99-
<IgrButton variant="contained" onClick={this.onDialogShow}>
100-
Enter Azure Maps API Key
101-
</IgrButton>
102-
103-
<IgrSelect
104-
value={this.state.styleName}
105-
onChange={this.onStyleChange}
106-
style={{ minWidth: "220px" }}
107-
>
108-
{Object.keys(placeholderImages).map((key) => (
109-
<IgrSelectItem key={key} value={key}>
110-
{key}
111-
</IgrSelectItem>
112-
))}
113-
</IgrSelect>
114-
</div>
34+
componentDidMount() {
35+
this.onDialogShow(); // open dialog on startup
36+
}
11537

116-
{/* Placeholder image */}
117-
{!this.state.mapVisible && (
118-
<div
119-
style={{
120-
width: "640px",
121-
height: "480px",
122-
display: "flex",
123-
justifyContent: "center",
124-
alignItems: "center",
125-
border: "1px solid #ccc",
126-
borderRadius: "6px",
127-
overflow: "hidden",
128-
boxShadow: "0 2px 6px rgba(0,0,0,0.2)"
129-
}}
130-
>
131-
<img
132-
src={placeholderImages[this.state.styleName]}
133-
alt={this.state.styleName}
134-
style={{ width: "100%", height: "100%", objectFit: "cover" }}
135-
/>
38+
render(): JSX.Element {
39+
const currentStyle = this.mapStyles[this.state.styleName];
40+
41+
return (
42+
<div style={{ display: "flex", flexDirection: "column", height: "100vh", width: "100%" }}>
43+
{/* Controls */}
44+
<div style={{ flex: "0 0 auto", display: "flex", gap: "12px", alignItems: "center", justifyContent: "center", padding: "12px", zIndex: 2 }}>
45+
<IgrButton variant="contained" onClick={this.onDialogShow}>Enter Azure Maps API Key</IgrButton>
46+
<IgrSelect value={this.state.styleName} onChange={this.onStyleChange} style={{ minWidth: "220px" }}>
47+
{Object.keys(this.mapStyles).map(key => (
48+
<IgrSelectItem key={key} value={key}>{key}</IgrSelectItem>
49+
))}
50+
</IgrSelect>
13651
</div>
137-
)}
13852

139-
{/* Map container */}
140-
<div
141-
style={{
53+
{/* Image or map */}
54+
<div style={{
14255
width: "100%",
143-
maxWidth: "100%",
144-
height: "1000px",
145-
overflow: "hidden",
146-
display: this.state.mapVisible ? "block" : "none"
147-
}}
148-
>
149-
<IgrGeographicMap
150-
ref={(r) => (this.geoMap = r!)}
151-
width="100%"
152-
height="100%"
153-
zoomable={true}
154-
/>
56+
maxWidth: "960px",
57+
aspectRatio: "4 / 3",
58+
margin: "0 auto",
59+
position: "relative",
60+
overflow: "hidden"
61+
}}>
62+
{!this.state.mapVisible ? (
63+
<img src={currentStyle.placeholder} alt={this.state.styleName} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
64+
) : (
65+
<IgrGeographicMap ref={r => this.geoMap = r!} width="100%" height="100%" zoomable={true} />
66+
)}
67+
</div>
68+
69+
{/* Dialog */}
70+
<IgrDialog title="Azure Key" ref={this.onDialogRef} className="igr-dialog">
71+
<IgrInput
72+
label="An image will remain visible when no key is entered."
73+
value={this.state.apiKey}
74+
inputMode="text"
75+
onInput={this.onApiKeyChange}
76+
/>
77+
<div slot="footer" style={{ display: "flex", justifyContent: "flex-end", gap: "8px" }}>
78+
<IgrButton variant="flat" onClick={this.onResetKey}>Clear</IgrButton>
79+
<IgrButton variant="flat" onClick={this.onApplyKey}>Submit</IgrButton>
80+
</div>
81+
</IgrDialog>
15582
</div>
83+
);
84+
}
15685

157-
{/* Dialog for API key */}
158-
<IgrDialog title="Azure Key" ref={this.onDialogRef}>
159-
<IgrInput
160-
label="Azure Key"
161-
value={this.state.apiKey}
162-
inputMode="text"
163-
onInput={this.onApiKeyChange}
164-
/>
165-
<div
166-
slot="footer"
167-
style={{
168-
display: "flex",
169-
justifyContent: "flex-end",
170-
gap: "8px"
171-
}}
172-
>
173-
<IgrButton variant="flat" onClick={this.onResetKey}>
174-
Reset
175-
</IgrButton>
176-
<IgrButton variant="flat" onClick={this.onApplyKey}>
177-
Submit
178-
</IgrButton>
179-
</div>
180-
</IgrDialog>
181-
</div>
182-
);
183-
}
86+
private geoMap?: IgrGeographicMap;
87+
private dialogRef?: IgrDialog;
88+
89+
private trafficWeatherStyles = [
90+
AzureMapsImageryStyle.TrafficDelayOverlay,
91+
AzureMapsImageryStyle.TrafficAbsoluteOverlay,
92+
AzureMapsImageryStyle.TrafficReducedOverlay,
93+
AzureMapsImageryStyle.TrafficRelativeDarkOverlay,
94+
AzureMapsImageryStyle.WeatherInfraredOverlay,
95+
AzureMapsImageryStyle.WeatherRadarOverlay
96+
];
18497

18598
private onDialogRef(dialog: IgrDialog) { this.dialogRef = dialog; }
18699
private onDialogShow() { this.dialogRef?.show(); }
@@ -190,37 +103,17 @@ export default class MapDisplayImageryAzure extends React.Component<any, any> {
190103

191104
private onApplyKey() {
192105
if (!this.state.apiKey) { this.onDialogHide(); return; }
193-
this.setState({ mapVisible: true }, () => this.updateAzureMap(this.mapStyleFromName(this.state.styleName)));
106+
this.setState({ mapVisible: true }, () => this.updateAzureMap(this.mapStyles[this.state.styleName].azureStyle));
194107
this.onDialogHide();
195108
}
196109

197110
private onStyleChange(e: CustomEvent) {
198111
const selected = e.detail.value as string;
199112
this.setState({ styleName: selected }, () => {
200-
if (this.state.apiKey) this.updateAzureMap(this.mapStyleFromName(selected));
113+
if (this.state.apiKey) this.updateAzureMap(this.mapStyles[selected].azureStyle);
201114
});
202115
}
203116

204-
private mapStyleFromName(name: string): AzureMapsImageryStyle {
205-
switch (name) {
206-
case "Satellite": return AzureMapsImageryStyle.Satellite;
207-
case "Road": return AzureMapsImageryStyle.Road;
208-
case "DarkGrey": return AzureMapsImageryStyle.DarkGrey;
209-
case "TerraOverlay": return AzureMapsImageryStyle.TerraOverlay;
210-
case "HybridRoadOverlay": return AzureMapsImageryStyle.HybridRoadOverlay;
211-
case "HybridDarkGreyOverlay": return AzureMapsImageryStyle.HybridDarkGreyOverlay;
212-
case "LabelsRoadOverlay": return AzureMapsImageryStyle.LabelsRoadOverlay;
213-
case "LabelsDarkGreyOverlay": return AzureMapsImageryStyle.LabelsDarkGreyOverlay;
214-
case "TrafficDelayOverlay": return AzureMapsImageryStyle.TrafficDelayOverlay;
215-
case "TrafficAbsoluteOverlay": return AzureMapsImageryStyle.TrafficAbsoluteOverlay;
216-
case "TrafficReducedOverlay": return AzureMapsImageryStyle.TrafficReducedOverlay;
217-
case "TrafficRelativeOverlay": return AzureMapsImageryStyle.TrafficRelativeDarkOverlay;
218-
case "WeatherInfraredOverlay": return AzureMapsImageryStyle.WeatherInfraredOverlay;
219-
case "WeatherRadarOverlay": return AzureMapsImageryStyle.WeatherRadarOverlay;
220-
default: return AzureMapsImageryStyle.Satellite;
221-
}
222-
}
223-
224117
private updateAzureMap(style: AzureMapsImageryStyle) {
225118
if (!this.geoMap || !this.state.apiKey) return;
226119

@@ -231,7 +124,7 @@ export default class MapDisplayImageryAzure extends React.Component<any, any> {
231124
const series = new IgrGeographicTileSeries({ name: "AzureTileSeries", tileImagery: tileSource });
232125
series.tileImagery = tileSource;
233126

234-
if (trafficWeatherStyles.includes(style)) {
127+
if (this.trafficWeatherStyles.includes(style)) {
235128
const bg = new IgrAzureMapsImagery();
236129
bg.apiKey = this.state.apiKey;
237130
bg.imageryStyle = AzureMapsImageryStyle.DarkGrey;
@@ -243,10 +136,9 @@ export default class MapDisplayImageryAzure extends React.Component<any, any> {
243136
if (style === AzureMapsImageryStyle.WeatherInfraredOverlay || style === AzureMapsImageryStyle.WeatherRadarOverlay) {
244137
MapUtils.navigateTo(this.geoMap, MapRegion.UnitedStates);
245138
} else {
246-
MapUtils.zoomToNYC(this.geoMap);
139+
this.geoMap.zoomToGeographic({ left: -74.2591, top: 40.9176, width: -73.7004 - (-74.2591), height: 40.4774 - 40.9176 });
247140
}
248-
}
249-
else if (style === AzureMapsImageryStyle.TerraOverlay) {
141+
} else if (style === AzureMapsImageryStyle.TerraOverlay) {
250142
const bg = new IgrAzureMapsImagery();
251143
bg.apiKey = this.state.apiKey;
252144
bg.imageryStyle = AzureMapsImageryStyle.Satellite;
@@ -255,8 +147,7 @@ export default class MapDisplayImageryAzure extends React.Component<any, any> {
255147
tileSource.imageryStyle = style;
256148
this.geoMap.series.add(series);
257149
MapUtils.navigateTo(this.geoMap, MapRegion.UnitedStates);
258-
}
259-
else {
150+
} else {
260151
tileSource.imageryStyle = style;
261152
this.geoMap.series.add(series);
262153
const bg = new IgrAzureMapsImagery();
@@ -266,6 +157,23 @@ export default class MapDisplayImageryAzure extends React.Component<any, any> {
266157
MapUtils.navigateTo(this.geoMap, MapRegion.UnitedStates);
267158
}
268159
}
160+
161+
private mapStyles: Record<string, { placeholder: string; azureStyle: AzureMapsImageryStyle }> = {
162+
Satellite: { placeholder: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_satellite.png", azureStyle: AzureMapsImageryStyle.Satellite },
163+
Road: { placeholder: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_road.png", azureStyle: AzureMapsImageryStyle.Road },
164+
DarkGrey: { placeholder: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_darkgrey.png", azureStyle: AzureMapsImageryStyle.DarkGrey },
165+
TerraOverlay: { placeholder: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_terra_overlay.png", azureStyle: AzureMapsImageryStyle.TerraOverlay },
166+
HybridRoadOverlay: { placeholder: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/AzureHybridRoad.png", azureStyle: AzureMapsImageryStyle.HybridRoadOverlay },
167+
HybridDarkGreyOverlay: { placeholder: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_hybriddarkgrey.png", azureStyle: AzureMapsImageryStyle.HybridDarkGreyOverlay },
168+
LabelsRoadOverlay: { placeholder: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_labelsroad.png", azureStyle: AzureMapsImageryStyle.LabelsRoadOverlay },
169+
LabelsDarkGreyOverlay: { placeholder: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_labelsdarkgrey.png", azureStyle: AzureMapsImageryStyle.LabelsDarkGreyOverlay },
170+
TrafficDelayOverlay: { placeholder: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_trafficdelay.png", azureStyle: AzureMapsImageryStyle.TrafficDelayOverlay },
171+
TrafficAbsoluteOverlay: { placeholder: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_traffic_absolute.png", azureStyle: AzureMapsImageryStyle.TrafficAbsoluteOverlay },
172+
TrafficReducedOverlay: { placeholder: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_traffic_light.png", azureStyle: AzureMapsImageryStyle.TrafficReducedOverlay },
173+
TrafficRelativeOverlay: { placeholder: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_traffic_relative.png", azureStyle: AzureMapsImageryStyle.TrafficRelativeDarkOverlay },
174+
WeatherInfraredOverlay: { placeholder: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_weather_Infrared_road.png", azureStyle: AzureMapsImageryStyle.WeatherInfraredOverlay },
175+
WeatherRadarOverlay: { placeholder: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_weather_radar.png", azureStyle: AzureMapsImageryStyle.WeatherRadarOverlay }
176+
};
269177
}
270178

271179
// rendering above class to the React DOM

0 commit comments

Comments
 (0)