Menempelkan OpenStreetMap di Blog / Website

January 27, 2009  |  Geo Patterns, Geography Tools

Setelah sukses menempelkan Detik Map di blog, saya ingin menunjukkan pada Anda cara menempelkan OpenStreetMap di blog atau website. Dengan OpenStreetMap Anda tidak cuma sekedar melihat peta yang ada, tapi juga bisa melakukan editing dan menggunakan data peta yang terdapat didalamnya. Tidak seperti Detik Map yang tidak menyediakan tools untuk embed to blog, OpenStreetmap menyediakan fasilitas eksport.
Berikut adalah langkah-langkah export dari OpenStreetMap ke dalam blog atau website :
1. Browse peta yang Anda inginkan. Zoom in ke area yang Anda kehendaki.
2. Pilih tab Export
3. Pada pilihan “Format to Export”, pilih diantara “Mapnik” atau “osmarender image”. Pilih image format.
4. Image map akan di download sehingga Anda menempelkannya di halaman blog atau website.

Cara lainnya adalah dengan embed HTML code seperti di Google Maps :
1. Ikuti langkah 1 dan 2 seperti diatas
2. Pada pilihan “Format to Export”, pilih “Embeddable HTML”.
3. Anda juga bisa menambahkan sebuah marker sebagai penanda.
4. Code tersedia dalam iframe. Contoh codenya adalah sebagai berikut :


<iframe width=”425″ height=”350″ frameborder=”0″ scrolling=”no” marginheight=”0″ marginwidth=”0″ src=”http://www.openstreetmap.org/export/embed.html?bbox=106.82036,-6.23579,106.83319,-6.22354&layer=mapnik&marker=-6.22437,106.83141″ style=”border: 1px solid black”></iframe><br /><small><a href=”http://www.openstreetmap.org/?lat=-6.229665&lon=106.826775&zoom=15&layers=B000FTFTT&mlat=-6.22437&mlon=106.83141″>View Larger Map</a></small>

5. Paste code tersebut ke dalam blog atau website.
Berikut adalah peta dari OpenStreetMap yang menunjukkan lokasi kantor tempat saya bekerja saat ini yang segera akan saya tinggalkan (marker merah).

View Larger Map

Blog ini tidak bertanggungjawab dengan materi iklan yang ada.


3 Comments


  1. Saya sudah coba untuk menempatkan detik Map di web blogger, tapi bisa berikan langkah2nya secara jelas lagi, sudah saya coba tapi tidak bisa

  2. @amsar : coba cek blognya danu yang pake blogger juga, saya bukan pengguna blogger

  3. @amsar : coba cek blognya danu yang pake blogger juga, saya bukan pengguna blogger. Kala di blognya danu bisa seharusnya di tempat Anda juga bisa.

Trackbacks

  1. StreetMap - Menempelkan OpenStreetMap di Blog / Website

Leave a Reply