Membuat peta tematik di web dengan openlayers [Bagian 5: Mengkustomisasi peta]

Di bagian ini kita akan coba mengkustomisasi tampilan peta, seperti menampilkan skala dan koordinat, serta menampilkan label. Untuk menampilkan skala dan koordinat, openlayers menyediakan contol bawaan yang bisa di munculkan ke peta. Terdapat beberapa macam control yang disediakan, misalnya OverviewMapPanZoomBarLayerSwitcher, dsb. Selengkapnya bisa dilihat di. http://dev.openlayers.org/docs/files/OpenLayers/Control-js.html

Cara menambahkannya adalah dengan menambahkan code pada saat menginisialisasi object Map, seperti contoh berikut:

map = new OpenLayers.Map('map', {
	controls: [
		new OpenLayers.Control.Navigation(), //navigasi
		new OpenLayers.Control.PanZoom(), // control untuk zoom dan pan
		new OpenLayers.Control.ScaleLine(), // untuk menampilkan skala
		new OpenLayers.Control.MousePosition(),	// untuk menampilkan koordinat
	]
});

Sedangkan untuk menambahkan label, kita bisa menggunakan context seperti pada saat men-set warna. Pada kasus ini kita akan mencoba menampilkan label berupa nama kabupaten/kota. Untuk itu, informasi nama kabupaten/kota disimpan dalam array. Berikut ini kode selengkapnya:

var map, layerGML;

// data kepadatan penduduk disimpan dalam format associative array
var data = new Array();
data['3401'] = 663;
data['3402'] = 1794;
data['3403'] = 472;
data['3404'] = 1902;
data['3471'] = 11986;

var wilayah = new Array();
wilayah['3401'] = "Kulon Progo";
wilayah['3402'] = "Bantul";
wilayah['3403'] = "Gunung Kidul";
wilayah['3404'] = "Sleman";
wilayah['3471'] = "Kota Yogyakarta";

// array batas bawah kelas (4 kelas)
var batas = [0, 500, 1000, 2000];

// array warna untuk kelas
var warna = ["#EEFFFF", "#6DD5FF", "#19A3FF", "#0048FF"];

function init(){
	map = new OpenLayers.Map('map', {
		controls: [
			new OpenLayers.Control.Navigation(),
			new OpenLayers.Control.PanZoom(),
			new OpenLayers.Control.ScaleLine(),
			new OpenLayers.Control.MousePosition(),
		]
	});

	var context = {
		getColor: function(feature) {
			// atribut kode di file peta
			var id = feature.attributes.KODE2010;
			// data untuk wilayah dengan kode : id
			var val = data[id];
			// warna default
			var color = "white";

			var i = 0;
			while (i < batas.length - 1){
				if (val < batas[i+1]) {
					color = warna[i];
					break;
				}
				i++;
			}
			if (val != null && color == "white")
			{
				color = warna[batas.length - 1];
			}

			return color;
		},
		getLabel: function(feature) {
			return wilayah[feature.attributes.KODE2010];
		}
	};

	var template = {
		strokeColor: "#808080",
		strokeWidth: 1,
		graphicZIndex: 1,
		fillColor: "${getColor}",
		label: "${getLabel}",
		labelAlign: "cm",
	};

	var style = new OpenLayers.Style(template, {context: context});
	var myStyles = new OpenLayers.StyleMap(style);

	layerGML = new OpenLayers.Layer.GML("GML", "gml/3400000000.gml", {
			isBaseLayer: true,
			styleMap: myStyles
		});
	layerGML.events.on({
		'loadend': onLoadEnd,
	});

	map.addLayer(layerGML);
	map.zoomToMaxExtent();
}

function onLoadEnd(){
	var ext = layerGML.getDataExtent();
	map.zoomToExtent(ext, false);
}

Kita tambahkan fungsi getLabel pada contaxt dan definisikan label di template untuk memanggil fungsi getLabel tersebut. Nilai labelAlign = ‘cm’  berarti label akan diletakkan di posisi center middle. Berikut ini hasil dari code diatas: 

Advertisements

5 thoughts on “Membuat peta tematik di web dengan openlayers [Bagian 5: Mengkustomisasi peta]

    1. mungkin gara2 terlalu banyak polygonnya. jadi numpuk2 labelnya.
      Kaya di web sp juga akhirnya dibuat tanpa label default nya

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s