Draw image from 1.1

by Tristen Brown

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: ''
});

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,
                render: function () {
                    if (!this.dataForUpdate) {
                        return false;
                    }
                    console.log("!!! apply image data");
                    var data = this.dataForUpdate;
                    var width = stubData.width;
                    var height = stubData.height;

                    var bytesPerPixel = 4;
                    for (var x = 0; x < width; x++) {
                        for (var y = 0; y < height; y++) {
                            var offset = (y * width + x) * bytesPerPixel;
                            this.data[offset + 0] = data[offset + 0];
                            this.data[offset + 1] = data[offset + 1];
                            this.data[offset + 2] = data[offset + 2];
                           ...