Membuat peta tematik di web dengan openlayers [Bagian 6: Menghubungkan dengan database ]

Pada bagian-bagian sebelumnya, data ditulis dalam array di javascript. Lalu bagaimana kalau mau me-load data yang ada di database? Untuk keperluan itu, kita tidak bisa menggunakan javascript, karena java script hanya jalan di client/browser (client-side). Kita butuh bahasa pemrograman server-side yang bisa mengakses ke database. Dalam hal ini kita akan mencoba memakai bahasa pemrograman PHP dengan data base MySql.

Database dari MySql akan kita query melalui PHP dan kita simpan ke dalam array di PHP. Selanjutnya array di PHP tersebut kita transfer ke javascript. Cara yang termudah adalah menggunakan fungsi json_encode() pada PHP. Fungsi ini akan mengubah array PHP menjadi format JSON (Javascript Object Notation). Sebagai contoh array PHP berikut ini:

$warnakelas = array("#EEFFFF", "#6DD5FF", "#19A3FF", "#0048FF");

Akan diubah menjadi

["#EEFFFF","#6DD5FF","#19A3FF","#0048FF"]

Pada contoh ini akan kita gunakan database MySql yang menyimpan data jumlah penduduk. Berikut ini contoh datanya:

Dan berikut ini contoh penerapannya di kode PHP:

<?php
	// konek ke mysql
	mysql_connect("localhost","root","password") or die("Koneksi gagal");
	mysql_select_db("gisjogja") or die("Database tidak bisa dibuka");

	$query = "SELECT * FROM datajogja ORDER BY kode2010";
	$hasil = mysql_query($query);

	$kepadatan = array();
	$nama = array();

	while($data  = mysql_fetch_array($hasil))
	{
		$kepadatan[$data["kode2010"]] = $data["kepadatan"];
		$nama[$data["kode2010"]] = $data["nama"];
	}

	$bataskelas = array(0, 500, 1000, 2000);
	$warnakelas = array("#EEFFFF", "#6DD5FF", "#19A3FF", "#0048FF");

?>
<script type="text/javascript">
	var map, layerGML;

	// data kepadatan penduduk disimpan dalam format associative array
	var data = <?php echo json_encode($kepadatan); ?>;

	var wilayah = <?php echo json_encode($nama); ?>;

	// array batas bawah kelas (4 kelas)
	var batas = <?php echo json_encode($bataskelas); ?>;

	// array warna untuk kelas
	var warna = <?php echo json_encode($warnakelas); ?>;

	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);
	}

</script>

Hasilnya akan sama persis dengan conth di bagian 5:

Untuk melihat kode yang dihasilkan oleh fungsi json_encode(), kita bisa menggunakan fasilitas view source dari browser.

Advertisements

9 thoughts on “Membuat peta tematik di web dengan openlayers [Bagian 6: Menghubungkan dengan database ]

    1. saya belum pernah nyoba sih. tapi kayanya openlayers hanya untuk menampilkan. kalau mau menyimpan ke database mungkin bisa dengan request ajax ke script di server (bisa pake php). lha script server side itu yg mengeksekusi ke database.

  1. Kak, saya mau tanya lagi..

    Kalo labelnya munculnya “undifined” untuk labelnya, apanya yang salah ya pak..? dan warnanya juga cuma putih..

    Terima kasih sebelmnya…

  2. mas, mau tanya kalo bikin popup buat nampilin data dari database bukan dari feature di file gml petanya, gimana ya mas?
    makasih sebelumnya

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