How to use MapBox MGLOpenGLStyleLayer to draw a triangle at the required geo coordinates

gistfile1.swift

import Foundation
import Mapbox
import GLKit


extension Double {
    func clamp(min: Double, max: Double) -> Double {
        return Double.minimum(Double.maximum(self, min), max)
    }
}

extension MGLMatrix4 {
    var asGLfloatArray: [GLfloat] {
        get {
            return [
                GLfloat(m00), GLfloat(m01), GLfloat(m02), GLfloat(m03),
                GLfloat(m10), GLfloat(m11), GLfloat(m12), GLfloat(m13),
                GLfloat(m20), GLfloat(m21), GLfloat(m22), GLfloat(m23),
                GLfloat(m30), GLfloat(m31), GLfloat(m32), GLfloat(m33)]
        }
    }
}

struct MapBoxUtil {
    static let DEG2RAD = Double.pi / 180.0
    static let RAD2DEG = 180.0 / Double.pi
    static let M2PI = Double.pi * 2.0
    static let EARTH_RADIUS_M = 6378137.0
    static let LATITUDE_MAX = 85.051128779806604
    static let LONGITUDE_MAX = 180.0
    static let DEGREES_MAX = 360.0
    static let PITCH_MIN = 0.0
    static let PITCH_MAX = Double.pi / 3.0
    static let MIN_ZOOM = 0.0
    static let MAX_ZOOM = 25.5
    static let MIN_ZOOM_F = MIN_ZOOM
    static let MAX_ZOOM_F = MAX_ZOOM
    static let DEFAULT_MAX_ZOOM = 22.0
    static let TILE_SIZE = 512.0

    static func project(coordinate: CLLocationCoordinate2D, zoom: Double) -> (Double, Double) {
        return MapBoxUtil.project(coordinate: coordinate, worldSize: pow(2.0, zoom))
    }

    static func project(coordinate: CLLocationCoordinate2D, worldSize: Double) -> (Double, Double) {
        let latitude = coordinate.latitude.clamp(min: -MapBoxUtil.LATITUDE_MAX, max: MapBoxUtil.LATITUDE_MAX)
        let x = MapBoxUtil.LONGITUDE_MAX + Double(coordinate.longitude)
        let y = MapBoxUtil.LONGITUDE_MAX - MapBoxUtil.RAD2DEG * log(tan(Double.pi / 4.0 + latitude * Double.pi / MapBoxUtil.DEGREES_MAX))
        let wx = x * worldSize / MapBoxUtil.DEGREES_MAX
        let wy = y * worldSize / MapBoxUtil.DEGREES_MAX
        return (wx * MapBoxUtil.TILE_SIZE, wy * MapBoxUtil.TILE_SIZE)
    }
}

class GliderLayer: MGLOpenGLStyleLayer {
    var program: GLuint = 0
    var vshader: GLuint = 0
    var fshader: GLuint = 0
    var buffer: GLuint = 0

    var apos: GLuint = 0
    var umatrix: GLint = 0

    override func didMove(to mapView: MGLMapView) {
        let vss:String =
        """
        uniform mat4 u_matrix;
        attribute vec2 a_pos;
        void main() {
            gl_Position = u_matrix * vec4(a_pos, 0, 1);
        }
        """

        let css:String =
        """
        void main() {
            gl_FragColor = vec4(0, 0.5, 0, 0.5);
        }
        """

        program = glCreateProgram()
        vshader = glCreateShader(GLenum(GL_VERTEX_SHADER))
        fshader = glCreateShader(GLenum(GL_FRAGMENT_SHADER))

        vss.data(using: .ascii)?.withUnsafeBytes{ (gp: UnsafePointer<GLchar>?) in
            var lp = gp
            glShaderSource(vshader, 1, &lp, nil)
            glCompileShader(vshader)
        }

        css.data(using: .ascii)?.withUnsafeBytes{ (gp: UnsafePointer<GLchar>?) in
            var lp = gp
            glShaderSource(fshader, 1, &lp, nil)
            glCompileShader(fshader)
        }

        glAttachShader(program, vshader)
        glAttachShader(program, fshader)
        glLinkProgram(program)

        apos = GLuint(glGetAttribLocation(program, "a_pos"))
        umatrix = GLint(glGetUniformLocation(program, "u_matrix"))

        glGenBuffers(1, &buffer)
    }

    override func draw(in mapView: MGLMapView, with context: MGLStyleLayerDrawingContext) {
        super.draw(in: mapView, with: context)

        // prepare vertices
        let borgo = CLLocationCoordinate2D(latitude: 43, longitude: 11)
        let parigi = CLLocationCoordinate2D(latitude: 48, longitude: 2)
        let mosca = CLLocationCoordinate2D(latitude: 55, longitude: 36)
        let (bx, by) = MapBoxUtil.project(coordinate: borgo, zoom: context.zoomLevel)
        let (px, py) = MapBoxUtil.project(coordinate: parigi, zoom: context.zoomLevel)
        let (mx, my) = MapBoxUtil.project(coordinate: mosca, zoom: context.zoomLevel)
        let triangle:[GLfloat] = [ GLfloat(px), GLfloat(py), GLfloat(bx), GLfloat(by), GLfloat(mx), GLfloat(my) ]

        glBindBuffer(GLenum(GL_ARRAY_BUFFER), buffer)
        glBufferData(GLenum(GL_ARRAY_BUFFER), MemoryLayout<GLfloat>.stride * 6, triangle, GLenum(GL_STATIC_DRAW))

        // draw
        glUseProgram(program)
        glBindBuffer(GLenum(GL_ARRAY_BUFFER), buffer)
        glEnableVertexAttribArray(apos)
        glVertexAttribPointer(apos, 2, GLenum(GL_FLOAT), GLboolean(UInt8(GL_FALSE)), 0, nil)
        glUniformMatrix4fv(umatrix, 1, GLboolean(UInt8(GL_FALSE)), context.projectionMatrix.asGLfloatArray)
        glDisable(GLenum(GL_STENCIL_TEST))
        glDisable(GLenum(GL_DEPTH_TEST))
        glDrawArrays(GLenum(GL_TRIANGLE_STRIP), 0, 3)
    }
}

So basically the context projectionMatrix expects data in the "tile sized" marcator projection space and you have to calculate them every time the zoom changes (the layer update is realtime so that add no complexity at all). A faster way would probably be to pass the zoom to the vertex shaders and do the project there