All-In-One
Routing and Navigation Platform

<script src="https://maps-gl.nextbillion.io/maps/api/js"></script>
<script>
(function () {
    nextbillion.setApiKey('your-api-key');
    var map = new nextbillion.maps.Map(document.getElementById("map"), {
        zoom: 12,
        center: { lat: 28.6139, lng: 77.209 }
});
})();
    </script>
                            

package.json
...
    "@types/mapbox-gl":"2.7.1",
    "mapbox-gl":"2.8.2"
}App.tsx 

import * as React from "react";
import mapboxgl, { Map, NavigationControl } from "mapbox-gl";
const MapboxGL: React.FunctionComponent = (props) => {
  const mapContainerRef = React.useRef<HTMLDivElement>(null);  
  mapboxgl.accessToken = "api_tracking_key_maploads";
  React.useEffect(() => {
    if (mapContainerRef.current != null) {
      const map = new Map({
        container: mapContainerRef.current,
        style:
          "mapbox://styles/mapbox/streets-v11",
          center: [-83.1264, 40.11959],
          zoom: 12
        });
    }
  }, []);return (
    <div
      ref={mapContainerRef}
      style={{
        width: "100vw",
        height: "100vh"
      }}
    />
  );
};export default MapboxGL;