MapBox/Open Layers map rendering tiles incorrectly

Question

As per the image above, I am trying to render a map in OpenLayers/MapBox with the following code:

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 %}

Obviously the map is not rendering correctly. Anyone come across this before?

Answer 1

Really silly mistake. I had z, y, x in the url rather than 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>