Menampilkan OSM, Bing Map & Google Map di OpenLayers 2

Cara menampilkan OpenStreetMap, Bing Map, dan Google Map di OpenLayers 2 dalam satu tampilan peta cukup mudah. Bahkan layer-layer peta tersebut juga bisa ditampilkan secara bersamaan dalam satu tampilan dan bisa digabungkan dengan Peta WMS lain misalnya dari MapServer.

Daftar Isi

1. Mempersiapkan Halaman Peta OpenLayers 2
2. Menampilkan OpenStreetMap di OpenLayers 2
3. Menampilkan Google Map di OpenLayers 2
4. Menampilkan Bing Map di OpenLayers 2
5. Menampilkan Semua Layer Peta dalam Satu Tampilan
6. Demo Online dan Source Code

1. Mempersiapkan Halaman Peta OpenLayers 2

Buat halaman html, misalnya dengan nama osm-bing-googlemap-openlayers-2.html. Pada bagian atas (header), isikan kode program seperti di bawah ini :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Peta Web GIS dengan OpenLayers, Google Map, OpenStreetMap dan Bing Map</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="lib/OpenLayers.js"></script>
	<script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=[apikey]'></script>
	<script>
		var map;
		var info;
		
		function load() {
			map = new OpenLayers.Map('map', {
				projection: new OpenLayers.Projection('EPSG:900913')
			});

			map.addControl(new OpenLayers.Control.LayerSwitcher());
			
			map.setCenter(new OpenLayers.LonLat(117.14286787109381, -3.3035052606586595)
			.transform(new OpenLayers.Projection('EPSG:4326'), map.getProjectionObject()), 5);
		}
	</script>
</head>

Sedangkan pada bagian body (tengah) isikan kode program berikut ini :

<body onload="load();">
<div id="map" class="" align="center" style="width:100%;height:500px;"></div>
</body>
</html>

 

2. Menampilkan OpenStreetMap di OpenLayers 2

Untuk menampilkan layer peta Open Street Map (OSM), tambahkan baris berikut ini ke javascript yang ada di header :
var osm = new OpenLayers.Layer.OSM();
…
map.addLayers([osm]);
Hasilnya :
Menampilkan OpenStreetMap di OpenLayers 2
Screenshoot Menampilkan OpenStreetMap di OpenLayers 2

3. Menampilkan Google Map di OpenLayers 2

Layer peta dari Google Map juga bisa ditampilkan di OpenLayers 2, caranya pertama harus didapatkan dahulu API Key dari Google agar bisa menampilkan Google Map. Buka Developer Console Google, login dengan akun google/gmail anda :

Login Google API Console Untuk Mendapatkan API Key
Screenshot Login Google API Console Untuk Mendapatkan API Key

Pilih Aktifkan API dan Layanan :

Pilih Aktifkan Layanan Api GoogleMap di Google Console
Screenshot Pilih Aktifkan Layanan Api GoogleMap di Google Console

Aktifkan Google Map Javascript API :

Mengaktifkan Koleksi API Google Map Javascript API
Screenshot Mengaktifkan Koleksi API Google Map Javascript API

Buat API Key Baru

Membuat Kredensial Kunci API Google Map Javascript API
Screenshot Membuat Kredensial Kunci API Google Map Javascript API

Hasil pembuatan API Key :

Kunci API Dibuat Untuk Google Map Javascript Web
Screenshot Kunci API Dibuat Untuk Google Map Javascript Web

Tambahkan baris berikut ini ke javascript yang ada di header, ubah [apikey] dengan API Key yang sudah didapatkan di atas :

<script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=[apikey]'></script>

…
var gmap = new OpenLayers.Layer.Google("Google Hybrid", {type: G_HYBRID_MAP, 'sphericalMercator': true});
…
map.addLayers([gmap]);
 
Hasilnya :
Menampilkan Google Map di OpenLayers 2
Screenshot Menampilkan Google Map di OpenLayers 2

4. Menampilkan Bing Map di Open Layers 2

Untuk menampilkan layer Bing Map di OpenLayers 2 yang perlu dilakukan adalah menambahkan script di bawah ini pada javascript yang ada di header :
var bing = new OpenLayers.Layer.Bing({
key: "ApTJzdkyN1DdFKkRAE6QIDtzihNaf6IWJsT-nQ_2eMoO4PN__0Tzhl2-WgJtXFSp",
type: 'AerialWithLabels', //'Aerial', //'Road',
metadataParams: { mapVersion: 'v1' }
});
…
map.addLayers([bing]);

 

Hasilnya :
Menampilkan Bing Map di OpenLayers 2
Screenshot Menampilkan Bing Map di OpenLayers 2

5. Menampilkan Semua Layer Peta dalam Satu Tampilan

 Untuk menggabungkan semua layer yang sudah diterangkan diatas maka semua script harus digabungkan sebagai berikut :
<script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=[apikey]'></script>

var osm = new OpenLayers.Layer.OSM();
var gmap = new OpenLayers.Layer.Google("Google Hybrid", {type: G_HYBRID_MAP, 'sphericalMercator': true}); 
 
var bing = new OpenLayers.Layer.Bing({
key: "ApTJzdkyN1DdFKkRAE6QIDtzihNaf6IWJsT-nQ_2eMoO4PN__0Tzhl2-WgJtXFSp",
type: 'AerialWithLabels', //'Aerial', //'Road',
metadataParams: { mapVersion: 'v1' }
});
dan semua layer juga harus ditampilkan :
map.addLayers([osm, gmap, bing]);
Sehingga hasil akhirnya keseluruhan script adalah seperti ini :
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Peta Web GIS dengan OpenLayers, Google Map, OpenStreetMap dan Bing Map</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="lib/OpenLayers.js"></script>
	<script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=[apikey]'></script>
	<script>
		var map;
		var info;
		
		function load() {
			map = new OpenLayers.Map('map', {
				projection: new OpenLayers.Projection('EPSG:900913')
			});
			var osm = new OpenLayers.Layer.OSM();            
			var gmap = new OpenLayers.Layer.Google("Google Hybrid", {type: G_HYBRID_MAP, 'sphericalMercator': true});
			var bing = new OpenLayers.Layer.Bing({
				key: "ApTJzdkyN1DdFKkRAE6QIDtzihNaf6IWJsT-nQ_2eMoO4PN__0Tzhl2-WgJtXFSp",
				type: 'AerialWithLabels', //'Aerial', //'Road',
				metadataParams: { mapVersion: 'v1' }
			});

			map.addLayers([osm, gmap, bing]); 

			map.addControl(new OpenLayers.Control.LayerSwitcher());
			
			map.setCenter(new OpenLayers.LonLat(117.14286787109381, -3.3035052606586595)
			.transform(new OpenLayers.Projection('EPSG:4326'), map.getProjectionObject()), 5);
		}
	</script>
</head>
<body onload="load();">
	<div id="map" class="" align="center" style="width:100%;height:500px;"></div>
</body>
</html>
Hasilnya semua layer peta akan bisa ditampilkan :
Menampilkan OpenStreetMap, Bing Map dan Google Map di OpenLayers 2
Screenshot Menampilkan OpenStreetMap, Bing Map dan Google Map di OpenLayers 2

6. Demo Online dan Source Code

Demo secara online bisa dilihat disini. Sedangkan source code bisa didapatkan dengan menghubungi email amijaya.net@gmail.com

 

Leave a Reply

Your email address will not be published. Required fields are marked *