fixphrase.com/js/map_maplibre.js

/*
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */

function maplibreMap() {

    var theme = "liberty";

    $("#mapbox").css("background-color", "#EFEFEF");

    var map = new mapboxgl.Map({
        container: 'mapbox',
        style: "https://maps.netsyms.net/styles/osm-liberty-hillshading/style.json",
        //attributionControl: false,
        interactive: true,
        pitch: 0,
        zoom: 1,
        maxZoom: 20,
        continuousWorld: false,
        noWrap: true,
        center: [-97, 38]
    });

    map.on('click', function (e) {
        var coordinates = e.lngLat;
        try {
            $('.mapboxgl-popup').remove();
            var words = FixPhrase.encode(coordinates.lat, coordinates.lng);
            var popup = new mapboxgl.Popup();
            popup.setLngLat(e.lngLat);
            popup.on('close', clearRectangle);
            popup.setHTML("<b><span class='copyonclick'>" + words + "</span></b><br>" + (Math.round(coordinates.lat * 10000) / 10000) + ", " + (Math.round(coordinates.lng * 10000) / 10000));
            popup.addTo(map);
            drawRectangle(
                    coordinates.lat - (0.0001 / 2),
                    coordinates.lng - (0.0001 / 2),
                    coordinates.lat + (0.0001 / 2),
                    coordinates.lng + (0.0001 / 2)
                    );
            map.flyTo({
                center: e.lngLat,
                zoom: Math.max(map.getZoom(), 14)
            });
        } catch (e) {
            alert(e);
        }
        return;

        // Example of accessing the PHP API instead of using JS
        $.getJSON("lookup.php", {
            latitude: coordinates.lat,
            longitude: coordinates.lng
        }, function (resp) {
            $('.mapboxgl-popup').remove();
            var popup = new mapboxgl.Popup();
            popup.setLngLat(e.lngLat);
            popup.setHTML("<b><span class='copyonclick'>" + resp.words + "</span></b><br>" + (Math.round(resp.coords[0] * 10000) / 10000) + ", " + (Math.round(resp.coords[1] * 10000) / 10000));
            popup.addTo(map);
            map.flyTo({
                center: e.lngLat,
                zoom: Math.max(map.getZoom(), 14)
            });
        });
    });

    map.addControl(new mapboxgl.NavigationControl({
        visualizePitch: true
    }), 'top-left');

    map.addControl(new mapboxgl.GeolocateControl({
        positionOptions: {
            enableHighAccuracy: true,
            timeout: 10 * 1000
        },
        fitBoundsOptions: {
            maxZoom: 16
        },
        trackUserLocation: true
    }), 'top-left');

    map.addControl(new mapboxgl.ScaleControl({
        unit: "imperial"
    }));

    map.mapEasing = function (t) {
        return t * (2 - t);
    };

    map.setMapHeading = function (heading) {
        if (typeof heading == 'number') {
            map.easeTo({
                bearing: heading,
                easing: map.mapEasing
            });
        }
    };

    map.setMapLocation = function (latitude, longitude) {
        map.easeTo({
            center: [
                longitude,
                latitude
            ]
        });
    };

    map.animateMapIn = function (latitude, longitude, zoom, heading) {
        if (typeof zoom == 'undefined') {
            zoom = 10;
        }
        if (typeof heading == 'undefined') {
            heading = 0;
        }
        map.flyTo({
            center: [
                longitude,
                latitude
            ],
            speed: 1,
            zoom: zoom,
            heading: heading,
            pitch: 0
        });
    };

    map.addMarker = function (latitude, longitude) {
        var el = document.createElement("div");

        el.className = "map-marker";
        new mapboxgl.Marker(el).setLngLat([longitude, latitude]).addTo(map);
    };

    map.removeMarkers = function () {
        var oldmarkers = document.getElementsByClassName("map-marker");
        if (oldmarkers.length > 0) {
            markerparent = oldmarkers[0].parentNode;
            while (oldmarkers.length > 0) {
                markerparent.removeChild(oldmarkers[0]);
            }
        }
    }

    return map;
}