GeoServer SLD Tutorial - Membuat Style Peta Kustom dengan XML dari Nol

Pernahkah kamu buka sebuah WebGIS dan melihat peta yang tampilannya kayak peta textbook buatan tahun 2005? Pola warna datar, garis tebal nggak jelas, label berantakan. Nah, kalau kamu pakai GeoServer, masalahnya bukan di engine-nya tapi di SLD (Styled Layer Descriptor) yang belum kamu custom. SLD itu kayak CSS-nya GeoServer. Tanpa SLD yang bagus, peta kamu bakal kelihatan biasa aja.

Saya pertama kali kenal SLD waktu bikin WebGIS untuk project pemetaan lahan pertanian. Data PostGIS-nya udah lengkap, GeoServer-nya udah jalan, tapi pas lihat hasilnya di browser... warna polygon-nya hijau neon yang bikin mata perih. Label desanya tabrakan di mana-mana. Akhirnya saya ngubek-ngubek dokumentasi SLD dan sadar bahwa sebenernya kontrol visualnya super powerful, cuma sintaksisnya aja yang agak ngegas karena berbasis XML.

Apa itu SLD dan Kenapa Harus Peduli?

SLD singkatan dari Styled Layer Descriptor. Ini standar dari OGC (Open Geospatial Consortium) yang dipakai buat ngatur gimana data geospasial ditampilkan di peta. GeoServer pake SLD buat nentuin warna garis, isi polygon, ukuran titik, font label, sampai filter kondisional berdasarkan atribut data.

Bayangin kamu punya layer kecamatan dengan atribut nama_kecamatan dan jumlah_penduduk. Dengan SLD, kamu bisa bikin:

• Polygon dengan warna gradien berdasarkan jumlah penduduk (choropleth map)
• Label nama kecamatan yang auto-hide kalau zoom terlalu jauh
• Garis batas dengan ketebalan dinamis sesuai skala
• Titik marker yang ganti ikon berdasarkan kategori

Semua ini dilakukan tanpa ngubah data aslinya. Cuma ngatur style-nya doang. Itulah kenapa SLD penting banget buat bikin peta yang informatif.

Struktur Dasar File SLD

File SLD berekstensi .sld dan isinya XML. Struktur umumnya kayak gini:

<?xml version="1.0" encoding="UTF-8"?>
<StyledLayerDescriptor version="1.0.0"
 xmlns="http://www.opengis.net/sld"
 xmlns:ogc="http://www.opengis.net/ogc"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://www.opengis.net/sld
 http://schemas.opengis.net/sld/1.0.0/StyledLayerDescriptor.xsd">

 <NamedLayer>
 <Name>kecamatan</Name>
 <UserStyle>
 <Name>style_kecamatan</Name>
 <Title>Style Kecamatan Choropleth</Title>
 <FeatureTypeStyle>
 <Rule>
 <!-- Style rule di sini -->
 </Rule>
 </FeatureTypeStyle>
 </UserStyle>
 </NamedLayer>
</StyledLayerDescriptor>

Iya, XML yang lumayan panjang. Tapi jangan khawatir, kamu nggak perlu nulis dari nol setiap kali. GeoServer punya editor visual di dashboard-nya, dan kamu bisa mulai dari template lalu dimodifikasi. Strukturnya juga gampang dimengerti kalau udah paham konsep Rule dan Symbolizer.

Membuat Style Polygon Sederhana

Mari kita bikin style untuk layer polygon kecamatan. Kita mau warna fill biru transparan dengan border abu-abu. Berikut rule-nya:

<FeatureTypeStyle>
 <Rule>
 <Title>Polygon Kecamatan</Title>
 <PolygonSymbolizer>
 <Fill>
 <CssParameter name="fill">#4a90d9</CssParameter>
 <CssParameter name="fill-opacity">0.6</CssParameter>
 </Fill>
 <Stroke>
 <CssParameter name="stroke">#333333</CssParameter>
 <CssParameter name="stroke-width">1</CssParameter>
 <CssParameter name="stroke-opacity">0.8</CssParameter>
 </Stroke>
 </PolygonSymbolizer>
 </Rule>
</FeatureTypeStyle>

Intinya: PolygonSymbolizer ngatur fill dan stroke. CssParameter itu properti styling-nya. fill-opacity 0.6 artinya 60% opaque, sisanya tembus ke bawah. Penting banget buat kasih efek transparan biar peta dasar (basemap) masih kelihatan di belakang.

Salah satu kesalahan umum yang sering saya temui: orang lupa kasih fill-opacity. Hasilnya polygon jadi solid nempel, nutupin basemap. Kalau kamu pake basemap dari OSM atau Google Maps, pastiin opacity-nya antara 0.4 sampai 0.7 biar basemap masih terlihat.

Menambahkan Label dengan TextSymbolizer

Peta tanpa label kayak peta tanpa arah. Tambahin nama kecamatan dengan TextSymbolizer:

<Rule>
 <Name>label</Name>
 <TextSymbolizer>
 <Label>
 <ogc:PropertyName>nama_kecamatan</ogc:PropertyName>
 </Label>
 <Font>
 <CssParameter name="font-family">Arial</CssParameter>
 <CssParameter name="font-size">12</CssParameter>
 <CssParameter name="font-weight">bold</CssParameter>
 </Font>
 <LabelPlacement>
 <PointPlacement>
 <AnchorPoint>
 <AnchorPointX>0.5</AnchorPointX>
 <AnchorPointY>0.5</AnchorPointY>
 </AnchorPoint>
 </PointPlacement>
 </LabelPlacement>
 <Fill>
 <CssParameter name="fill">#000000</CssParameter>
 </Fill>
 <Halo>
 <Radius>2</Radius>
 <Fill>
 <CssParameter name="fill">#FFFFFF</CssParameter>
 <CssParameter name="fill-opacity">0.8</CssParameter>
 </Fill>
 </Halo>
 <VendorOption name="autoWrap">100</VendorOption>
 <VendorOption name="maxDisplacement">10</VendorOption>
 </TextSymbolizer>
</Rule>

Beberapa hal penting di sini:

Halo itu efek outline putih di sekitar teks label. Sangat penting biar label tetap terbaca walau di atas polygon yang gelap. Tanpa halo, label hitam di atas polygon biru tua bakal susah dibaca.

VendorOption autoWrap bikin label otomatis pindah baris kalau kepanjangan. maxDisplacement ngizinin GeoServer buat geser label sedikit biar nggak tabrakan dengan label lain. Dua opsi ini sering dilupakan padahal super berguna buat peta yang punya banyak label.

Filter Kondisional dengan OGC Filter

Ini bagian paling powerful dari SLD. Kamu bisa bikin rule yang cuma aktif kalau atribut tertentu memenuhi kondisi. Misalnya, warna polygon berubah berdasarkan jumlah penduduk:

<FeatureTypeStyle>
 <Rule>
 <Name>padat</Name>
 <Title>Padat Penduduk (> 100rb)</Title>
 <ogc:Filter>
 <ogc:PropertyIsGreaterThan>
 <ogc:PropertyName>jumlah_penduduk</ogc:PropertyName>
 <ogc:Literal>100000</ogc:Literal>
 </ogc:PropertyIsGreaterThan>
 </ogc:Filter>
 <PolygonSymbolizer>
 <Fill>
 <CssParameter name="fill">#d7301f</CssParameter>
 <CssParameter name="fill-opacity">0.7</CssParameter>
 </Fill>
 </PolygonSymbolizer>
 </Rule>
 <Rule>
 <Name>sedang</Name>
 <Title>Sedang (50rb - 100rb)</Title>
 <ogc:Filter>
 <ogc:And>
 <ogc:PropertyIsGreaterThanOrEqualTo>
 <ogc:PropertyName>jumlah_penduduk</ogc:PropertyName>
 <ogc:Literal>50000</ogc:Literal>
 </ogc:PropertyIsGreaterThanOrEqualTo>
 <ogc:PropertyIsLessThan>
 <ogc:PropertyName>jumlah_penduduk</ogc:PropertyName>
 <ogc:Literal>100000</ogc:Literal>
 </ogc:PropertyIsLessThan>
 </ogc:And>
 </ogc:Filter>
 <PolygonSymbolizer>
 <Fill>
 <CssParameter name="fill">#fc8d59</CssParameter>
 <CssParameter name="fill-opacity">0.7</CssParameter>
 </Fill>
 </PolygonSymbolizer>
 </Rule>
 <Rule>
 <Name>jarang</Name>
 <Title>Jarang (< 50rb)</Title>
 <ElseFilter />
 <PolygonSymbolizer>
 <Fill>
 <CssParameter name="fill">#91bfdb</CssParameter>
 <CssParameter name="fill-opacity">0.7</CssParameter>
 </Fill>
 </PolygonSymbolizer>
 </Rule>
</FeatureTypeStyle>

Lihat bagaimana ogc:Filter dipakai buat ngecek nilai jumlah_penduduk. PropertyIsGreaterThan untuk lebih dari, PropertyIsLessThan untuk kurang dari, dan ogc:And buat gabungin dua kondisi. Rule terakhir pake ElseFilter yang artinya "selain kondisi di atas". Ini kayak else di programming.

Hasilnya: peta choropleth dengan tiga warna berbeda. Merah buat kecamatan padat, oranye buat sedang, biru muda buat jarang. Ini salah satu teknik visualisasi data spasial paling efektif untuk analisis demografis.

Skala Dependent Rule (Zoom Level)

Pernah lihat peta yang labelnya kelihatan berantakan waktu zoom out? Itu karena nggak ada kontrol skala. Dengan SLD, kamu bisa batasin rule cuma muncul di skala tertentu:

<Rule>
 <Name>label_zoom_in</Name>
 <MinScaleDenominator>1000</MinScaleDenominator>
 <MaxScaleDenominator>50000</MaxScaleDenominator>
 <TextSymbolizer>
 <Label>
 <ogc:PropertyName>nama_kecamatan</ogc:PropertyName>
 </Label>
 <!-- konfigurasi font, halo, dll -->
 </TextSymbolizer>
</Rule>

MinScaleDenominator dan MaxScaleDenominator ngatur di skala mana label ini muncul. Dengan konfigurasi di atas, label cuma kelihatan kalau skala antara 1:1000 sampai 1:50000. Kalau zoom lebih jauh dari itu, label nggak muncul. Sangat berguna buat ngindarin visual clutter di level zoom rendah.

Tips praktis: untuk peta provinsi level, kasih MaxScaleDenominator sekitar 200000 buat label kabupaten. Untuk label kecamatan, batasin sampai 50000. Buat label desa, 10000. Ini bukan aturan baku, tapi angka yang udah saya tes dan cocok untuk data Indonesia.

Point Symbolizer untuk Marker Custom

Kalau layer kamu berupa titik (point), kamu bisa pake PointSymbolizer dengan external graphic (file gambar custom) atau bentuk standar:

<Rule>
 <PointSymbolizer>
 <Graphic>
 <ExternalGraphic>
 <OnlineResource
 xlink:href="marker_sekolah.png"
 type="image/png" />
 <Format>image/png</Format>
 </ExternalGraphic>
 <Size>20</Size>
 </Graphic>
 </PointSymbolizer>
</Rule>

File marker_sekolah.png harus ditaruh di folder styles GeoServer (biasanya di /var/lib/geoserver/data_dir/styles/). Kalau mau pake icon yang udah disediain GeoServer, ganti ExternalGraphic dengan Mark:

<PointSymbolizer>
 <Graphic>
 <Mark>
 <WellKnownName>circle</WellKnownName>
 <Fill>
 <CssParameter name="fill">#ff0000</CssParameter>
 </Fill>
 </Mark>
 <Size>8</Size>
 </Graphic>
</PointSymbolizer>

Bentuk yang tersedia: circle, square, triangle, star, cross, dan x. Bukan banyak, tapi cukup buat kebutuhan dasar. Kalau butuh icon khusus, pakai PNG atau SVG custom via ExternalGraphic.

Cara Upload SLD ke GeoServer

Ada dua cara untuk masang SLD di GeoServer:

Cara 1: Via Dashboard (recommended buat pemula)

1. Buka GeoServer Web Admin (biasanya http://localhost:8080/geoserver)
2. Masuk ke Data > Styles
3. Klik Add New Style
4. Beri nama, pilih format SLD 1.0
5. Paste XML SLD ke editor
6. Klik Validate buat ngecek sintaksis
7. Klik Apply buat simpan
8. Buka layer kamu di Layers, masuk tab Publishing
9. Pilih style yang baru di dibuat di dropdown Default Style

Cara 2: Via REST API (bukan automation)

Kalau kamu perlu update style secara programatik (misal dari CI script), GeoServer punya REST API:

# Upload SLD via curl
curl -v -u admin:geoserver \
 -X POST \
 -H "Content-Type: application/vnd.ogc.sld+xml" \
 -d @kecamatan.sld \
 "http://localhost:8080/geoserver/rest/styles"

Kalau mau update style yang udah ada, ganti POST dengan PUT dan kasih nama style di URL:

curl -v -u admin:geoserver \
 -X PUT \
 -H "Content-Type: application/vnd.ogc.sld+xml" \
 -d @kecamatan_updated.sld \
 "http://localhost:8080/geoserver/rest/styles/kecamatan_style"

REST API ini super berguna kalau kamu bikin pipeline CI/CD untuk WebGIS. Misalnya, tiap kali ada data baru di PostGIS, kamu bisa otomatis update style dan langsung publish perubahannya.

Troubleshooting SLD yang Sering Terjadi

1. XML parse error — GeoServer kasih error kayak org.xml.sax.SAXParseException. Penyebab paling umum: tag yang nggak ditutup, attribute yang kurang tanda kutip, atau karakter & yang nggak di-escape. Di XML, & harus ditulis &. Kalau kamu nulis kondisi filter kayak nama & alamat, ganti jadi nama & alamat.

2. Label nggak muncul — Pastiin ogc:PropertyName di Label cocok dengan nama kolom di database. Case-sensitive! nama_kecamatan bukan NAMA_KECAMATAN. Cek juga apakah layer di-set sebagai Point di FeatureType-nya kalau label titik.

3. Style nggak berubah setelah update — GeoServer cache tile yang udah di-render. Setelah update SLD, kamu harus clear cache. Bisa via dashboard (Layer > Tile Caching > Clear) atau via REST:

curl -v -u admin:geoserver \
 -X DELETE \
 "http://localhost:8080/geoserver/gwc/rest/layers/kecamatan"

4. ExternalGraphic nggak muncul — Pastiin file gambar ada di folder styles GeoServer dan punya permission yang readable. Cek juga tipe MIME-nya cocok dengan tag Format.

5. Performance lambat — Rule SLD yang terlalu kompleks (banyak filter, banyak symbolizer) bikin render lambat. Kalau peta kamu lambat, coba kurangin jumlah rule atau pakai scale-dependent rule buat ngurangin feature yang di-render di zoom level tertentu.

Tips Optimasi SLD untuk Production

Setelah deploy GeoServer di VPS production, ada beberapa optimasi yang perlu kamu lakukan biar performanya maksimal:

Gunakan SLD 1.1 (SE) kalau kamu butuh fitur advance kayak interpolation dan vendor option yang lebih lengkap. Tapi kalau cuma butuh styling dasar, SLD 1.0 udah cukup dan lebih banyak referensi tutorialnya.

Pre-render tiles buat layer yang jarang berubah. GeoServer punya GWC (GeoWebCache) yang bisa pre-generate tile di skala tertentu. Ini bikin peta load jauh lebih cepat karena tile udah siap di disk.

# Seed tile cache via REST API
curl -v -u admin:geoserver \
 -X POST \
 -H "Content-Type: application/xml" \
 -d '<seedRequest><name>kecamatan</name>
 <srs><number>4326</number></srs>
 <zoomStart>5</zoomStart>
 <zoomStop>15</zoomStop>
 <type>seed</type></seedRequest>' \
 "http://localhost:8080/geoserver/gwc/rest/seed/kecamatan"

Gunakan CSS/YSLD extension kalau kamu nggak nyaman dengan XML. GeoServer support plugin CSS dan YSLD yang sintaksisnya lebih ringkas:

/* CSS-style syntax untuk GeoServer */
[jumlah_penduduk > 100000] {
 fill: #d7301f;
 fill-opacity: 0.7;
}
[jumlah_penduduk > 50000] {
 fill: #fc8d59;
 fill-opacity: 0.7;
}
* {
 stroke: #333333;
 stroke-width: 1px;
 label: [nama_kecamatan];
 label-anchor: 0.5 0.5;
 font-fill: #000000;
 font-family: Arial;
 font-size: 12;
}

Jauh lebih ringkas kan? Plugin CSS dan YSLD ini bisa diinstall dari GeoServer extension page. Tapi pastiin production GeoServer kamu support plugin tersebut sebelum dipakai.

Kesimpulan

SLD itu power tool buat bikin peta yang informatif dan visually appealing di GeoServer. Walau sintaksis XML-nya agak ngegas di awal, konsepnya sebenarnya sederhana: Rule berisi kondisi dan Symbolizer berisi style. Kalau kamu udah paham struktur dasarnya, bikin style choropleth map dengan filter kondisional dan label dinamis jadi gampang.

Untuk project WebGIS production, jangan lupa: kasih fill-opacity biar basemap kelihatan, gunakan halo di label, batasi label berdasarkan skala, dan clear cache setelah update style. Kalau XML terasa ribet, coba CSS atau YSLD extension yang sintaksisnya lebih familiar buat web developer.

Sudah pernah coba bikin style SLD sendiri? Atau malah pakai CSS plugin? Bagi pengalaman kamu di komentar, siapa tahu ada tips lain yang bisa kita pelajari bareng.