Adding GeoServer layer to Mapbox?

Question

I've published some layers in GeoServer which I want to consume in Mapbox.
I've tried several examples like:

• Add simple image layers to MapBox / Leaflet?
• Mapbox Vector Tiles from Geoserver 2.11 in Mapbox GL JS
• Mapbox Docs | Add a vector tile source

But I'm not been able to get any good result, I've got this as the best result till now

using the code

map.addLayer({
    'id': 'wms-test-layer',
    'type': 'raster',
    'source': {
        'type': 'raster',
        'tiles': [
            'http://localhost:8080/geoserver/gwc/demo/topp:states?gridSet=EPSG:4326&format=image/png'

        ],
        'tileSize': 256
    },
    'paint': {}
}, 'aeroway-line');

What can I do?

Answer 1

why not use wms layer as geoserver can provide wms service

var wmsLayer = L.tileLayer.wms('http://localhost:8080/geoserver/ows?', {
    layers: 'topp:states'
}).addTo(map);