JSFiddle - React, Tailwind, and code Playground

by Tristen Brown

HTML

<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.css">
<script src="https://map.yahooapis.jp/js/V1/jsapi?appid=dj00aiZpPXpsOHZKcnRPS2I3biZzPWNvbnN1bWVyc2VjcmV0Jng9Zjc-"></script>
<style>
  body { margin:0; padding:0; overflow:hidden; }
  .map {
    position:absolute!important;
    top:0;
    bottom:0;
    width:50%;
    }
    .left { left: 0; }
    .right { right: 0; }
</style>
<div id='yahoo' class='map left'></div>
<div id='mapbox' class='map right'></div>

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoidHJpc3RlbiIsImEiOiJjajZoOXU4Z2kwNnppMnlxd2d6bTFvZ2xtIn0.PP7AoUakMfeqdXFHdsY0oA';

let ymap; 
const map = new mapboxgl.Map({
  style: 'mapbox://styles/mapbox/streets-v11',
  container: 'mapbox',
  center: [139.73100, 35.66572],
  zoom: 17,
  hash: true,
  localIdeographFontFamily: false
});

map.on('load', () => {
  const center = map.getCenter();
  const z = parseInt(map.getZoom(), 10) + 2;
  ymap = new Y.Map('yahoo', {
    configure: {
      doubleClickZoom: true,
      scrollWheelZoom: true,
      dragging: true
    },
    layerSets: {
      'lighttone': new Y.LayerSet('ライトトーン', [new Y.StyleMapLayer('lighttone')])
    }
  });

  ymap.setLayerSetId('lighttone');
  ymap.drawMap(new Y.LatLng(center.lat, center.lng), z);
});

map.on('moveend', () => {
  if (!ymap) return;
  const center = map.getCenter();

  // Zoom must be +/-2 to be comparable
  let z = parseInt(map.getZoom(), 10) + 2;
  const c = new Y.LatLng(center.lat, center.lng);
  ymap.setZoom (z, true, c, true);
});