Appeler un composant Leaflet plusieurs fois

Version imprimable

Quand j'appelle mon composant une fois ca fonctionne :

Code:

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

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

Citation:

"Map container is already initialized."

html :

Code:

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

typescript :
Code:

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:

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

typescript :
Code:

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 });

Code:

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

19/06/2020, 10h45
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."
19/06/2020, 11h20
krakatoa

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

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

Citation:

"Map container is already initialized."

composant père (appelé plusieurs fois) :

Code:

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

composant enfant :

html :

Code:

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

typescript :
Code:

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 }); }

Code:

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

19/06/2020, 12h26
morey83

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

Citation:

Property '_leaflet_id' does not exist on type 'HTMLElement'
19/06/2020, 12h42
krakatoa

chez moi aucune erreur!
19/06/2020, 13h18
morey83

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

Angular 8 ?
Leaflet 1.6.0 ?

import * as L from 'leaflet';

map.component.

Code:

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:

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

"leaflet": "1.5.1"
Angular 9

19/06/2020, 14h55
morey83

Citation:

Envoyé par dukoid

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

Code:

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;
    }

19/06/2020, 16h10
morey83

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

Citation:

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
...
19/06/2020, 16h23
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 !
19/06/2020, 23h07
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 !!!