Draw image from 1.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;
}

function getData(img) {
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    canvas.width = img.width,
        canvas.height = img.height;
    ctx.drawImage(img, 0, 0);
    return ctx.getImageData(0, 0, img.width, img.height);
}

// see src/style/style_image.js:36
map.on('load', function () {
    var loadingState = {};

    loadImage("https://cdn1.iconfinder.com/data/icons/communication-vol-1/48/017-128.png", (stub) => {

        var stubData = getData(stub);

        map.on('styleimagemissing', function (e) {
            if (loadingState[e.id]) {
                return;
            }
            loadingState[e.id] = true;
            
            var image = {
                width: stubData.width,
                height: stubData.height,
                data: stubData.data.slice(),
               ...