Skip to content

Commit 27baead

Browse files
mddifilippo89mddifilippo89
committed
Update index.tsx
1 parent 8cd84c7 commit 27baead

1 file changed

Lines changed: 52 additions & 124 deletions

File tree

  • samples/maps/geo-map/display-azure-imagery/src

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

Lines changed: 52 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -16,21 +16,21 @@ import { MapUtils, MapRegion } from './MapUtils';
1616
IgrGeographicMapModule.register();
1717
IgrDataChartInteractivityModule.register();
1818

19-
const placeholderImages: Record<string, string> = {
20-
Satellite: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_satellite.png",
21-
Road: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_road.png",
22-
DarkGrey: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_darkgrey.png",
23-
TerraOverlay: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_terra_overlay.png",
24-
HybridRoadOverlay: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/AzureHybridRoad.png",
25-
HybridDarkGreyOverlay: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_hybriddarkgrey.png",
26-
LabelsRoadOverlay: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_labelsroad.png",
27-
LabelsDarkGreyOverlay: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_labelsdarkgrey.png",
28-
TrafficDelayOverlay: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_trafficdelay.png",
29-
TrafficAbsoluteOverlay: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_traffic_absolute.png",
30-
TrafficReducedOverlay: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_traffic_light.png",
31-
TrafficRelativeOverlay: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_traffic_relative.png",
32-
WeatherInfraredOverlay: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_weather_Infrared_road.png",
33-
WeatherRadarOverlay: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_weather_radar.png"
19+
const mapStyles: Record<string, { placeholder: string; azureStyle: AzureMapsImageryStyle }> = {
20+
Satellite: { placeholder: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_satellite.png", azureStyle: AzureMapsImageryStyle.Satellite },
21+
Road: { placeholder: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_road.png", azureStyle: AzureMapsImageryStyle.Road },
22+
DarkGrey: { placeholder: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_darkgrey.png", azureStyle: AzureMapsImageryStyle.DarkGrey },
23+
TerraOverlay: { placeholder: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_terra_overlay.png", azureStyle: AzureMapsImageryStyle.TerraOverlay },
24+
HybridRoadOverlay: { placeholder: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/AzureHybridRoad.png", azureStyle: AzureMapsImageryStyle.HybridRoadOverlay },
25+
HybridDarkGreyOverlay: { placeholder: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_hybriddarkgrey.png", azureStyle: AzureMapsImageryStyle.HybridDarkGreyOverlay },
26+
LabelsRoadOverlay: { placeholder: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_labelsroad.png", azureStyle: AzureMapsImageryStyle.LabelsRoadOverlay },
27+
LabelsDarkGreyOverlay: { placeholder: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_labelsdarkgrey.png", azureStyle: AzureMapsImageryStyle.LabelsDarkGreyOverlay },
28+
TrafficDelayOverlay: { placeholder: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_trafficdelay.png", azureStyle: AzureMapsImageryStyle.TrafficDelayOverlay },
29+
TrafficAbsoluteOverlay: { placeholder: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_traffic_absolute.png", azureStyle: AzureMapsImageryStyle.TrafficAbsoluteOverlay },
30+
TrafficReducedOverlay: { placeholder: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_traffic_light.png", azureStyle: AzureMapsImageryStyle.TrafficReducedOverlay },
31+
TrafficRelativeOverlay: { placeholder: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_traffic_relative.png", azureStyle: AzureMapsImageryStyle.TrafficRelativeDarkOverlay },
32+
WeatherInfraredOverlay: { placeholder: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_weather_Infrared_road.png", azureStyle: AzureMapsImageryStyle.WeatherInfraredOverlay },
33+
WeatherRadarOverlay: { placeholder: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_weather_radar.png", azureStyle: AzureMapsImageryStyle.WeatherRadarOverlay }
3434
};
3535

3636
const trafficWeatherStyles = [
@@ -64,97 +64,47 @@ export default class MapDisplayImageryAzure extends React.Component<any, any> {
6464
}
6565

6666
render(): JSX.Element {
67-
return (
68-
<div
69-
style={{
70-
display: "flex",
71-
flexDirection: "column",
72-
height: "100vh", // full viewport
73-
width: "100%",
74-
}}
75-
>
76-
{/* Controls panel */}
77-
<div
78-
style={{
79-
flex: "0 0 auto", // fixed height
80-
display: "flex",
81-
gap: "12px",
82-
alignItems: "center",
83-
justifyContent: "center",
84-
padding: "12px",
85-
zIndex: 2
86-
}}
87-
>
88-
<IgrButton variant="contained" onClick={this.onDialogShow}>
89-
Enter Azure Maps API Key
90-
</IgrButton>
91-
92-
<IgrSelect
93-
value={this.state.styleName}
94-
onChange={this.onStyleChange}
95-
style={{ minWidth: "220px" }}
96-
>
97-
{Object.keys(placeholderImages).map((key) => (
98-
<IgrSelectItem key={key} value={key}>
99-
{key}
100-
</IgrSelectItem>
101-
))}
102-
</IgrSelect>
103-
</div>
104-
105-
{/* Placeholder image or map fills the rest */}
106-
<div
107-
style={{
108-
width: "100%", // fill parent container width
109-
maxWidth: "960px", // constrain max width
110-
aspectRatio: "4 / 3", // maintain 4:3 ratio
111-
margin: "0 auto", // center horizontally
67+
const currentStyle = mapStyles[this.state.styleName];
68+
69+
return (
70+
<div style={{ display: "flex", flexDirection: "column", height: "100vh", width: "100%" }}>
71+
{/* Controls */}
72+
<div style={{ flex: "0 0 auto", display: "flex", gap: "12px", alignItems: "center", justifyContent: "center", padding: "12px", zIndex: 2 }}>
73+
<IgrButton variant="contained" onClick={this.onDialogShow}>Enter Azure Maps API Key</IgrButton>
74+
<IgrSelect value={this.state.styleName} onChange={this.onStyleChange} style={{ minWidth: "220px" }}>
75+
{Object.keys(mapStyles).map(key => (
76+
<IgrSelectItem key={key} value={key}>{key}</IgrSelectItem>
77+
))}
78+
</IgrSelect>
79+
</div>
80+
81+
{/* Image or map */}
82+
<div style={{
83+
width: "100%",
84+
maxWidth: "960px",
85+
aspectRatio: "4 / 3",
86+
margin: "0 auto",
11287
position: "relative",
113-
overflow: "hidden",
114-
}}
115-
>
116-
{!this.state.mapVisible ? (
117-
<img
118-
src={placeholderImages[this.state.styleName]}
119-
alt={this.state.styleName}
120-
style={{
121-
width: "100%",
122-
height: "100%",
123-
objectFit: "cover"
124-
}}
125-
/>
126-
) : (
127-
<IgrGeographicMap
128-
ref={(r) => (this.geoMap = r!)}
129-
width="100%"
130-
height="100%"
131-
zoomable={true}
132-
/>
133-
)}
134-
</div>
135-
136-
{/* Dialog always floats above */}
88+
overflow: "hidden"
89+
}}>
90+
{!this.state.mapVisible ? (
91+
<img src={currentStyle.placeholder} alt={this.state.styleName} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
92+
) : (
93+
<IgrGeographicMap ref={r => this.geoMap = r!} width="100%" height="100%" zoomable={true} />
94+
)}
95+
</div>
96+
97+
{/* Dialog */}
13798
<IgrDialog title="Azure Key" ref={this.onDialogRef} className="igr-dialog">
13899
<IgrInput
139100
label="An image will remain visible when no key is entered."
140101
value={this.state.apiKey}
141102
inputMode="text"
142103
onInput={this.onApiKeyChange}
143104
/>
144-
<div
145-
slot="footer"
146-
style={{
147-
display: "flex",
148-
justifyContent: "flex-end",
149-
gap: "8px"
150-
}}
151-
>
152-
<IgrButton variant="flat" onClick={this.onResetKey}>
153-
Reset
154-
</IgrButton>
155-
<IgrButton variant="flat" onClick={this.onApplyKey}>
156-
Submit
157-
</IgrButton>
105+
<div slot="footer" style={{ display: "flex", justifyContent: "flex-end", gap: "8px" }}>
106+
<IgrButton variant="flat" onClick={this.onResetKey}>Clear</IgrButton>
107+
<IgrButton variant="flat" onClick={this.onApplyKey}>Submit</IgrButton>
158108
</div>
159109
</IgrDialog>
160110
</div>
@@ -169,37 +119,17 @@ export default class MapDisplayImageryAzure extends React.Component<any, any> {
169119

170120
private onApplyKey() {
171121
if (!this.state.apiKey) { this.onDialogHide(); return; }
172-
this.setState({ mapVisible: true }, () => this.updateAzureMap(this.mapStyleFromName(this.state.styleName)));
122+
this.setState({ mapVisible: true }, () => this.updateAzureMap(mapStyles[this.state.styleName].azureStyle));
173123
this.onDialogHide();
174124
}
175125

176126
private onStyleChange(e: CustomEvent) {
177127
const selected = e.detail.value as string;
178128
this.setState({ styleName: selected }, () => {
179-
if (this.state.apiKey) this.updateAzureMap(this.mapStyleFromName(selected));
129+
if (this.state.apiKey) this.updateAzureMap(mapStyles[selected].azureStyle);
180130
});
181131
}
182132

183-
private mapStyleFromName(name: string): AzureMapsImageryStyle {
184-
switch (name) {
185-
case "Satellite": return AzureMapsImageryStyle.Satellite;
186-
case "Road": return AzureMapsImageryStyle.Road;
187-
case "DarkGrey": return AzureMapsImageryStyle.DarkGrey;
188-
case "TerraOverlay": return AzureMapsImageryStyle.TerraOverlay;
189-
case "HybridRoadOverlay": return AzureMapsImageryStyle.HybridRoadOverlay;
190-
case "HybridDarkGreyOverlay": return AzureMapsImageryStyle.HybridDarkGreyOverlay;
191-
case "LabelsRoadOverlay": return AzureMapsImageryStyle.LabelsRoadOverlay;
192-
case "LabelsDarkGreyOverlay": return AzureMapsImageryStyle.LabelsDarkGreyOverlay;
193-
case "TrafficDelayOverlay": return AzureMapsImageryStyle.TrafficDelayOverlay;
194-
case "TrafficAbsoluteOverlay": return AzureMapsImageryStyle.TrafficAbsoluteOverlay;
195-
case "TrafficReducedOverlay": return AzureMapsImageryStyle.TrafficReducedOverlay;
196-
case "TrafficRelativeOverlay": return AzureMapsImageryStyle.TrafficRelativeDarkOverlay;
197-
case "WeatherInfraredOverlay": return AzureMapsImageryStyle.WeatherInfraredOverlay;
198-
case "WeatherRadarOverlay": return AzureMapsImageryStyle.WeatherRadarOverlay;
199-
default: return AzureMapsImageryStyle.Satellite;
200-
}
201-
}
202-
203133
private updateAzureMap(style: AzureMapsImageryStyle) {
204134
if (!this.geoMap || !this.state.apiKey) return;
205135

@@ -224,8 +154,7 @@ export default class MapDisplayImageryAzure extends React.Component<any, any> {
224154
} else {
225155
this.geoMap.zoomToGeographic({ left: -74.2591, top: 40.9176, width: -73.7004 - (-74.2591), height: 40.4774 - 40.9176 });
226156
}
227-
}
228-
else if (style === AzureMapsImageryStyle.TerraOverlay) {
157+
} else if (style === AzureMapsImageryStyle.TerraOverlay) {
229158
const bg = new IgrAzureMapsImagery();
230159
bg.apiKey = this.state.apiKey;
231160
bg.imageryStyle = AzureMapsImageryStyle.Satellite;
@@ -234,8 +163,7 @@ export default class MapDisplayImageryAzure extends React.Component<any, any> {
234163
tileSource.imageryStyle = style;
235164
this.geoMap.series.add(series);
236165
MapUtils.navigateTo(this.geoMap, MapRegion.UnitedStates);
237-
}
238-
else {
166+
} else {
239167
tileSource.imageryStyle = style;
240168
this.geoMap.series.add(series);
241169
const bg = new IgrAzureMapsImagery();

0 commit comments

Comments
 (0)