aswi2022code-of-duty-gitlab/map_frameworks/src/component/MapBoxExample.tsx @ a68cb363

import React, { useEffect, useRef, useState } from 'react'
import mapboxgl, { LngLatLike, Popup } from 'mapbox-gl'


const coords = {
    lng: 7.3700,
    lat: 60.0400
}

// Adapted from
// https://docs.mapbox.com/help/tutorials/use-mapbox-gl-js-with-react/

// Potential wrapper could be: https://github.com/alex3165/react-mapbox-gl
// https://docs.mapbox.com/mapbox-gl-js/example/geojson-line/

// But has only 50k uses PER MONTH lol
const MapBoxExample = () => {

    const [lng, setLng] = useState(coords.lng)
    const [lat, setLat] = useState(coords.lat)
    const [zoom, setZoom] = useState(1)

    // TODO type
    const map = useRef<any>(null)
    const mapContainer = useRef<any>(null)

    // Function to add markers to the map
    const addMarkers = () => {
        for (let i = 1; i <= 10; i += 1) { //
            new mapboxgl.Marker()
                .setLngLat([i * .5 + coords.lng, i * .5 + coords.lat])
                .setPopup(new Popup().setHTML(`<h3>HELLO POPUP ${ i } ☀️🍕😂😅</h3>`))
                .addTo(map.current as mapboxgl.Map)
        }
    }

    useEffect(() => {
        if (map.current) {
            return
        }

        map.current = new mapboxgl.Map({
            container: mapContainer.current,
            center: [lng, lat],
            accessToken: process.env.REACT_APP_MAPS_API_KEY,
            style: 'mapbox://styles/mapbox/streets-v11',
            zoom: zoom
        })

        map.current.addControl(new mapboxgl.NavigationControl())

        addMarkers()
    })

    return (
        <>
            <h1>MapBox Example</h1>
            <div ref={ mapContainer } style={ { height: '400px' } }/>
        </>
    )
}

export default MapBoxExample