MapBox/Open Layers карта рендеринга плитки неправильно

Question

Согласно изображению, я пытаюсь сделать карту в OpenLayers/MapBox со следующим кодом:

var map = new ol.Map({ 
    layers: [ 
     new ol.layer.Tile({ 
     source: new ol.source.XYZ({ 
     url: 'https://api.mapbox.com/styles/v1/mapbox/streets-v9/tiles/512/{z}/{y}/{x}?access_token=<the access token goes here>' 
     }) 
     }) 
    ], 
    target: 'map', 
    controls: ol.control.defaults({ 
     attributionOptions: /** @type {olx.control.AttributionOptions} */ ({ 
     collapsible: false 
     }) 
    }), 
    view: new ol.View({ 
     center: [0, 0], 
     zoom: 2 
    }) 
    }); 

HTML:

{% extends "layout.html" %} 

{% block head %} 
<link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/css/ol.css" type="text/css"> 
<link href='http://mapbox.com/base/latest/base.css' rel='stylesheet'/> 
{% endblock %} 

{% block body %} 
<main id="content"> 
<div id="map" class="map" tabindex="0"></div> 
</main> 
<script src="https://openlayers.org/en/v4.0.1/build/ol.js"></script> 
<script src="{{ url_for('static', filename='js/search/map.js')></script> 

{% endblock %} 

Очевидно, что карта не отображается правильно. Кто-нибудь сталкивался с этим раньше?

Answer 1

Действительно глупо ошибка. У меня был z, y, x в URL, а не z, x, y!

url: 'https://api.mapbox.com/styles/v1/mapbox/streets-v9/tiles/512/{z}/{y}/{x}?access_token=<the access token goes here>