Using Leaflet.js to show OpenStreetmap in PhoneGap Application

  • Posted on: 30 January 2013
  • By: oon
Leaflet.js in PhoneGap Application

Dari artikel sebelumnya tentang Geolocation [1] dan menampilkan Google Static Maps [2], kali ini dilengkapi dengan menampilkan Peta OpenStreetMap dengan menggunakan Leaflet.js [3].

Untuk percobaan awal tidak perlu mendownload dan memasukkan leaflet.js ke dalam project PhoneGap, tetapi dilakukan load online dari cdn.leafletjs.com.

Pada file index.html tambahkan beberapa baris berikut ini pada bagian <head>



Masih pada bagian index.html tambahkan area untuk gambar peta dengan menggunakan tag div

Kemudian pada index.js diubah untuk fungsi menampilkan peta setelah sukses mendapatkan titik Geolocation


navigator.geolocation.getCurrentPosition(onSuccess, onError);
// onSuccess Geolocation
//
function onSuccess(position) {
console.log("geo: "+position.coords.latitude+","+position.coords.longitude);
var map = L.map('map').setView([position.coords.latitude, position.coords.longitude], 14);
L.tileLayer('http://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18
}).addTo(map);
L.marker([position.coords.latitude, position.coords.longitude]).addTo(map);
}
// onError Callback receives a PositionError object
//
function onError(error) {
console.log('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}

Hasil peta dan marker tampak seperti gambar pada artikel ini.

[1] http://oo.or.id/content/working-geolocation-phonegap
[2] http://oo.or.id/content/show-static-map-location-phonegap
[3] http://leafletjs.com

Comments

mas maua tanya, tau ga gimana nampilkan peta dari OSM yang sdh kita export(jadikan .map) kedalam koding Eclipse ?

 

Hi Umi,

bolehkah dibantu dengan tools yang digunakan untuk export peta OSM ke file .map itu apa?

karena saya coba cari di http://wiki.openstreetmap.org/wiki/Export tidak berhasil ketemu, nanti dari situ saya coba untuk tampilkan dalam aplikasi mobile.

ps: koding Eclipse disini maksudnya untuk platform apa ya? kemudian ini tentang PhoneGap (HTML5) kan ya, bukan tentang Java?

exportny pke ini mas http://www.openstreetmap.org/export?lat=-7.4162&lon=111.45089&zoom=15 nanti hasilny jadi ex : map.osm (ohh maaf mas dulu saya salah tnya extensinya .osm bukan .map maaf2) plformny android ms.koding eclipse mksdny java mas...bukan phonegap.

Hi Umi,

file OSM XML [1] sebenarnya tidak cocok untuk digunakan di mobile device, karena format dan ukurannya sangat tidak efisien.

di beberapa aplikasi OpenStreetMap yang ingin menggunakan data vektor (seperti halnya format OSM) biasanya menggunakan format pbf atau bahkan yang dicustom sendiri agar lebih optimal untuk pemrosesan di perangkat mobile.

anyway, untuk menjawab pertanyaanmu, bisa mencari di google dengan keyword OSM XML parser library atau OSM XML parser java.

beberapa hasilnya:

semoga membantu..

[1] http://wiki.openstreetmap.org/wiki/OSM_XML

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.