Level 54
Can you post your controller and blade? Use 3 back ticks before and after to make a code block.
1 like
May 12, 2021
24
Level 3
Mapbox map is Blank (Basic install)
When I use the basic Mapbox script and div on an html page it works fine, but within blade, the map is blank.
Similar to this: https://laracasts.com/discuss/channels/code-review/mapbox-layer-not-loading-when-imported-into-laravel
(which received no solution)
Anyone using Mapbox successfully in Blade? Or anyone run into a similar issue with an integration that had a similar problem?
Chrome Dev Tools shows all "Sources" loading properly, and the Network tab loads everything properly. The only error in the console is for popper.js.map not loading properly, but it says that on a Laragon default Laravel install.
Thoughts?
Level 3
app.blade.php
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src='https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css' rel='stylesheet' />
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
<div class="container">
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav mr-auto">
</ul>
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ml-auto">
<!-- Authentication Links -->
@guest
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
</li>
@if (Route::has('register'))
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
</li>
@endif
@else
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }}
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
@csrf
</form>
</div>
</li>
@endguest
</ul>
</div>
</div>
</nav>
<main class="py-4">
@yield('content')
</main>
</div>
@stack('child-scripts')
</body>
</html>
Blade View
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">{{ __('Dashboard') }}</div>
<div class="card-body">
@if (session('status'))
<div class="alert alert-success" role="alert">
{{ session('status') }}
</div>
@endif
{{ __('You are logged in!') }}
</div>
</div>
</div>
{{--Map Goes Here--}}
<div class="col-md-12">
<div id='map' style='width: 400px; height: 300px;'></div>
</div>
</div>
</div>
@endsection
@push('child-scripts')
<script>
mapboxgl.accessToken = 'MyCorrectTokenIsHere';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11'
});
</script>
@endpush
There is nothing in the controller that affects this. There is only HTML and JS
Level 54
Do you see any errors in your browser console?
Where are you loading the mapboxgl module from?
Level 3
As I mentioned in the original post;
The only error in the console is for popper.js.map not loading properly, but it says that on a Laragon default Laravel install.
This should have nothing to do with Mapbox
Level 54
are you seeing any js rendered in your view if you inspect with developer tools?
Level 3
Yes. It renders the script tag at the bottom:
mapboxgl.accessToken = 'MyTokenIsHere';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11'
});
It also renders the box for the map and the little mapbox logo underneath the box, just not the map itself.
Level 54
Is the #map element the same height you are expecting? I’ve have maps disappear due to css being knocked out and my map being displayed and hidden outside the element it’s in.
Within your inspect element part of your web tools, check css and height of element,
Level 3
This is what shows for the map element:
<canvas tabindex="0" aria-label="Map" role="region" width="400" height="300" class="mapboxgl-canvas" style="width: 400px; height: 300px;"></canvas>
Level 1
Hi Wallyj I was having the same problem as you are having I solved this problem by removing the script Code in head tag
Level 3
Maybe I'm not understanding correctly, but if I remove the script code in the head tag the mapbox doesn't show up at all.
If you remove the script tag in the head, where does the app get the Mapbox JavaScript from?
Level 28
Level 3
Ok. Tried that. Map is still blank, but at least the box is back. :)
Level 28
open chrome dev tools on that page right click on reload and choose "Empty Cache and Hard Reload" from the contextual menu
Level 3
Good idea. Still blank.
Level 28
Level 3
Thanks, but this is not a Mapbox issue. This is a Laravel issue.
I have an index.html page using the exact same code as my Blade pages, and it works just fine.
Separating the code into app.blade.php and home.blade.php somehow breaks it.
I run this to pull up my index.html file and it works like a champ!
Route::get('/test', function() {
return File::get(public_path() . '/index.html');
});
But I need to use the mapbox functionality in my Laravel app, so I need to figure this out.
I appreciate the suggestions, but somehow Laravel is breaking this functionality.
It is making me start to wonder if this error is somehow causing a problem or identifying a conflict in the js:
I never specifically loaded popper so I assumed it was failing as part of the default Laravel install from Laragon, but now I'm not sure.
Level 28
if you think maybe popper is giving you trouble comment out the require for popper in bootstrap.js
if you have access to another testing server like wamp or mamp try this to rule out the dev environment.
1 like
Level 28
I realize it is not a mapbox issue
Mapbox GL JS maps (including the Mapbox Studio style editor and dataset editor) can fail to display because of issues with your browser, your network, your computer, or some combination of all three. WebGL compatibility can be tricky to troubleshoot, but here are some general guidelines and resources:
can be tricky to troubleshoot it says
1 like
Level 28
popper.js.map not loading properly,
This is an unrelated problem and to make it stop see this stack overflow
1 like
Level 28
This is my app.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Styles -->
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
{{--<link rel="stylesheet" href="{{ asset('css/app.css') }}">--}}
<script src='https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css' rel='stylesheet' />
<!-- Scripts -->
{{--<script src="{{ asset('js/app.js') }}" defer></script>--}}
</head>
<body>
<div class="m-4">
@yield('content')
</div>
</body>
</html>
and this is my welcome.blade.php
@extends('layouts.app')
@section('content')
<div id='map' style='width: 400px; height: 300px;'></div>
<script>
mapboxgl.accessToken = 'myTokenGoesHere';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11'
});
</script>
@endsection
and I see the map in my browser fine so there is something else going on. I cannot find any posts anywhere where blade is the cause so something else is the culprit in your situation.
EDIT
see the post below :)
Level 3
Thanks for checking that! I will take a look and see what else I can find! Thanks again! I may try a fresh Laravel install, not from Laragon.
Level 28
Read the reply below
Level 28
I see that you are pushing the scripts to the head of the app.blade.php but it says that you will add
<div id='map' style='width: 400px; height: 300px;'></div>
<script>
mapboxgl.accessToken = 'myTokenGoesHere';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11'
});
</script>
to the body of the file that you want the map to show up in so put in the
<div id='map' style='width: 400px; height: 300px;'></div>
<script>
mapboxgl.accessToken = 'myTokenGoesHere';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11'
});
</script>
in the blade view together and do not separate them from each other.
Level 28
Because when you push the script to the app.blade in ends up before the div with the id of map so it does not render the map just the div or the canvas.
EDIT
Actually I just did it using the push and it works fine.
Let me know how it goes because I am stumped.
so when you are using it in the html file
Route::get('/test', function() {
return File::get(public_path() . '/index.html');
});
do you include any other js ?
if not then maybe you should systematically add calls to each of the other scripts one at a time until the map disappears if that was to happen you would know if there is a conflict with one of the other js libraries.
Please or to participate in this conversation.