Skip to content

Mdd improve azure sample2 #359

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Sep 29, 2025
+328 −150
Merged

Mdd improve azure sample2 #359

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8a7985b
mdd-update-sample
mddifilippo89 Sep 28, 2025
50996f8
Update app.component.scss
mddifilippo89 Sep 28, 2025
53127ba
Update Dockerfile
mddifilippo89 Sep 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion samples/maps/geo-map/display-azure-imagery/.codesandbox/Dockerfile
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
FROM node:18
FROM node:20
69 changes: 33 additions & 36 deletions samples/maps/geo-map/display-azure-imagery/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,46 +1,43 @@
{
"name": "demo",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"update": "ng update",
"start": "node --max_old_space_size=12192 node_modules/@angular/cli/bin/ng serve -o",
"build": "node --max_old_space_size=12192 node_modules/@angular/cli/bin/ng build --configuration production",
"lint": "ng lint"
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"@angular/animations": "20.0.1",
"@angular/common": "20.0.1",
"@angular/compiler": "20.0.1",
"@angular/core": "20.0.1",
"@angular/forms": "20.0.1",
"@angular/platform-browser": "20.0.1",
"@angular/platform-browser-dynamic": "20.0.1",
"@types/hammerjs": "2.0.40",
"classlist.js": "1.1.20150312",
"core-js": "3.21.0",
"hammerjs": "2.0.8",
"igniteui-angular": "20.1.0-rc.2",
"igniteui-angular-charts": "20.0.2-beta.3",
"igniteui-angular-core": "20.0.2-beta.3",
"@angular/animations": "20.3.2",
"@angular/common": "20.3.2",
"@angular/compiler": "20.3.2",
"@angular/core": "20.3.2",
"@angular/forms": "20.3.2",
"@angular/platform-browser": "20.3.2",
"@angular/platform-browser-dynamic": "20.3.2",
"@angular/router": "20.3.2",
"hammerjs": "^2.0.8",
"igniteui-angular": "20.1.0",
"igniteui-angular-charts": "^20.0.2-beta.3",
"igniteui-angular-core": "^20.0.2-beta.3",
"igniteui-angular-maps": "20.0.2-beta.3",
"intl": "1.2.5",
"jszip": "3.8.0",
"rxjs": "7.8.1",
"tslib": "2.6.1",
"web-animations-js": "2.3.2",
"zone.js": "~0.15.0"
"rxjs": "~7.8.2",
"tslib": "^2.8.1",
"zone.js": "~0.15.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "20.0.1",
"@angular/cli": "20.0.1",
"@angular/compiler-cli": "20.0.1",
"@angular/language-service": "20.0.1",
"@types/node": "18.17.0",
"codelyzer": "6.0.2",
"jasmine-core": "5.1.1",
"jasmine-spec-reporter": "~4.2.1",
"sass.js": "0.11.1",
"ts-node": "10.9.1",
"tslint": "~6.1.3",
"typescript": "5.8.3"
"@angular-devkit/build-angular": "20.3.2",
"@angular/cli": "20.3.2",
"@angular/compiler-cli": "20.3.2",
"@types/jasmine": "~5.1.9",
"jasmine-core": "~5.10.0",
"karma": "~6.4.4",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.1",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"typescript": "~5.8.3"
}
}
88 changes: 51 additions & 37 deletions samples/maps/geo-map/display-azure-imagery/src/app.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,42 +1,56 @@
<div class="options horizontal">
<button class="button" igxButton="contained" igxRipple="white" (click)="form.open()">Enter your Azure Key</button> <h2>* Note, if no key is entered, an image will be shown reflecting what the map will look like.</h2>
</div>
<div class="container sample center"
style="display:flex; flex-direction:column; align-items:center; gap:2px;">

<igx-dialog #form>
<igx-dialog-title>
<div class="dialog-container">
<igx-icon>vpn_key</igx-icon>
<div class="dialog-title">Azure Map Authentication</div>
</div>
</igx-dialog-title>
<!-- Button + Select on the same line -->
<div class="controls-row" style="display:flex; gap:8px; align-items:center;">
<!-- Button opens the API key dialog -->
<button igxButton="contained" (click)="openDialog()">Enter your Azure Maps API Key</button>

<form class="keyInForm">
<igx-input-group>
<label igxLabel for="azurekey">Azure Key</label>
<input igxInput id="azurekey" type="text" #azureKeyInput [value]="apiKey"/>
</igx-input-group>
</form>
<!-- Select map style -->
<igx-select #styleSelect
placeholder="Choose Azure Imagery"
[(ngModel)]="selectedStyle"
(selectionChanging)="onStyleChange($event.newSelection?.value)">
<igx-select-item *ngFor="let s of styleOptions" [value]="s">
<span>{{ s }}</span>
</igx-select-item>
</igx-select>
</div>

<!-- Azure Key Dialog with Form -->
<igx-dialog #dialog [modal]="true" [width]="'400px'" [height]="'auto'">
<form #keyForm="ngForm" (ngSubmit)="onSubmit(keyForm)">
<div class="dialog-header">
<h3>Azure Key</h3>
</div>

<div igxDialogActions>
<button igxButton (click)="form.close();">CANCEL</button>
<button igxButton (click)="form.close(); this.showImages = false; applyApiKey(azureKeyInput.value); ">SUBMIT</button>
</div>
</igx-dialog>
<div class="dialog-content" style="display:flex; flex-direction:column; gap:12px;">
<label for="azureKeyInput">An image will remain visible when no key is entered.</label>
<input
id="azureKeyInput"
name="azureKeyInput"
[(ngModel)]="apiKeyInputValue"
type="text"
placeholder="Enter your key"
required />
</div>

<div class="dialog-actions" style="display:flex; justify-content:flex-end; gap:8px; margin-top:1rem;">
<button type="button" (click)="onReset(keyForm)">Clear</button>
<button type="submit">Submit</button>
</div>
</form>
</igx-dialog>

<div class="container horizontal">
<!-- Images -->
<img *ngIf="showImages" src="assets/azure_satellite.png" alt="Satellite View" width="100%">
<img *ngIf="showImages" src="assets/azure_road.png" alt="Road View" width="100%">
<!-- Map container -->
<div class="map-container" style="width:100%; display:flex; justify-content:center; margin-top:2px;">
<!-- Show placeholder image on top -->
<img *ngIf="!apiKey" class="placeholder" [src]="previewImageSrc" alt="Map Imagery"
style="position:absolute; z-index:1; width:100%; height:500px; object-fit:cover;" />

<!-- Maps -->
<igx-geographic-map #map
width="90%"
height="90%"
zoomable="true">
</igx-geographic-map>
<igx-geographic-map #map2
width="90%"
height="90%"
zoomable="true">
</igx-geographic-map>
</div>
<!-- Always render map underneath -->
<igx-geographic-map #map [height]="'500px'" [width]="'100%'" style="position:relative; z-index:0;">
<igx-geographic-tile-series #tileSeries></igx-geographic-tile-series>
</igx-geographic-map>
</div>
</div>
97 changes: 80 additions & 17 deletions samples/maps/geo-map/display-azure-imagery/src/app.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,89 @@
:host {
display: inline;
padding: 16px;
/* Overall container centers everything like WC */
.container.sample.center {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
width: 100%;
margin-top: 10px;
font-family: 'Titillium Web', sans-serif;
}

.keyInForm {
igx-input-group + igx-input-group {
margin-top: 24px;
}
/* Controls row: button + select + preview thumbnail */
.controls-row {
display: flex;
gap: 8px;
align-items: center;
margin-bottom: 0rem;

button[igxButton] {
min-width: 240px;
}

igx-select {
width: 240px;
}

.preview-current img {
width: 40px;
height: 40px;
border: 1px solid #ccc;
object-fit: cover;
border-radius: 4px;
}
}

.dialog-container{
display: flex;
/* Map container centers map/placeholder like WC */
.map-container {
width: 100%;
display: flex;
justify-content: center;
margin-top: 8px;

igx-icon {
margin-right: 8px;
}
.placeholder {
width: 100%;
max-width: 800px;
border: 1px solid #ccc;
border-radius: 4px;
object-fit: cover;
}

igx-geographic-map {
width: 100%;
max-width: 100%;
height: 500px;
}
}

.hidden {
display: none;
/* Dialog header and content spacing */
.dialog-header {
padding-bottom: 0.5rem;
text-align: left;
}

.show {
display: inline;
}
.dialog-content {
display: flex;
flex-direction: column;
gap: 12px;

input[type='text'] {
padding: 0.4rem;
border-radius: 4px;
border: 1px solid #ccc;
font-size: 14px;
}
}

/* Dialog actions: buttons on right side */
.dialog-actions {
margin-top: 16px;
display: flex;
justify-content: flex-end;
gap: 8px;

button {
min-width: 80px;
padding: 0.4rem 1rem;
border-radius: 4px;
}
}
Loading