This is how I configured the map:
this.map = new Map({
target: 'map',
layers: [new TileLayer({source: new OSM()})
],
view: new View({
center: [0, 0],
zoom: 16,
})
});
When I first load the page, it looks like this:
To resolve the issue, I resized the page and now the map appears correctly:
Any suggestions on how to fix this problem?
After troubleshooting, I identified the issue as a timing problem. The fix was to add an ng-if directive in the HTML element and delay setting the map target by one second.
HTML:
<ion-item *ngIf="loaded">
<div id="map" [ngClass]="{'map': loaded}"></div>
</ion-item>
.ts file:
this.map = new Map({
view: new View({
center: [0, 0],
zoom: 16,
minZoom: 2,
maxZoom: 19
}),
layers: [
new TileLayer({
source: new OSM()
}),
]
});
this.loaded = true;
setTimeout(() => {
this.map.setTarget(document.getElementById('map'));
}, 1000);
My approach involved the following steps:
import { AfterViewInit, Component, OnInit } from '@angular/core';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit, AfterViewInit {
map!: Map;
ngOnInit(): void {
let view = new View({
center: [0, 0],
zoom: 1,
});
let layers = [
new TileLayer({
source: new OSM(),
}),
];
this.map = new Map({
view: view,
layers: layers,
target: 'ol-map',
});
this.map.updateSize();
}
ngAfterViewInit(): void {
this.map.updateSize();
}
}
I believe that my solution offers a concise and effective way to tackle this issue by initializing the map in ngOnInit and updating its size once the view is ready in ngAfterViewInit. This method provides simplicity and efficiency.
Not too long ago, I addressed a similar inquiry. Check out the post Angular 6 - Dealing with Rendering Issues When BrowserAnimationsModule is Imported (Openlayers) .
In that discussion, multiple solutions were presented. One involves using the OnInit method of the component in conjunction with ViewChild to access the reference element for binding the map. Another approach suggests utilizing the AfterViewInit hook.
When I update the window, everything runs smoothly
setTimeout(() => {
map.updateSize();
}, 0);
I am facing an issue with importing a data.json file in my project. The importing code I am using is import * as data from './data/data.json'; Within my App function, I am initializing a state variable like this: const [jobsObject, setJobsObject ...
When setting up a mock service like this: // /catalogue/__mock__/catalogue.service.ts export const CatalogueService = jest.fn().mockImplementation(() => { return { filterRulesFor: jest.fn().mockImplementation((role: Roles): Rule[] => rules.filt ...
Hey there, I'm looking to customize my HTML layout in the following way: https://i.sstatic.net/mgE1G.png This is what I currently have: <app-list-employees></app-list-employees> <app-book-employee></app-book-employee> <app ...
I attempted to showcase an image from the library in my Ionic project. Here are the tools I utilized: Ionic 3 Angular 4 iOS emulator In the component file: const options: CameraOptions = { quality: 100, sourceType: PictureSourceTyp ...
When interacting with an Express.js API, I encountered a issue regarding the handling of auth tokens. The problem arose when sending the token in the request headers using Angular 4 compared to Postman. In Postman, setting the header named 'Authorizat ...
Using Angular version 11.0.2 I am encountering issues with the async pipe inside an ngIf template, where my data is not being properly refreshed. To illustrate this problem, I have created a simplified example. View code on Plunker To reproduce the issu ...
https://i.sstatic.net/H87Ei9Oy.pnghttps://i.sstatic.net/ZLzRxyLm.png After deploying my react app using Amplify, I encountered an issue where the music was not working properly. The error message "Uncaught (in promise) NotSupportedError: The element has n ...
Many questions have been raised about this particular issue, with varying answers that do not fully address the question at hand. So here we go again: In my case, setting the default value of a dropdown select by its value is not working. Why is that so? ...
After transitioning a one-time fetch request code snippet to my API, I encountered the following: let response = await fetch(visitURL, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization& ...
Currently, I am in the process of developing a build-a-burger website using Angular. The ingredients and inventory need to be updated dynamically based on the selected location. Users can choose the location from a dropdown menu in the navigation bar. The ...
How can I pass the selected option value from the login component to the home component without using local storage? When an option is selected in the login component, I want that value to be displayed in the home component. Below is the code snippet: Lo ...
As I am in the process of breaking down a large module into smaller ones, I have encountered an issue that needs to be addressed. Here are the specifics: The Search component is currently being used across multiple components. Initially, it was declared i ...
I have a fairly simple component: <template> <div> <chart v-if="!loading" ref="priceGraph" constructor-type="stockChart" :options="chartData" ...
I am in possession of the key StudentMembers[1].active, and now I must verify if this particular key exists within the following array const array= ["StudentMembers.Active", "StudentMembers.InActive"] What is the method to eliminate the index [1] from Stu ...
chargeCalculator() { let amount = ((document.getElementById('amount') as HTMLInputElement).value); let prescription = ((document.getElementById('prescription') as HTMLInputElement).value); let vision = ((document.getElementById('vi ...
Is there a way to define a callback type in TypeScript that can accept a variable number of generic type arguments while keeping the number of arguments fixed? For instance: export interface CustomFn { <T1>(value1: T1): boolean <T1,T2>(va ...
I'm having trouble implementing absolute paths in a Vite react-ts project. This is how I set up the project: npm init @vitejs/app npx: installed 6 in 1.883s √ Project name: ... test-vite √ Select a framework: » react √ Select a variant: » rea ...
In my Angular 6 project, I have a reactive form with numerous fields including dropdowns and number inputs. Some of these fields start with empty values while others default to true. Users are allowed to select any combination of fields, making it impossi ...
I am currently working on a ReactJs project where I am creating a game, but I have encountered an issue. I need to alternate turns between players and generate a random number between 1 and 10 for each player, storing this random number inside their respec ...
There is a JavaScript function that I am working with: const fn = (cb, param) => { cb(param); }; This function is meant to be called in two ways within TypeScript: const cb0 = () => {}; fn(cb0); const cb1 = (param: string) => { }; fn(cb1, &a ...