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(...

[morey83]

ahhhhhhh dukoid... ca pourra sûrement corriger mon erreur !!! reste plus qu'à comprendre pourquoi j'ai :

Property '_leaflet_id' does not exist on type 'HTMLElement'

[krakatoa]

chez moi aucune erreur!

[morey83]

Krakatoa ... j'arrive !!!!!!!!!!!!! ;-)


Angular 8 ?
Leaflet 1.6.0 ?

import * as L from 'leaflet';

[dukoid]

map.component.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
<div class="map-container">
  <div class="map-frame">
    <div id="map"></div>
  </div>
</div>
 
 
import { Component, OnInit, AfterViewInit } from '@angular/core';
import * as L from 'leaflet';
 
@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit  {
  private map;
 
  constructor() { }
 
  ngOnInit() {
    this.initMap();
  }
 
  private initMap(): void {
    const tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 19,
      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    });
 
    const container = L.DomUtil.get('map');
    if (container != null) {
      container._leaflet_id = null;
    }
 
    this.map = L.map('map', {
      center: [ 39.8282, -98.5795 ],
      zoom: 3
    });
 
    tiles.addTo(this.map);
  }

Code :

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

1
2
3
4
 
<app-map></app-map>
<hr>
<app-map></app-map>

"leaflet": "1.5.1"
Angular 9

[morey83]

map.component.

Merci pour ton aide dukoid !!! mais impossible de faire marcher container._leaftlet_id = null !!!

Property '_leaflet_id' does not exist on type 'HTMLElement'.ts(2339)


En quick fix j'ai :

- declare property '_leaflet_id'
- add index signature for property '_leaflet_id'

j'ai testé les deux (mise à jour du lib.dom.d.ts) mais ca s'incidente au npm start

[dukoid]

Code :

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

1
2
3
4
5
6
7
8
 
   const container = L.DomUtil.get('map');
    if (container != null) {
 
console.log(container);      // essaye de voir si _leaflet_id    se nomme différemment !!!
 
container._leaflet_id = null;
    }

[morey83]

Ahhhh ouiiii je vois bien _leaflet_id dans le console.log(container) !!!
c'est peut être bon signe ;-)

div#map​
__zone_symbol__blurfalse: Array [ {…} ]
​__zone_symbol__clickfalse: Array [ {…} ]
​__zone_symbol__contextmenufalse: Array [ {…} ]
​__zone_symbol__dblclickfalse: Array [ {…} ]
​__zone_symbol__focusfalse: Array [ {…} ]
​__zone_symbol__keydownfalse: Array [ {…} ]
​__zone_symbol__keypressfalse: Array [ {…} ]
​__zone_symbol__keyupfalse: Array [ {…} ]
​__zone_symbol__mousedownfalse: Array(4) [ {…}, {…}, {…}, … ]
​__zone_symbol__mousemovefalse: Array [ {…} ]
​__zone_symbol__mouseoutfalse: Array [ {…} ]
​__zone_symbol__mouseoverfalse: Array [ {…} ]
​__zone_symbol__mouseupfalse: Array [ {…} ]
​__zone_symbol__pointerdownfalse: Array(3) [ {…}, {…}, {…} ]
​__zone_symbol__pointerupfalse: Array [ {…} ]
​__zone_symbol__scrollfalse: Array [ {…} ]
​__zone_symbol__wheelfalse: Array [ {…} ]
​_leaflet_dblclickdblclick4_2: function handler(e)​
_leaflet_events: Object { scroll1_2: handler(e), click4_2: handler(e), dblclick4_2: handler(e)
, … }
​_leaflet_id: 3
​_leaflet_pointerdowndblclick4_2: function onTouchStart(e)​
_leaflet_pointerupdblclick4_2: function onTouchEnd(e)​
_leaflet_touchstarttouchstart15_16: function ()
​_leaflet_touchstarttouchstart23_24: function ()
​accessKey: ""
​accessKeyLabel: ""
​align: ""
​assignedSlot: null
​attributes: NamedNodeMap(5) [ _ngcontent-fip-c6="", id="map", class="leaflet-container leaflet-touch leaflet-fade-anim leaflet-grab leaflet-touch-drag leaflet-touch-zoom", … ]
​baseURI: "http://localhost:4200/"
​childElementCount: 2
...

[dukoid]

https://asymmetrik.com/ngx-leaflet-t...l-angular-cli/

une astuce qui vaut de l'or : angular 8 LEAFLET
https://github.com/search?q=angular+8+LEAFLET

tu clones des projets, ensuite: npm install
plus qu'à tester ensuite mettre en double , re tester !

[morey83]

Après recherche approfondie.... j'ai pu réussir sur mon appli et j'ai mis en place une mini version sur stackblitz : https://stackblitz.com/edit/angular-ivy-jtreqk

me reste plus qu'à trouver un léger bug : tant que je ne bouge pas la souris, la map ne se charge pas entièrement !!! sûrement une histoire de invalidateSize à placer au bon endroit...

@dukoid : mon problème de _leaflet_id venait d'un package superflue que j'ai supprimé : "@types/leaflet": "^1.5.12"
(je n'ai plus souvenir pourquoi je l'avais installé)
merci encore pour ton aide !!!