JSFiddle - React, Tailwind, and code Playground

by arashb12

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BABYLON Layer for MapBox</title>
    <link href='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css' rel='stylesheet' />
    <style>
        html, body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
<div id="map"></div>
<script src='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl-dev.js'></script>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.jsdelivr.net/npm/babylonjs-loaders@4.1.0/babylonjs.loaders.js"></script>
<script>
    mapboxgl.accessToken = 'pk.eyJ1IjoiZmFic2hhcnAiLCJhIjoiY2pkb2JmaHZ2MG5laTMycXV6MW9hbnR6biJ9.UMH3HUf54_y7l-2YpeE8oA';
    let center =  [148.9819, -35.3981]
    let map = (window.map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/light-v10',
        zoom: 18 ,
        center : center,
        pitch: 60,
        antialias: true
    }));
    let world;
    const computeWorld = () => {
        let rotateX = Math.PI / 2, rotateY = 0, rotateZ = 0;
        let mercatorCoordinate = mapboxgl.MercatorCoordinate.fromLngLat(
            [148.9819, -35.39847],
            0
        );
        world = BABYLON.Matrix.Identity().setTranslationFromFloats(mercatorCoordinate.x, mercatorCoordinate.y, mercatorCoordinate.z);
        let scaleFactor = mercatorCoordinate.meterInMercatorCoordinateUnits();
        let scale = BABYLON.Matrix.Scaling( scaleFactor, -scaleFactor, scaleFactor);
        world = scale.multiply(world);
        world = BABYLON.Matrix.RotationX(rotateX).multiply(world);
        world = BABYLON.Matrix.RotationY(rotateY).multiply(world);
        world = BABYLON.Matrix.RotationZ(rotateZ).multiply(world);
    };
    let customLayer = {
   ...