debug/markers-custom.html

<!DOCTYPE html>
<html>
<head>
    <title>Mapbox GL JS debug page</title>
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel='stylesheet' href='../dist/mapbox-gl.css' />
    <style>
        body { margin: 0; padding: 0; }
        html, body, #map { height: 100%; }
        #controls { position: absolute; top: 0; left: 0; }
        .marker {
            background-image: url('/debug/pin.png');
            background-size: cover;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            cursor: pointer;
        }
    </style>
</head>

<body>
<div id='map'></div>
<div id='controls'>
    <button id="animate">Animate</button><br />
    <label><input id='terrain-checkbox' type='checkbox'> terrain</label><br />
    <div>
        <label>Projection:</label>
        <select id="projName">
            <option value="mercator" selected>Mercator</option>
            <option value="globe">Globe</option>
            <option value="albers">Albers USA</option>
            <option value="equalEarth">Equal Earth</option>
            <option value="equirectangular">Equirectangular</option>
            <option value="lambertConformalConic">Lambert Conformal Conic</option>
            <option value="naturalEarth">Natural Earth</option>
            <option value="winkelTripel">Winkel Tripel</option>
        </select>
    </div>
</div>
<script src='../dist/mapbox-gl-dev.js'></script>
<script src='../debug/access_token_generated.js'></script>
<script>

var map = window.map = new mapboxgl.Map({
    container: 'map',
    devtools: true,
    zoom: 3,
    style: 'mapbox://styles/mapbox/streets-v9',
    hash: true,
});

const rots = ['horizon', 'horizon', 'horizon', 'horizon'];
const pits = ['auto', 'auto', 'auto'];

const spinningMarkers = [];
rots.forEach((rotationAlignment, i) => {
    pits.forEach((pitchAlignment, j) => {
        var bounds = map.getBounds();
        var s = bounds.getSouth();
        var n = bounds.getNorth();
        var w = bounds.getWest();
        var e = bounds.getEast();

        var lng = w + (e - w) * ((i + .5) / 4);
        var lat = s + (n - s) * ((j + .5) / 3);

        var popup = new mapboxgl.Popup().setHTML(`Pitch Alignment: ${pitchAlignment}<br>Rotation Alignment: ${rotationAlignment}`);

        var r = Math.round(Math.random() * 255);
        var g = Math.round(Math.random() * 255);
        var b = Math.round(Math.random() * 255);

        var sc = Math.random() * 2.5 + 0.5;

        const el = document.createElement('div');
        el.className = 'marker';

        var marker = new mapboxgl.Marker({
            element: el,
            offset: [0, -25],
            draggable: true,
            rotationAlignment,
            pitchAlignment
        })
            .setLngLat([lng, lat])
            .setPopup(popup)
            .addTo(map);

        marker.togglePopup();

        spinningMarkers.push(marker);
    });
});

let animate = false;
document.getElementById('animate').addEventListener('click', () => {
    animate = !animate;
    if (animate) {
        spinMarkers();
    }
});

let rotation = 0;
function spinMarkers() {
    rotation++;
    spinningMarkers.forEach((marker) => {
        marker.setRotation(rotation);
    });
    if (animate) {
        window.requestAnimationFrame(spinMarkers);
    }
}
window.requestAnimationFrame(spinMarkers);

map.addControl(new mapboxgl.NavigationControl());

map.on('load', function() {
    map.addSource('mapbox-dem', {
        "type": "raster-dem",
        "url": "mapbox://mapbox.mapbox-terrain-dem-v1",
        "tileSize": 512,
        "maxzoom": 14
    });

    map.setFog({});
});

document.getElementById('terrain-checkbox').onclick = function() {
    map.setTerrain(this.checked ? {"source": "mapbox-dem", "exaggeration": 10} : null);
};

document.getElementById('projName').addEventListener('change', (e) => {
    const el = document.getElementById('projName');
    map.setProjection(el.options[el.selectedIndex].value);
});
</script>

</body>
</html>