Peta interaktif Lokasi bekas terbakar yang telah ditanami

Scroll down through the story and the map will fly to the chapter's location. See the example: https://docs.mapbox.com//mapbox-gl-js/example/scroll-fly-to/

by sitis

HTML

<script src="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css">
<script src="http://www.gutenberg.org/files/2346/2346-h/2346-h.htm"></script>
<div id="map"></div>
 <div id='maps'></div>
<div id="features">
 <section1>
   scroll ke bawah
    </section1>
    <section id="judul" class="active">
       <h3>Lokasi Areal Tanam Bekas Lahan Terbakar</h3> 
    </section>
  
     <section id="Koperasi LKA">
         <div class="flourish-embed flourish-cards" data-src="visualisation/8100451"><script src="https://public.flourish.studio/resources/embed.js"></script></div>
    </section>
    <section id="PT PEAK">
        <div class="flourish-embed flourish-cards" data-src="visualisation/8101099"><script src="https://public.flourish.studio/resources/embed.js"></script></div>
    </section>
    <section id="PT KS">
        <div class="flourish-embed flourish-cards" data-src="visualisation/8030515"><script src="https://public.flourish.studio/resources/embed.js"></script></div>
    </section>
    <section id="PT TAL">
        <div class="flourish-embed flourish-cards" data-src="visualisation/8363969"><script src="https://public.flourish.studio/resources/embed.js"></script></div>    
    </section>
  
    
</div>

CSS

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

    #map {
        position: fixed;
        width: 100%;
    }
    #features {
        width: 50%;
        margin-left: 0%;
        font-family: sans-serif;
        overflow-y: scroll;
        margin-bottom: 100px;
       
    }
    section1 {
     
        width: 50%;
        opacity: 0.8;
        font-size: 15px;
        background-color: #ffffff;
        padding: 10px 10px;
    }
    
    section {
        margin-bottom: 50px;
        padding: 10px 10px;
        opacity: 0.8;
        font-size: 15px;
        background-color: #ffffff;
    }
    
    
   
    section:last-child {
        border-bottom: none;
        margin-bottom: 200px;
    }

    h3 {margin-top: 200px;margin-bottom: 200px;}
   
   


 .maps {
  
        position: absolute;
        width: 100%;
        top: 0;
        bottom: 0;
      }

JavaScript

mapboxgl.accessToken = 'pk.eyJ1Ijoic2l0aTA1MTEiLCJhIjoiY2t3b3IyOHgyMDNpcjJvcDRxcjExbGE1NiJ9.IHMiKzW4OzdA0EUUVRNPsg';
 

  
  
    const map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [108.843126, -0.9],
        zoom: 5.3 ,
    });

    const chapters = {
    
    
        'judul': {
            center: [110.143126, 0],
            zoom: 5,
            bearing: 0
        },
        'Koperasi LKA': {
       
            duration: 6000,
            center: [110.143126, -1.782251],
            bearing: 50,
            zoom: 10,
            pitch: 0,
            
        },
        'PT PEAK': {
            duration: 6000,
            center: [113.162660, -2.875357],
            bearing: 0,
            zoom: 10,
            pitch: 10
        },
        
        'PT KS': {
            bearing: 40,
            center: [111.734056, -3.428376],
            zoom: 10,
            speed: 0.6,
            pitch: 15
        },
        
        'PT TAL': {
            bearing: 45,
            center: [114.711984, -2.655802],
            zoom: 10,
            pitch: 20,
            speed: 0.5
        },
        'End': {
            center: [108.843126, -0.9],
        		zoom: 5,
        },
       
        
    };

    let activeChapterName = 'judul';
    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;
    }

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

    // On every scroll event, check which element is on screen
    window.onscroll = () => {
        for...