Draw image from 3.1

by Leo

HTML

<script src="//api.tiles.mapbox.com/mapbox-gl-js/v0.54.0-beta.2/mapbox-gl.js"></script>
<link rel="stylesheet" href="//api.tiles.mapbox.com/mapbox-gl-js/v0.54.0-beta.2/mapbox-gl.css">
<div id='map'></div>

CSS

body {
  margin: 0;
  padding: 0;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js'></script><link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.css' rel='stylesheet' />

JavaScript

var map = new mapboxgl.Map({
    container: 'map',
    zoom: 3,
    center: [0,0],
    maxZoom: 5,
    style: {
        version: 8,
        sources: {
            slippymap: {
                type: "raster",
                scheme: "xyz",
                tiles: [
                    "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png",
                    "https://b.tile.openstreetmap.org/{z}/{x}/{y}.png",
                    "https://c.tile.openstreetmap.org/{z}/{x}/{y}.png"
                ],
                tileSize: 256
            },
            "vs": {
                type: "vector",
                tiles: [
                    "http://localhost:9000/mapbox-tiles/epsg:3857/{z}/{x}/{y}.mvt"
                ],
                tileSize: 512,
                minzoom: 0,
                maxzoom: 18
            }

        },
        layers: [{id: "slippymap", type: "raster",source: "slippymap"}]
    }
});

map.showTileBoundaries = true;

function loadImage(path, callback) {
    var img = new Image();
    img.crossOrigin = 'Anonymous';
    img.onload = function () {
        callback.bind(img)(img);
    };
    img.src = path;
}

map.on('load', function () {
    var loadingState = {};

    loadImage("https://cdn1.iconfinder.com/data/icons/communication-vol-1/48/017-128.png", (stub) => {
        map.on('styleimagemissing', function (e) {
            if (loadingState[e.id]) {
                return;
            }
            loadingState[e.id] = true;

            map.addImage(e.id, stub);

            loadImage(e.id, (img) => {
                setTimeout(() => {
                    map.updateImage(e.id, img);
                    map.triggerRepaint();                    
                }, 2000);
            })
        });

        map.addLayer({
            id: "vsl",
            type: "symbol",
            source: "vs",
            "source-layer": "layer-selector-star",
            layout: {
                "icon-image": ["get", "i"],
                "icon-anchor":...