For some reason, my map does not load all the tiles when viewed on the web. Here is a link to the test data - http://bestersurveys.co.za/htmlsite/maptest.html

I have nothing funny in my code and really can't find a solution on the net, so can someone help me out?

Source Code:

<!DOCTYPE html>
    <meta charset='utf-8' />
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.35.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.35.0/mapbox-gl.css' rel='stylesheet' />
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }

    #fly {
        display: block;
        position: relative;
        margin: 0px auto;
        width: 50%;
        height: 40px;
        padding: 10px;
        border: none;
        border-radius: 3px;
        font-size: 12px;
        text-align: center;
        color: #fff;
        background: #ee8a65;
<div id='map'></div>
<button id='fly'>Fly</button>
mapboxgl.accessToken = 'pk.eyJ1Ijoic2VhbmRyYWFkbG96ZSIsImEiOiJjajA3cW1pOTcwMDA5Mndvd2hicHlmNWc1In0.7bt7sPXDoymYJyVDvVmqZw';
var start = [24.543,-32.254];
var end = [24.536281,
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/seandraadloze/cj1d6b9ri00eb2son1z7ejrhl',
    center: start,
    zoom: 13.8

var isAtStart = true;

document.getElementById('fly').addEventListener('click', function() {
    // depending on whether we're currently at point a or b, aim for
    // point a or b
    var target = isAtStart ? end : start;

    // and now we're at the opposite point
    isAtStart = !isAtStart;

        // These options control the ending camera position: centered at
        // the target, at zoom level 9, and north up.
        center: target,
        zoom: 18.9,
        bearing: 60,
        pitch: 60,

        // These options control the flight curve, making it move
        // slowly and zoom out almost completely before starting
        // to pan.
        speed: 0.4, // make the flying slow
        curve: 1, // change the speed at which it zooms out

        // This can be any easing function: it takes a number between
        // 0 and 1 and returns another number between 0 and 1.
        easing: function (t) {
            return t;


You might be running into https://github.com/mapbox/mapbox-gl-js/issues/4587.

Try downgrading to Mapbox GL JS 0.34.0 until a fix for that issue is released.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.