Map

mapboxgl.accessToken = '<private API key>';
var map = new mapboxgl.Map({
    container: 'map',
    style: '<map base style>',
    center: [0, 0],
    zoom: 0,
    bearing: 0,
    pitch: 0.00001
});

map.on("load", function () {
    // Insert the layer beneath any symbol layer.
    var layers = map.getStyle().layers;

    var labelLayerId;
    for (var i = 0; i < layers.length; i++) {
        if (layers[i].type === "symbol" && layers[i].layout["text-field"]) {
            labelLayerId = layers[i].id;
            break;
        }
    }

    map.addLayer({
            id: "3d-buildings",
            source: "composite",
            "source-layer": "building",
            filter: ["==", "extrude", "true"],
            type: "fill-extrusion",
            minzoom: 17,
            paint: {
                "fill-extrusion-color": "#313131",

                // use an 'interpolate' expression to add a smooth transition effect to the
                // buildings as the user zooms in
                "fill-extrusion-height": [
                    "interpolate", ["linear"],
                    ["zoom"],
                    17,
                    0,
                    20, ["get", "height"]
                ],
                "fill-extrusion-base": [
                    "interpolate", ["linear"],
                    ["zoom"],
                    17,
                    0,
                    20, ["get", "min_height"]
                ],
                "fill-extrusion-opacity": 0.8
            }
        },
        labelLayerId
    );
});


var chapters = {
    'intro': {
        center: [0, 0],
        zoom: 0,
        bearing: 0,
        pitch: 0.00001
    },

    'par-lines-cut-transversal': {
        bearing: 27,
        center: [-122.200541, 37.751443],
        zoom: 17,
        bearing: 0,
        pitch: 100
    },
    'perp-lines': {
        center: [-122.390243, 37.790667],
        bearing: 180,
        zoom: 20
    },
    'trap': {
        bearing: 0,
        center: [-122.268278, 37.870059],
        zoom: 20
    },
    'ss-interior': {
        bearing: 180,
        center: [-122.390243, 37.790667],
        zoom: 20
    },
    'vert-angles': {
        bearing: 90,
        center: [-122.283443, 37.873951],
        zoom: 20
    },
    'alt-exterior': {
        bearing: 180,
        center: [-122.390243, 37.790667],
        zoom: 20
    },
    'angle-bisector': {
        bearing: 90,
        center: [-122.398831, 37.801154],
        zoom: 20
    },
    'paral': {
        bearing: 0,
        center: [-73.994979, 40.704635],
        zoom: 20
    },
    'cpct': {
        bearing: 90,
        center: [-0.126991, 51.519331],
        zoom: 15
    },
    'rectangle': {
        bearing: 100,
        pitch: 100,
        center: [-0.129478, 51.512019],
        zoom: 20
    }
};

// On every scroll event, check which element is on screen
window.onscroll = function () {
    var chapterNames = Object.keys(chapters);
    for (var i = 0; i < chapterNames.length; i++) {
        var chapterName = chapterNames[i];
        if (isElementOnScreen(chapterName)) {
            setActiveChapter(chapterName);
            break;
        }
    }
};

var activeChapterName = 'intro';

function setActiveChapter(chapterName) {
    if (chapterName === activeChapterName) return;

    map.flyTo(chapters[chapterName]);

    document.getElementById(chapterName).setAttribute('class', 'active');
    document.getElementById(activeChapterName).setAttribute('class', '');

    activeChapterName = chapterName;
}

function isElementOnScreen(id) {
    var element = document.getElementById(id);
    var bounds = element.getBoundingClientRect();
    return bounds.top < window.innerHeight && bounds.bottom > 0;
}