Discussion :

[morey83]

Quand j'appelle mon composant une fois ca fonctionne :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<map-affiche [lat]="lat" [lng]="lng"></map-affiche>

mais quand je l'appelle plusieurs fois j'ai une erreur :

"Map container is already initialized."

html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="map" class="center"></div>

typescript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
  @Input() lat: number;
  @Input() lng: number;
 
  ngOnInit() {
    const map = L.map('map', {
      center: [this.lat, this.lng],
      zoom: 19,
      attributionControl: false
    });
   }

Avez vous une idée ? Merciiiiiiiiii

ps : j'ai essayé de rendre dynamic le container mais en vain :

html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="{{ 'map' + id }}" class="center"></div>

typescript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
    let variable = 'map' + this.id;
 
    var map = L.map(this[variable], {
      center: [this.lat, this.lng],
      zoom: 19,
      attributionControl: false
    });

[dukoid]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
private map;
...
...
 this.map = L.map(....
...

[morey83]

Merci beaucoup dukoid !!! Mais rien à faire (même en déclarant la variable en private)... avec plusieurs appels sur ce component j'ai le message ERROR Error: "Map container not found."

[krakatoa]

n'utilise pas l'ajout de id, ce n'est pas necessaire

[morey83]

Merci @krakatoa !!! Mais si je n'utilise pas les variables dynamiques j'obtiens ce message d'erreur :

"Map container is already initialized."

composant père (appelé plusieurs fois) :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<map-affiche [lat]="lat" [lng]="lng"></map-affiche>

composant enfant :

html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="map" class="center"></div>

typescript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
  @Input() lat: number;
  @Input() lng: number;
 
   private map;
 
  ngOnInit() {
    this.map = L.map('map', {
      center: [this.lat, this.lng],
      zoom: 19,
      attributionControl: false
    });
   }

[dukoid]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
  private map;
...
...
 
 
    const container = L.DomUtil.get('map');
    if (container != null) {
      container._leaflet_id = null;
    }
 
    this.map = L.map(...