I have implemented a LeafLet map in my Laravel 9 system, which is functioning properly with some exceptions.
Here's how it looks like: https://i.stack.imgur.com/kcuVr.jpg
The code in the controller (CompetitionsMapController.php) is as follows:
{
$data = Competition::all();
return view('map', ['data'=> $data]);
}
This is the link in the navigation blade:
<li ng-class="{'active': (currentRoute=='competition.map')}">
<a ui-sref="map">{{_('MAP')}}</a>
</li>
And here is what's defined in the public/js/app.js:
$stateProvider
.state('map', {
url: '/map',
parent: 'root',
views: {
'content@': {
templateUrl: 'map'
},
},
restricted: true
});
Everything works fine until I refresh the browser, then the map disappears.
As seen here: https://i.stack.imgur.com/OMM68.jpg
To make the map display again, I have to select another option on the navigation bar and come back to the MAP section. Even though Google Map works well after a browser refresh, this issue occurs only with the LeafLet map. Interestingly, if I include a simple JavaScript file within the application, it functions even after a refresh, suggesting that the problem lies specifically with the LeafLet map script.
Here is the LeafLet map script causing the issue:
var map = L.map('map').setView([57.36,15.26], 7);
mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© ' + mapLink + ' Contributors',
maxZoom: 18,
}).addTo(map);
So, I'm wondering what might be causing the problem and how can it be fixed?
While analyzing the error, I identified an issue in Safari:
Error: Can't find variable: L
eval code@
eval@[native code]
globalEval@http://127.0.0.1:8000/js/vendor.js:1:14516
M@http://127.0.0.1:8000/js/vendor.js:1:4621
append@http://127.0.0.1:8000/js/vendor.js:2:22024
@http://127.0.0.1:8000/js/vendor.js:2:23130
$e@http://127.0.0.1:8000/js/vendor.js:2:9577
html@http://127.0.0.1:8000/js/vendor.js:2:22802
@http://127.0.0.1:8000/js/vendor.js:22:14027
ye@http://127.0.0.1:8000/js/vendor.js:5:795
f@http://127.0.0.1:8000/js/vendor.js:4:25187
o@http://127.0.0.1:8000/js/vendor.js:4:20911
@http://127.0.0.1:8000/js/vendor.js:4:20442
c@http://127.0.0.1:8000/js/vendor.js:22:13517
@http://127.0.0.1:8000/js/vendor.js:22:13786
$broadcast@http://127.0.0.1:8000/js/vendor.js:6:4545
@http://127.0.0.1:8000/js/vendor.js:22:9167
o@http://127.0.0.1:8000/js/vendor.js:5:27411
@http://127.0.0.1:8000/js/vendor.js:5:27583
$digest@http://127.0.0.1:8000/js/vendor.js:6:1689
$apply@http://127.0.0.1:8000/js/vendor.js:6:3444
u@http://127.0.0.1:8000/js/vendor.js:5:9841
b@http://127.0.0.1:8000/js/vendor.js:5:11764
@http://127.0.0.1:8000/js/vendor.js:5:12237 – "<div ui-view=\"content\" class=\"ng-scope\" data-ng-animate=\"1\">"