0

Leaflet & Leaflet GPX not displaying path with Document Fragment.

Document fragment element is selected with

let El = MobileDomFragment.querySelector('#Xpl-map-'+i);
let MiniMap = L.map(El,{scrollWheelZoom: true}).setView([Coord.lat,Coord.lng], 13);

Markers are on the map (default map marker AND GPX Marker), but not the path. I want to use Document fragment to append multiple map/layer to multiple Div and load all at the same time.

Before trying this method, I appended Document Fragment to Dom then append each map to each div, and it worked. But now, can't find why Path not displaying on map.

Tried to check css, but seems the problem is here : When Path append to map, a is generated with d attribute :

<path class="leaflet-interactive" stroke="blue" stroke-opacity="1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none" d="M121 235L111 232L107 229L103 229L105 221L111 212L121 210L132 211L146 206L151 201L151 191L158 177L161 172L165 173L168 169L155 162L147 163L144 161L144 145L148 139L152 138L159 132L157 126L153 121L155 119L161 119L169 123L173 123L181 128L190 130L200 130L201 132L209 135L213 134L206 127L196 121L191 115L194 112L205 118L218 120L218 118L209 113L200 105L192 92L189 83L190 78L196 83L198 87L200 87L201 84L191 66L189 58L190 59L188 59L188 57L205 69L206 68L204 68L201 59L206 61L207 60L207 62L209 63L209 60L203 51L211 51L216 54L223 65L230 69L232 63L228 51L224 47L223 42L230 36L235 34L252 16"></path>

When using document Fragment, d attribute is almost empty

<path class="leaflet-interactive" stroke="blue" stroke-opacity="1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none" d="M0 0L0 0"></path>

Do you have any idea ?

UPDATE :

Here is some code from my project :

// Get JSON File
var MyObject = Object.keys(XplJSON);

// Function Create Mini Map
function SetMiniMap(i, El){
    let MiniMap, MiniMapmarker, MiniMapGpx, GpxDataFunction, SelectChartMobile;    
    MiniMap = L.map(El,{scrollWheelZoom: true}).setView([XplJSON[MyObject[i]].Coord.lat, XplJSON[MyObject[i]].Coord.lng], 13);

    // Mobile Layer Add From Array already created (Needed to have one unique Layer per map
    LayersMobile[MyObject[i]]['Terrain'].addTo(MiniMap)
   
    // Marker map
    MiniMapmarker = L.marker([XplJSON[MyObject[i]].Coord.lat, XplJSON[MyObject[i]].Coord.lng], { icon: InterestIcon});
    MiniMapmarker.bindPopup("<span class='PopupClick' onclick='onPopupClick(this)'>"+MyObject[i]+"</span>");
    MiniMapmarker.addTo(MiniMap);
    // Path to GPX
    MiniMapGpx = MyObject.Gpx;
     
        new L.GPX(MiniMapGpx, {
            async: true,
            polyline_options: {color: "#f4ff00" , weight: 3, opacity: 1.0,},
        }).on('loaded', function(e) {
          MiniMap.fitBounds(e.target.getBounds());
        }).addTo(MiniMap);
}

// Loop Object in JSON
for(i in MyObject){    
    let Item =  '<div class="Xpl-map" id="Xpl-map-'+i+'"></div>';
    // fragmentFromString return document.createRange().createContextualFragment(strHTML) 
    MobileDomFragment.append(fragmentFromString(Item))  
    SetMiniMap(i, MobileDomFragment.querySelector('#Xpl-map-'+i))
    Apps.append(MobileDomFragment)
}
Lucas
  • 85
  • 9
  • Your problem is with a Layer, so please share the code where you add the layer – Falke Design Feb 28 '22 at 13:18
  • @FalkeDesign Thank you ! I updated my post with some Code. Tried to post the most important. Tell me If you need the whole project or something else ! – Lucas Feb 28 '22 at 13:40
  • have you tried to switch `SetMiniMap(i, MobileDomF....` and `Apps.append(MobileDomFragment)`? – Falke Design Feb 28 '22 at 13:58
  • I did, but When Document Fragment is appended it's destroy, so nothing can be append after that. Moreover, "Apps.append" is in the loop for the moment, but at the end, I will have only one "Apps.append" with the entire MobileDomFragment. This is why I need to create GPX Path in document fragment. Tried many things, but nothing works. Sometimes, path appeared, but when I reloaded, it does not appear. It seems It does not have time to be parsed to my Document Fragment or something like that. Tried Async false/true but not working :( – Lucas Feb 28 '22 at 14:06
  • UPDATE : Found a "hack". When I am doing ._onResize() on the map, the path appear. – Lucas Feb 28 '22 at 15:24
  • 1
    Then try `map.invalidateSize()` – Falke Design Feb 28 '22 at 15:53

0 Answers0