JSFiddle - React, Tailwind, and code Playground

by fxi

HTML

<script src="https://app.staging.mapx.org/sdk/mxsdk.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/nipplejs.min.js"></script>

<h1>Control the map with a joystick</h1>

<div class="container">
  <div class="pane-left item">
    <p>Direction</p>
    <div class="ctrl" id="ctrlDirection"></div>
  </div>
  <div id="mapx" class="mapx pane-right item"></div>

</div>

CSS

.ctrl {
      width: 150px;
      height: 150px;
      background: rgb(26 29 33 / 39%);
      border-radius: 30px;
      cursor: grab;
      position: absolute;
      left: calc(50% - 75px);
      top: 80px;
      z-index: 1;


    }

    #mapx {
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }

JavaScript

const conf = {
  ctrlAIsUsed: false,
  ctrlBIsUsed: false,
  center: {
    lng: 67.96553657077601,
    lat: 33.60321971447401
  },
  offset: [0, 0],
  pitch: 80,
  bearing: -111.19,
  zoom: 11.91,
  delta: {
    x: 0,
    y: 0,
    z: 0,
    p: 0,
    b: 0
  }
};

const mapx = new mxsdk.Manager({
  container: document.getElementById('mapx'),
  url:  'https://app.staging.mapx.org/static.html?language=en&views=MX-JH8E4-MZKY6-WNG6M&zoomToViews=true&p=0&b=0&z=5.662&lat=33.832&lng=66.027&t3d=false&sat=false&theme=water_light',
 
  static: true,
  verbose: false,
  params: {
    closePanels: true,
 
  }
});

const elCtrlA = document.getElementById('ctrlDirection');

const ctrlA = nipplejs.create({
  zone: elCtrlA,
  mode: 'static',
  position: {
    top: '50%',
    left: '50%'
  }
});

mapx.on('ready', main);

async function main() {
  await mapx.ask('set_mode_3d', {
    action: 'show'
  });
  await mapx.ask('set_mode_aerial', {
    action: 'show'
  });

  /**
   * initial rendering
   */
  await mapx.ask('map', {
    method: 'jumpTo',
    parameters: [{
        bearing: conf.bearing,
        zoom: conf.zoom,
        center: conf.center,
        pitch: conf.pitch
      },
      {
        duration: 0
      }
    ]
  });
  /**
   * Directional input
   */
  ctrlA.on('move', (e, d) => {
    conf.delta.b = d.vector.x;
    conf.delta.y = d.vector.y * 10;
  });

  ctrlA.on('start', () => {
    conf.ctrlAIsUsed = true;
    render();
  });
  ctrlA.on('end', () => {
    conf.ctrlAIsUsed = false;
    conf.delta.b = 0;
    conf.delta.y = 0;
  });
}

async function render(force) {
  const skip = conf.rendering || (!conf.ctrlAIsUsed && !conf.ctrlBIsUsed);
  if (skip && !force) {
    return;
  }
  conf.rendering = true;
  conf.bearing += conf.delta.b;
  conf.offset[1] = -conf.delta.y;

  await mapx.ask('map', {
    method: 'jumpTo',
    parameters: [{
        bearing: conf.bearing
      },
      {
        duration: 0
      }
    ]
  });
  await mapx.ask('map', {
    method:...