Game/www/js/map_mapbox.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 mapboxMap() {
    mapboxgl.accessToken = '';
    var map = new mapboxgl.Map({
        container: 'mapbox',
        style: SETTINGS['map_style_json'],
        attributionControl: false,
        dragPan: false,
        pitch: 0,
        zoom: 0,
        maxZoom: 20
    });

    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.updatePlaceLayer = function (data) {
        var oldmarkers = document.getElementsByClassName("place-marker");
        if (oldmarkers.length > 0) {
            markerparent = oldmarkers[0].parentNode;
            while (oldmarkers.length > 0) {
                markerparent.removeChild(oldmarkers[0]);
            }
        }
        data.features.forEach(function (place) {
            var el = document.createElement("div");
            el.className = "place-marker";
            if (place.properties.teamid != null && place.properties.teamid > 0) {
                el.className += " place-color-" + SETTINGS["teams"][place.properties.teamid]["color"];
            }

            el.addEventListener('click', function () {
                openPlace(place.properties.id, place.properties.name);
            });

            new mapboxgl.Marker(el)
                    .setLngLat(place.geometry.coordinates)
                    .addTo(map);
        });
    }

    map.animateMapIn = function (latitude, longitude, zoom, heading) {
        if (typeof zoom == 'undefined') {
            zoom = 17;
        }
        if (typeof heading == 'undefined') {
            heading = 0;
        }
        map.flyTo({
            center: [
                longitude,
                latitude
            ],
            speed: 0.7,
            zoom: zoom,
            heading: heading,
            pitch: 45
        });
        // Set min zoom after some time to fly in
        setTimeout(function () {
            map.setMinZoom(15);
            map.setPitch(45);
            map.setZoom(zoom);
        }, 1000);
    }

    var dpPoint = null;
    var dpPitch = null;

    map.on('touchstart', function (data) {
        if (data.points.length == 2) {
            var diff = Math.abs(data.points[0].y - data.points[1].y);
            if (diff <= 50) {
                dpPoint = data.point;
                map.touchZoomRotate.disable();
                dpPitch = map.getPitch();
            }
        }
    });

    map.on('touchmove', function (data) {
        if (dpPoint) {
            data.preventDefault();
            var pitchdiff = (dpPoint.y - data.point.y) * 0.5;
            map.setPitch(dpPitch + pitchdiff);
        }
    });

    map.on('touchend', function (data) {
        if (dpPoint) {
            map.touchZoomRotate.enable();
        }
        dpPoint = null;
        dpPitch = null;
    });

    map.on('touchcancel', function (data) {
        if (dpPoint) {
            map.touchZoomRotate.enable();
        }
        dpPoint = null;
        dpPitch = null;
    });

    return map;
}