I made a project using the MapTiler library. And when putting the project on the hosting service, the error appears:
ReferenceError: caches is not defined
at main-FAGKM46X.js:584:229302
at Generator.next (<anonymous>)
at main-FAGKM46X.js:584:228898
at new t (polyfills-RT5I6R6G.js:2:2236)
at xp (main-FAGKM46X.js:584:228718)
at UT (main-FAGKM46X.js:584:229256)
at main-FAGKM46X.js:584:230307
at Generator.next (<anonymous>)
at main-FAGKM46X.js:584:228898
at new t (polyfills-RT5I6R6G.js:2:2236)
With this error, the map style does not load either.
The program accesses an API that takes the current location of the ISS and shows it on the map
Component HTML
<div class="map-container">
<div class="info-container" >
<span>Latitude: {{locateISS?.iss_position?.latitude}}</span>
<span>Longitude: {{locateISS?.iss_position?.longitude}}</span>
<span>Velocidade: {{speed}}km/h</span>
</div>
<div class="map-wrap">
<div class="map" #map></div>
</div>
<div class="icon" #icon></div>
</div>
Component TS
import {AfterViewInit, Component, ElementRef, NgZone, OnDestroy, OnInit, PLATFORM_ID, ViewChild, inject, signal } from '@angular/core';
import { IssService } from '../../../services/iss.service';
import { Map, MapStyle, config, Marker, Popup} from '@maptiler/sdk';
import '@maptiler/sdk/dist/maptiler-sdk.css';
import { isPlatformBrowser } from '@angular/common';
import { LocateISS } from '../models/locate.model';
@Component({
selector: 'app-iss-map',
standalone: true,
imports: [],
templateUrl: './iss-map.component.html',
styleUrl: './iss-map.component.scss'
})
export class IssMapComponent implements OnInit, AfterViewInit, OnDestroy{
map?:Map
private issService = inject(IssService)
locateISS?:LocateISS
issIcon:any
speed:Number = 0
marker:any
isBrowser = signal(false);
platformId = inject(PLATFORM_ID)
@ViewChild('map')
private mapContainer!: ElementRef<HTMLElement>;
@ViewChild('icon')
private elementIcon!: ElementRef<HTMLElement>;
constructor(){
this.isBrowser.set(isPlatformBrowser(this.platformId))
if(this.isBrowser())
inject(NgZone).runOutsideAngular(() => {
setInterval(() => this.updateMarker(), 1000);
})
}
ngOnInit(): void {
config.apiKey = 'wGRvHdO3WKYFTWYfoxL5'
this.issService.getLocate().subscribe(locate => this.locateISS = locate)
}
ngAfterViewInit(): void {
this.map = new Map({
container: this.mapContainer.nativeElement,
style: MapStyle.STREETS,
center: [ Number(this.locateISS?.iss_position.longitude), Number(this.locateISS?.iss_position.latitude)],
zoom: 2
});
this.issIcon = new Marker({element : this.elementIcon.nativeElement})
.setLngLat([Number(this.locateISS?.iss_position.longitude!), Number(this.locateISS?.iss_position.latitude!)])
.setPopup(new Popup().setHTML("<span style='color:black; padding:20px;'>ISS</span>"))
.addTo(this.map!);
}
ngOnDestroy(): void {
this.map?.remove();
}
updateMarker(){
const oldLat = this.locateISS?.iss_position.latitude
const oldLong = this.locateISS?.iss_position.longitude
this.issService.getLocate().subscribe(locate => this.locateISS = locate)
let distance = 60 * 1.1515 * (180/Math.PI) * Math.acos(
Math.sin(Number(oldLat) * (Math.PI/180)) * Math.sin(Number(this.locateISS?.iss_position.latitude) * (Math.PI/180)) +
Math.cos(Number(oldLat) * (Math.PI/180)) * Math.cos(Number(this.locateISS?.iss_position.latitude) * (Math.PI/180)) *
Math.cos(Number(oldLong) - Number(this.locateISS?.iss_position.longitude) * (Math.PI/180))
);
this.speed = Math.round(distance * 1.609344)
this.issIcon.setLngLat([Number(this.locateISS?.iss_position.long`), Number(this.locateISS?.iss_position.latitude)])
}
}
I thought it might be something when building the project, I built it again and it didn’t work