Right-col.html

 <div class="right-col">
            <h2>Right</h2>

            <div id="map"></div>

                <script>
                    let mymap = L.map('map').setView([51.505, -0.09], 3);
                    let token = `pk.eyJ1IjoidGlmZmllLWFuZ2VsIiwiYSI6ImNrdXpkMnYxMzFjYTEyd3JmY242dnRoYXIifQ.tQzRdh68GCNO1gK7fwIHTw`
                    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
                    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
                    maxZoom: 18,
                    id: 'mapbox/satellite-v9',
                    tileSize: 512,
                    zoomOffset: -1,
                    accessToken: 'your.mapbox.access.token'
                }).addTo(mymap);
                </script>


        </div>

    </div>
    <div class="footer">
        &copy; GeoInfinity
    </div>

</body>
</html>