Belajar OpenLayers

Membuat point dengan metode markers menggunakan OpenLayers

Posted on November 16, 2011 by Arif Chasan

untuk membuat point/titik diatas map atau istilah resminya POI (Point Of Interest) dalam OpenLayers bisa menggunakan metode Marker. live demonya bisa dilihat di link membuat_poi_dengan_metode_marker.html

fungsi dasarnya adalah “addMarker”, dan berikut cara penggunaannya:

tentu saja tampilkan dulu mapnya. cara simple nya bisa dilihat di link menampilkan-map-simple-menggunakan-openlayers.

buat layernya untuk “wadah” titik POInya tersebut.

var markers = new OpenLayers.Layer.Markers( "Markers" );
var_map.addLayer(markers);

deklarasikan atribut-atribut POInya tersebut seperti ukuran, offsetnya, icon yang digunakan, juga lokasi POInya (berupa lonlat)

var size = new OpenLayers.Size(21,25);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png',size,offset);
var location = new OpenLayers.LonLat(90,10);

dan terakhir, panggil fungsinya

markers.addMarker(new OpenLayers.Marker(location,icon));

just it! sekarang tampilkan map anda di browser,dan akan ada titik merah sesuai location yang anda definisikan.

ini full scriptnya

var markers = new OpenLayers.Layer.Markers( "Markers" );
var_map.addLayer(markers);
 
var size = new OpenLayers.Size(21,25);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png',size,offset);
var location = new OpenLayers.LonLat(90,10);
markers.addMarker(new OpenLayers.Marker(location,icon));

Posted in Dasar | Tagged basic, marker, openlayers basic, poi, point openlayers | 16 Comments

OpenLayers Control

Posted on November 14, 2011 by Arif Chasan

untuk menambahkan control-control dalam menavigasikan map, pertama lihat dulu cara menampilkan map dengan sederhana di link Menampilkan map (osgeo).

lalu pada line

var_map = new OpenLayers.Map( 'id_map' );

ubah menjadi

var_map = new OpenLayers.Map( 'map', {
                    controls: [
 
                    ]});

dan isikan command control-control yang diinginkan didalam tag

controls: [
          	//ini diisikan command untuk menambahkan control-controlnya
          ]

dan inilah daftar command control-controlnya :

untuk navigasi peta dengan mouse. (meskipun sudah default bisa dinavigasikan tanpa script ini :p)
```
new OpenLayers.Control.Navigation(),
```
untuk pan zoom (seperti zoom, dan navigasi manual)
```
new OpenLayers.Control.PanZoomBar(),
```
layer switcher, atau mengganti basemap ketika layer yang dibuat lebih dari satu
```
new OpenLayers.Control.LayerSwitcher({'ascending':false}),
```
permanent link untuk menyimpan link peta sesuai yang sedang tampil saat itu
```
new OpenLayers.Control.Permalink('permalink'),
```
menampilkan skala pada peta
```
new OpenLayers.Control.ScaleLine(),
```
menampilkan lonlat ketika mouse sedang diatas peta
```
new OpenLayers.Control.MousePosition(),
```
menampilkan map kecil untuk summary peta keseluruhan
```
new OpenLayers.Control.OverviewMap(),
```

dan inilah script utuhnya

var_map = new OpenLayers.Map( 'map', {
                    controls: [
                        new OpenLayers.Control.Navigation(),
                        new OpenLayers.Control.PanZoomBar(),
                        new OpenLayers.Control.LayerSwitcher({'ascending':false}),
                        new OpenLayers.Control.Permalink(),
                        new OpenLayers.Control.ScaleLine(),
                        new OpenLayers.Control.Permalink('permalink'),
                        new OpenLayers.Control.MousePosition(),
                        new OpenLayers.Control.OverviewMap(),
                        new OpenLayers.Control.KeyboardDefaults()
                    ]});

Posted in Dasar | Tagged control pada openlayers, menambahkan control untuk peta | 19 Comments

Menampilkan map google menggunakan OpenLayers

Posted on November 13, 2011 by Arif Chasan

dalam menampilkan maps Google menggunakan openlayers, kita membutuhkan Google API dalam penggunaannya. simak tutorial ini untuk mengetahui penggunaan Google API (dan OpenLayers tentunya) untuk menampilkan Google Maps di dalam website.

live demo tutorial ini bisa dilihat di map_google_menggunakan_openlayers.html

buat struktur html sederhana seperti berikut

<html>
	<head>
		<title>Google Maps - OpenLayers</title>
	</head>
	<body>
	</body>
</html>

masukkan style berikut didalam tag <head>

<style>
@media screen
	{#map{width: 512px; height:256px; border: 1px solid lightgrey;}}
	.olLayerGoogleCopyright{right:3px;bottom:2px;left:auto;}.olLayerGoogleV3.olLayerGoogleCopyright{bottom:0;right:0!important;}.olLayerGooglePoweredBy{left:2px;bottom:2px;}.olLayerGoogleV3.olLayerGooglePoweredBy{bottom:0!important;}
 
</style>

didalam tag <head> juga, load Google API menggunakan script seperti berikut (ini adalah google API untuk belajaropenlayers.com), generate google api-mu sendiri di http://code.google.com/apis/maps/signup.html
```
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA0fCprI0COg6sgW8Fc_vNzhSjKNeNhClvlSmpEOZthh6rTOSKaxRE9apyuebhBYj1PrfBQGuxjL-MJA" type="text/javascript"></script>
```

masih didalam tag <head>, load library OpenLayers nya

<script src="[direktori Openlayersnya]/OpenLayers.js"></script>

buat tag javascript didalam tag <head> setelah line load library OpenLayers untuk wadah scriptnya nanti
```
<script type="text/javascript">
 
</script>
```

definisikan variable global untuk menampung map

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

definisikan fungsi untuk memanggil mapnya

<script type="text/javascript">
	var map;
 
	function init() {
 
	}
</script>

didalam fungsi “init()” gunakan command OpenLayers untuk memanggil map

<script type="text/javascript">
	var map;
 
	function init() {
		map = new OpenLayers.Map('map');
 
	}
</script>

tambah control untuk merubah-rubah baselayernya

<script type="text/javascript">
	var map;
 
	function init() {
		map = new OpenLayers.Map('map');
		map.addControl(new OpenLayers.Control.LayerSwitcher());
 
	}
</script>

tambahkan semua layers yang google sediakan

<script type="text/javascript">
	var map;
 
	function init() {
		map = new OpenLayers.Map('map');
		map.addControl(new OpenLayers.Control.LayerSwitcher());
 
            var gphy = new OpenLayers.Layer.Google(
                "Google Physical",
                {type: G_PHYSICAL_MAP} //google physical
            );
            var gmap = new OpenLayers.Layer.Google(
                "Google Streets", // google street
                {numZoomLevels: 20}
            );
            var ghyb = new OpenLayers.Layer.Google(
                "Google Hybrid", //google hibrid
                {type: G_HYBRID_MAP, numZoomLevels: 20}
            );
            var gsat = new OpenLayers.Layer.Google(
                "Google Satellite", //google satelite
                {type: G_SATELLITE_MAP, numZoomLevels: 22}
            );
 
            map.addLayers([gphy, gmap, ghyb, gsat]);
 
	}
</script>

tambahkan command default posisi map

<script type="text/javascript">
        var map;
 
        function init() {
            map = new OpenLayers.Map('map');
            map.addControl(new OpenLayers.Control.LayerSwitcher());
 
            var gphy = new OpenLayers.Layer.Google(
                "Google Physical",
                {type: G_PHYSICAL_MAP}
            );
            var gmap = new OpenLayers.Layer.Google(
                "Google Streets", // the default
                {numZoomLevels: 20}
            );
            var ghyb = new OpenLayers.Layer.Google(
                "Google Hybrid",
                {type: G_HYBRID_MAP, numZoomLevels: 20}
            );
            var gsat = new OpenLayers.Layer.Google(
                "Google Satellite",
                {type: G_SATELLITE_MAP, numZoomLevels: 22}
            );
 
            map.addLayers([gphy, gmap, ghyb, gsat]);
 
            map.setCenter(new OpenLayers.LonLat(10.2, 48.9), 5);
	}
</script>

tambahkan <div id=”map”></div> didalam tag <body>
panggil fungsi “init()” untuk mengeksekusi semua yang sudah kita kerjakan. bisa dengan menambahkan <body onload=”init()”>

dan inilah script lengkapnya

<html>
<head>
	<title>Google Maps - OpenLayers</title>
	<style>
		@media screen{#map{width: 512px; height:256px; border: 1px solid lightgrey;}}
                .olLayerGoogleCopyright{right:3px;bottom:2px;left:auto;}.olLayerGoogleV3.olLayerGoogleCopyright{bottom:0;right:0!important;}.olLayerGooglePoweredBy{left:2px;bottom:2px;}.olLayerGoogleV3.olLayerGooglePoweredBy{bottom:0!important;}
	</style>
	<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA0fCprI0COg6sgW8Fc_vNzhSjKNeNhClvlSmpEOZthh6rTOSKaxRE9apyuebhBYj1PrfBQGuxjL-MJA" type="text/javascript"></script>
    	<script src="http://openlayers.org/dev/OpenLayers.js"></script>
<script type="text/javascript">
        var map;
 
        function init() {
            map = new OpenLayers.Map('map');
            map.addControl(new OpenLayers.Control.LayerSwitcher());
 
            var gphy = new OpenLayers.Layer.Google(
                "Google Physical",
                {type: G_PHYSICAL_MAP}
            );
            var gmap = new OpenLayers.Layer.Google(
                "Google Streets", // the default
                {numZoomLevels: 20}
            );
            var ghyb = new OpenLayers.Layer.Google(
                "Google Hybrid",
                {type: G_HYBRID_MAP, numZoomLevels: 20}
            );
            var gsat = new OpenLayers.Layer.Google(
                "Google Satellite",
                {type: G_SATELLITE_MAP, numZoomLevels: 22}
            );
 
            map.addLayers([gphy, gmap, ghyb, gsat]);
 
            map.setCenter(new OpenLayers.LonLat(10.2, 48.9), 5);
	}
</script>
</head>
	<body onload="init()">
		<div id="map"></div>
	</body>
</html>

Posted in Dasar | Tagged belajar openlayers, membuat google maps, menampilkan google maps untuk website kita | 15 Comments

Menampilkan map simple menggunakan openlayers

Posted on November 13, 2011 by Arif Chasan

contoh hasil jadi tutorial ini bisa dilihat di map_simple_menggunakan_openlayers.html

buat struktur html sederhana dalam menampilkan sebuah page

<html>
 <head>
  <title>simple map menggunakan openlayers</title>
 </head>
  <body>
  </body>
</html>

didalam tag <head></head>, sisipkan style css seperti berikut

<style>
@media screen
    {
        #id_map{width: 512px; height:256px; border: 1px solid lightgrey;}
    }
</style>

masih didalam tag <head></head>, load library openlayers dengan menggunakan tag <script type=”text/javascript” src=”[direktori openlayersnya]/lib/OpenLayers.js”></script>
tepat dibawah line untuk meload library openlayers, buat tag untuk membuat fungsi javascript
```
<script type="text/javascript">
 
</script>
```
buat variabel global didalam tag <script> yang sudah dibuat diatas
```
var var_map, layer;
```

buat fungsi untuk mengeksekusi code yang akan kita buat

var var_map, layer;
   function function_map(){
 
}

didalam fungsi “function_map()”, definisikan variable untuk mengambil source map.

var var_map, layer;
    function function_map(){
        var_map = new OpenLayers.Map( 'id_map' );
    }

buat layer untuk mapnya, contoh disini dengan memanggil map wms osgeo dengan nama layer “basic”.

var var_map, layer;
   function function_map(){
     var_map = new OpenLayers.Map( 'id_map' );
     layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0",{layers: 'basic'});
     var_map.addLayer(layer);
 
   }

tambahkan control map untuk menampilkan map dengan tampilan maksimal

var var_map, layer;
  function function_map(){
    var_map = new OpenLayers.Map( 'id_map' );
    layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0",{layers: 'basic'});
    var_map.addLayer(layer);
    var_map.zoomToMaxExtent();
  }

tambahkan <div id=”id_map”> didalam tag <body></body> untuk penempatan mapnya.
terakhir, tinggal memanggil fungsi map yang sudah kita buat. bisa onClick, onLoad, atau terserah anda dengan menambahkan tagnya di dalam html. contohnya, <body onload=”function_map()”>

dan inilah script utuhnya

<html>
  <head>
    <title>Simple map menggunakan openlayers</title>
    <style>
      @media screen
       {#id_map{width: 512px; height:256px; border: 1px solid lightgrey;}
       }
    </style>
    <script type="text/javascript" src="openlayers/lib/OpenLayers.js"></script>
    <script type="text/javascript">
      var var_map, layer;
        function function_map(){
          var_map = new OpenLayers.Map( 'id_map' );
          layer = new OpenLayers.Layer.WMS( "OpenLayers WMS","http://vmap0.tiles.osgeo.org/wms/vmap0",{layers: 'basic'} );
          var_map.addLayer(layer);
          var_map.zoomToMaxExtent();
        }
    </script>
  </head>
  <body onLoad="function_map()">
  <div id="id_map"></div>
  </body>
</html>

simpan semua hasil pekerjaan tadi dengan nama coba.html, lalu buka dengan webbrowser anda.

Posted in Dasar | 36 Comments

Persiapan – Installasi ms4w dan openlayers

Posted on November 12, 2011 by Arif Chasan

1. WEB SERVER

saya rekomendasikan untuk memakai webserver MS4W. selain gratis, juga memang MS4W diperuntukkan untuk web mapping. download saja di website http://www.maptools.org/ms4w/ . disarankan untuk mendownload versi .zip(compressed). karena dalam penginstallannya tidak perlu koneksi lagi ke internet.

extract file “ms4w_x.x.zip” kedalam drive C:\ atau terserah anda yang penting extract di root drive tersebut. sehingga akan terdapat C:\ms4w atau D:\ms4w. asal jangan diextract kedalam subfolder seperti C:\[bla bla]\ms4w\. bukan larangan, hanya untuk memudahkan konfigurasinya diwaktu selanjutnya.

didalam ms4w seharusnya ada folder C:\ms4w\Apache\htdocs\ karena didalam folder inilah kita akan menyimpan semua pekerjaan kita.

jalankan ms4w dengan double click file “apache-install.bat” yang terdapat dalam folder C:\ms4w\

catatan: jika anda penguna windows 7, klik kanan “apache-install.bat” dan klik “run as administrator” untuk menjalankan ms4w.

tes ms4w apakah sudah berjalan dengan baik atau tidak dengan mengetikkan “localhost” di web browser anda.

jika tampil seperti gambar berikut:

maka ms4w sudah siap digunakan. namun jika masih belum berhasil, ada kemungkinan port nya bentrok dan bisa diatasi dengan mengganti httpd.conf yang terdapat dalam file C:\ms4w\Apache\conf\httpd.conf. buka dengan notepad, cari kata “listen” dan ubah angka 80 didepannya dengan angka terserah anda (max 4 angka). ambillah contoh kita ganti dengan 8787. maka tes sekali lagi dengan mengetikkan “localhost:8787″ pada browser anda.

2. Library OpenLayers

download versi terbarunya di http://openlayers.org/. pilih yang berekstensi .zip, jika sudah selesai download, extract filenya ke dalam folder C:\ms4w\Apache\htdocs\openlayers\ dan pastikan strukturnya seperti ini :

untuk menguji apakah library openlayers sudah benar bisa membuat file html sederhana seperti berikut:

simpan file html diatas dengan nama coba.html dan simpan difolder C:\ms4w\Apache\htdocs\

lalu buka file C:\ms4w\Apache\htdocs\openlayers\lib\Openlayers.js dan tambahkan kode berikut di line paling atas:

alert("openlayers berhasil diinstall");

ketikkan alamat “http://localhost/coba.html” dibrowser anda. jika keluar popup alert bertuliskan “openlayers berhasil diinstall” maka anda sudah bisa menggunakan library openlayers. dan selamat belajar…

Posted in Dasar | Tagged belajar openlayers, cara install ms4w, cara install openlayers | 21 Comments