Mapbox GL JS + VWORLD Tile Map

<link href="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js"></script>
<script src="https://map.vworld.kr/js/apis.do?type=Base&apiKey=<VWORLD KEY>"></script>

<div id="map"></div>
<script>
    mapboxgl.accessToken = '<MAPBOX KEY>';
    window.map = new mapboxgl.Map({
        container: 'map',
        style: {
            version: 8,
            sources: {
                Satellite: {
                    type: 'raster',
                    tiles: ['http://xdworld.vworld.kr:8080/2d/Satellite/service/{z}/{x}/{y}.jpeg'],
                    bounds: [119, 28, 135, 48]
                },
                Hybrid: {
                    type: 'raster',
                    tiles: ['http://xdworld.vworld.kr:8080/2d/Hybrid/service/{z}/{x}/{y}.png'],
                    bounds: [119, 28, 135, 48]
                }
            },
            layers: [{
                id: 'Satellite',
                type: 'raster',
                source: 'Satellite',
            },{
                id: 'Hybrid',
                type: 'raster',
                source: 'Hybrid',
            }],
        },
        center: [127, 38],
        zoom: 8,
        minZoom: 6,
        maxZoom: 19,
        projection: {
            name: 'equirectangular',
        }
    });
</script>

MAPBOX

Openlayers 와는 또 다른 매력이.. 

MAPBOX : https://www.mapbox.com/mapbox-gljs

VWORLD : https://www.vworld.kr/dev/v4dv_baseguide_s001.do

인증키는 둘다 안받아도 사용할수 있는 방법이 있긴하지만... 이런데 올릴만한 내용은 아니니.. 패스