# Web Map Services (WMS) Geoserver menggunakan Mapbox Vector Tile

Pada kesempatan kali ini, saya akan memperkenalkan Mapbox Vector Tile (MVT), sebuah Vector Tile dengan Ketelitian yang bagus, mampu menampilkan Data Peta dengan Ukuran yang lebih Ringan karena sifatnya yang biner.

Untuk penggunaannya, apabila data peta yang anda miliki bersifat rahasia, yah kembalikan saja dengan format png atau jpg. tetapi apabila data yang akan dipublish itu data yang open, direkomendasikan menggunakan MVT agar hasilnya lebih jernih karena data yang digunakan ialah Vector dan bukan Raster.

Untuk Konfigurasinya, teman-teman harus memiliki Geoserver dan memindahkan Vector Tile Extension ke Geoserver Extension.

Kemudian jangan lupa untuk melakukan enable pada Geoserver, contohnya seperti dibawah:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1741283118846/4ea41505-45eb-4c95-b4f4-58e679abd9cd.png align="center")

dan pada index.html, jika menggunakan Mapbox GL JS, tambahkan kode sebagai berikut. contohnya layer yang kita gunakan ialah geodb:Bangunan dan geodb:Road.

```javascript
map.on('load', function () {
    // Gunakan window.location.origin agar IP bisa berubah dinamis
    const geoserverUrl = `${window.location.origin}/geoserver/geodb`;

    // Tambahkan source untuk Bangunan
    map.addSource('bangunan-source', {
        'type': 'vector',
        'tiles': [
            `${geoserverUrl}/wms?service=WMS&version=1.1.0&request=GetMap&layers=geodb:Bangunan&srs=EPSG:3857&styles=&format=application/vnd.mapbox-vector-tile&bbox={bbox-epsg-3857}&width=256&height=256`
        ],
        'minzoom': 5,
        'maxzoom': 22
    });

    // Tambahkan layer Bangunan dengan fill transparan dan outline kuning
    map.addLayer({
        'id': 'bangunan-outline',
        'type': 'line',
        'source': 'bangunan-source',
        'source-layer': 'Bangunan',
        'paint': {
            'line-color': '#ffff00', // Kuning
            'line-width': 1
        }
    });

    // Tambahkan source untuk Road
    map.addSource('road-source', {
        'type': 'vector',
        'tiles': [
            `${geoserverUrl}/wms?service=WMS&version=1.1.0&request=GetMap&layers=geodb:Road&srs=EPSG:3857&styles=&format=application/vnd.mapbox-vector-tile&bbox={bbox-epsg-3857}&width=256&height=256`
        ],
        'minzoom': 5,
        'maxzoom': 22
    });

    // Tambahkan layer Road dengan warna merah
    map.addLayer({
        'id': 'road-layer',
        'type': 'line',
        'source': 'road-source',
        'source-layer': 'Road',
        'paint': {
            'line-color': '#ff0000', // Merah
            'line-width': 1
        }
    });
});
```

hasilnya sebagai berikut

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1741283369378/ecbc121f-4c39-495a-8da4-3bbddcc16395.png align="center")

dengan zoom 22 nya sebagai berikut:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1741283430575/9e28c4c7-ee6a-4998-a100-e148a0821002.png align="center")

![ukuran tile](https://cdn.hashnode.com/res/hashnode/image/upload/v1741283520264/50475cc9-c54c-42db-ba9b-8898b851d940.png align="center")

Ukuran tile dengan MVT memang teliti, tetapi dia tidak membawa styling bawaan seperti ArcGIS Vector Tile, maka sesuai dengan kode diatas, perlu ditentukan line maupun fill color sesuai dengan peruntukan webmap nya.