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:100%;
    }
</style>
<div id='map' class='map'></div>

JavaScript

const ymap = new Y.Map('map', {
	configure: {
		doubleClickZoom: true,
		scrollWheelZoom: true,
		dragging: true
	},
  layerSets: {
		'lighttone': new Y.LayerSet('ライトトーン', [new Y.StyleMapLayer('lighttone')])
  }
});
 
ymap.setLayerSetId('lighttone');
ymap.drawMap(new Y.LatLng(35.681, 139.768), 17);