Adding WMS v 1.3.0 in Mapbox GL JS

So, I want to add WMS v 1.3.0 layer in Mapbox GL JS.

The WMS source is : https://portal.ina-sdi.or.id/gis/rest/services/PPBW/BATASWILAYAH_10K_ADMINISTRASI_AR_KELDESA/MapServer

And Here is my code :

map.addSource('wms-test-source', {
            'type': 'raster',
            'tiles': [
                'https://portal.ina-sdi.or.id/gis/services/PPBW/BATASWILAYAH_10K_ADMINISTRASI_AR_KELDESA/MapServer/WmsServer?bbox={bbox-epsg-4326}&format=image/png&service=WMS&version=1.3.0&request=GetMap&CRS=EPSG:4326&transparent=true&width=256&height=256&layer=0'
            ],
            'tileSize': 256
        });
        map.addLayer(
            {
                'id': 'wms-test-layer',
                'type': 'raster',
                'source': 'wms-test-source',
                'paint': {}
            }
        );

I have tried using this tutorial : https://docs.mapbox.com/mapbox-gl-js/example/wms/,
But I still can’t figure why i can’t add this WMS layer, is this because the WMS version is 1.3.0?
I’ve change the link many times and get some error Http 400 and sometimes CORS.
I’ve tried this WMS in QGIS and leaflet, and this WMS works well, please help!🙏🙏

and here my jsfiddle snippet : https://jsfiddle.net/yekjzhvq/

126 thoughts on “Adding WMS v 1.3.0 in Mapbox GL JS”