Forums

8.4+ Leaflet maps error or maybe caching?

Permalink
I have a few Leaflet maps on a page + some 2Gis maps (which are also based on the Leaflet library). I use a LocationIQ map service:https://locationiq.com/docs-html/index.html#desktop-maps-with-leafle... . Then I load the 3 scripts in my page header (in controller):
public function registerViewAssets($outputContent = '')
{
    $this->requireAsset('javascript', 'jquery');
    if ($this->api_key != '') {
        $html = $this->app->make('helper/html');
        $this->addHeaderItem($html->css("https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"));
        $this->addHeaderItem($html->javascript("https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"));
        $this->addHeaderItem($html->javascript("https://tiles.unwiredmaps.com/js/leaflet-unwired.js"));
    }
}

When I reload the page by clicking on the header menu link, either the marker is empty or I get a JS error: "TypeError: Leaflet.tileLayer.Unwired is not a function".

I've checked the path to the marker icon and when it's not loading its path is local, e.g. 
<img src="http://localhost/c585/index.php/images/marker-icon.png"...

but if I reload the page with F5, the marker loads correctly (most of the times but not always) and the marker icon image path is correct, e.g. 
<img src="https://unpkg.com/leaflet@1.5.1/dist/images/marker-icon.png"...

and without the JS error. If I press Ctrl-F5, then the marker always loads with icon and the JS error very rarely happens.

I can't pin-point what may be causing the marker icon not to load correctly and the JS error? If it was my script error, then the error on reload would have been consistent. But they're random, although consistent on pressing the menu.

I thought the problem may be caused by a conflict between the 2Gis and Leaflet maps if they are using the same library. So I added 
var Leaflet = L.noConflict();

to the view.js but this didn't help.

What can be wrong? Can it be something to do with caching? Or script load timing? Is it a concrete5 issue or Unwired's or Leaflet's?

Here's a fiddle FYI:http://jsfiddle.net/tL31gnxz/

If you remove the 2Gis bit:
DG.then(function() {
    InitTwoGisMap();
});

the Leaflet map loads fine.

Thank you.

1 Attachment

linuxoid