JSFiddle - React, Tailwind, and code Playground

by andyjh07

HTML

<script src="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css">



<div id="map"></div>
<div id="features">
    <section id="baker" class="active">
        <h3>221b Baker St.</h3>
        <p>
            November 1895. London is shrouded in fog and Sherlock Holmes and
            Watson pass time restlessly awaiting a new case. "The London
            criminal is certainly a dull fellow," Sherlock bemoans. "There have
            been numerous petty thefts," Watson offers in response. Just then a
            telegram arrives from Sherlock's brother Mycroft with a mysterious
            case.
        </p>
    </section>
    <section id="aldgate">
        <h3>Aldgate Station</h3>
        <p>
            Arthur Cadogan West was found dead, head crushed in on train tracks
            at Aldgate Station at 6AM Tuesday morning. West worked at Woolwich
            Arsenal on the Bruce-Partington submarine, a secret military
            project. Plans for the submarine had been stolen and seven of the
            ten missing papers were found in West's possession. Mycroft implores
            Sherlock to take the case and recover the three missing papers.
        </p>
    </section>
    <section id="london-bridge">
        <h3>London Bridge</h3>
        <p>
            Holmes and Watson's investigations take them across London. Sherlock
            deduces that West was murdered elsewhere, then moved to Aldgate
            Station to create the illusion that he was crushed on the tracks by
            a train. On their way to Woolwich Sherlock dispatches a telegram to
            Mycroft at London Bridge: "Send list of all foreign spies known to
            be in England, with full address."
        </p>
    </section>
    <section id="woolwich">
        <h3>Woolwich Arsenal</h3>
        <p>
            While investigating at Woolwich Arsenal Sherlock learns that West
...

CSS

body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }

    #map {
        position: fixed;
        width: 50%;
    }
    #features {
        width: 50%;
        margin-left: 50%;
        font-family: sans-serif;
        overflow-y: scroll;
        background-color: #fafafa;
    }
    section {
        padding: 25px 50px;
        line-height: 25px;
        border-bottom: 1px solid #ddd;
        opacity: 0.25;
        font-size: 13px;
    }
    section.active {
        opacity: 1;
    }
    section:last-child {
        border-bottom: none;
        margin-bottom: 200px;
    }

JavaScript

// TO MAKE THE MAP APPEAR YOU MUST
	// ADD YOUR ACCESS TOKEN FROM
	// https://account.mapbox.com
	mapboxgl.accessToken = 'pk.eyJ1IjoiYW5keXdvbmRlcmZ1bCIsImEiOiJjbDBjODFydDIxMmZ2M2RxdXFkaW50YnI0In0.NdLkPg42ZRgoTIoFseqBgg';
    const map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/andywonderful/cl0c82hde00ag15p281yucn5n',
        center: [-0.018842, 51.500828],
        zoom: 16.5,
        pitch: 45,
		bearing: 0,
    });

    const chapters = {
        'baker': {
            center: [-0.018842, 51.500828],
        },
        'aldgate': {
            center: [-0.07571203, 51.51424049],
        },
        'london-bridge': {
            center: [-0.08533793, 51.50438536],
            zoom: 13,
            speed: 0.6,
        },
        'woolwich': {
            center: [0.05991101, 51.48752939],
            zoom: 12.3
        },
        'gloucester': {
            center: [-0.18335806, 51.49439521],
            zoom: 15.3,
            speed: 0.5
        },
        'caulfield-gardens': {
            center: [-0.19684993, 51.5033856],
            zoom: 12.3
        },
        'telegraph': {
            center: [-0.10669358, 51.51433123],
            zoom: 17.3,
        },
        'charing-cross': {
            center: [-0.12416858, 51.50779757],
            zoom: 14.3,
        }
    };

    let activeChapterName = 'baker';
    function setActiveChapter(chapterName) {
        if (chapterName === activeChapterName) return;

        map.flyTo(chapters[chapterName]);

        document.getElementById(chapterName).classList.add('active');
        document.getElementById(activeChapterName).classList.remove('active');

        activeChapterName = chapterName;
				
		map.once('moveend', function(){
			console.log('moveend logging');
		  	map.rotateTo(180.0, {duration:3000});
			// map.rotateTo(360.0, {duration:30000});
		});
	}

    function isElementOnScreen(id) {
        const element = document.getElementById(id);
        const bounds =...