[SOLVED] MapBox at Index page is display well. When back from third level page, the map is not display

1

The mapbox in the index page is working fine. Then i go to 2nd level page and back to index page it is fine too. The problem come when i go to 3rd Level and back to 2nd Level then back to index page, the map is gone. I don’t know what happen

I have the video to show the problem.

Script below:
HTML:

    <!-- Scrollable page content-->
    <div class="page-content">
		<div class="row no-gap mybar">
			<!-- Each "cell" has col-[width in percents] class -->
			<div class="col-33">
				<div class="lf-country br-1">
				     <div data-pagination='{"el": ".swiper-pagination"}' data-loop="true" class="swiper-container swiper-init swiper">
					  <div class="swiper-wrapper">
						<div class="swiper-slide"><div id="cn"></div></div>
						<div class="swiper-slide"><div id="hk"></div></div>
						<div class="swiper-slide"><div id="in"></div></div>
						<div class="swiper-slide"><div id="id"></div></div>
						<div class="swiper-slide"><div id="jp"></div></div>
						<div class="swiper-slide"><div id="kr"></div></div>
						<div class="swiper-slide"><div id="my"></div></div>
						<div class="swiper-slide"><div id="ph"></div></div>
						<div class="swiper-slide"><div id="sg"></div></div>
						<div class="swiper-slide"><div id="tw"></div></div>
						<div class="swiper-slide"><div id="th"></div></div>
						<div class="swiper-slide"><div id="us"></div></div>
						<div class="swiper-slide"><div id="vn"></div></div>
					  </div>
					</div>
				   <div class="display-country-name">
					   <h2 id="location-title">China</h2>
				   </div>
				   <div class="display-country-data">
						<h2>11</h2>
						<p>DCS</p>
				   </div>
				</div>
			</div>
			<div class="col-33 br-1 bg-white">
				<div class="lf-dcs bb-1">
					<div class="display-data">
						<h2>11</h2>
						<p>DCS</p>
					</div>
				</div>
				<div class="lf-gfm">
				    <div class="display-data">
						<h2>1</h2>
						<p>GFM</p>
					</div>
				</div>
			</div>
			
			<div class="col-33 bg-white">
				<div class="lf-tms bb-1">
				    <div class="display-data">
						<h2>10</h2>
						<p>TMS</p>
					</div>
				</div>
				<div class="lf-office">
				    <div class="display-data">
						<h2>1</h2>
						<p>Office</p>
					</div>
				</div>
			</div>
			
		</div>
     <div class="display-block" style="height:calc(100% - 121px)"><div id="map"></div></div>

    </div>
    </div>
  </div>

  <!-- Catalog View -->
  <div id="view-catalog" class="view tab">
    <!-- Catalog page will be loaded here dynamically from /catalog/ route -->
  </div>

App.js
mapboxgl.accessToken = ‘pk.eyJ1IjoiY2h1bmdrYW0iLCJhIjoiY2pib3E4dG56NWo5djMzbXIwbms2cmk4diJ9.slnvqDsAB_v_ub_tMiC64A’;
var map = new mapboxgl.Map({
container: ‘map’,
attributionControl: false,
style: ‘mapbox://styles/chungkam/cjttgkh8l0w5o1fppq0wkf90z’,
center: [114.15, 22.385024],
zoom: 9.80
});

// Init/Create views
var homeView = app.views.create(’#view-home’, {
url: ‘/’
});

var catalogView = app.views.create(’#view-catalog’, {
url: ‘/catalog/’
});

Route.js
routes = [
{
path: ‘/’,
url:’./LFLogisticsNetwork.html’,

},

{
path: ‘/result-detail/’,
url: ‘./pages/catalog-dc.html’,
},

{
path: ‘/catalog/’,
url: ‘./pages/catalog.html’,
tabs: [
// First (default) tab has the same url as the page itself
{
path: ‘/’,
id: ‘in-country’,
// Fill this tab content from content string
url: ‘./pages/in-country.html’,
},
// Second tab
{
path: ‘/gfm/’,
id: ‘gfm’,
// Fill this tab content via Ajax request
url: ‘./pages/gfm.html’,
},
// Third tab
{
path: ‘/osg/’,
id: ‘osg’,
// Load this tab content as a component via Ajax request
componentUrl: ‘./pages/osg.html’,
},
],

},

{
path: ‘/list-index/’,
componentUrl: ‘./pages/list-index.html’,
},

2

Hi, I noticed that you have two paths as root defined. I suspect a typo or url parameter missing ?

Ps, you can also put JS between backticks :wink:

3

And make sure you do map initialization in index page pageInit event

5

Hi Vladimir,
I had change the map to google map and from your guidance map initialization in index page pageInit event it working fine now… Thank you.

Index.html

var map;
function initMap() {
map = new google.maps.Map(document.getElementById(‘map’), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
};

$(document).on(‘page:init’, function (e) {
initMap();
});

(script src=“https://maps.googleapis.com/maps/api/js?key=YourKey&callback=initMap” async defer) (/script)

6

Hi Erik… Thank you for your guidance… :wink: