如何在網頁上放 OpenStreetMap 及 GPX 軌跡

本文分享兩個主題

• 如何放單純的地圖(可互動操作)
• 如何在網頁上放地圖並顯示 GPX 軌跡在地圖上

如何放單純的地圖(可互動操作)

1. 連到 http://www.openstreetmap.org/
2. 點選畫面最上面的 "Export" 功能
3. 用滑鼠拖拉地圖區域
4. 選擇格式
• OpenStreetMap XML Data, 這是 XML 資料檔
• Map Image (shows standard layer), 這是下載成圖片, 有 png,jpg,svg,pdf 格式
• Embeddable HTML, 網頁的 HTML 語法 --- 選這個，系統就會給你一段 <iframe 開頭的 html 碼

譬如這段 HTML
<iframe frameborder="0" height="350" marginheight="0" marginwidth="0" scrolling="no" src="http://www.openstreetmap.org/export/embed.html?bbox=118.05,20.8,124.63,26.26&layer=mapnik&marker=23.97120,121.21765" style="border: 1px solid black;" width="425"></iframe><br /> <small><a href="http://www.openstreetmap.org/?lat=23.53&lon=121.34&zoom=7&layers=M&mlat=23.97120&mlon=121.21765">View Larger Map</a></small>
會產生這樣的地圖:

View Larger Map

如何在網頁上放地圖並顯示 GPX 軌跡在地圖上

這比較複雜一點，我的方法是用 leaflet 這個 library 來畫地圖。 leaflet 可以加 plugin，配合 leaflet-gpx，就能畫 GPX 軌跡。

我參考作者的 demo，簡化之後：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://kcwu.csie.org/~kcwu/geo/leaflet.js"></script>

<script src="http://kcwu.csie.org/~kcwu/geo/leaflet-gpx/gpx.js"></script>
<script src="http://kcwu.csie.org/~kcwu/geo/osm-gpx.js"></script>

<style type="text/css"> @import url('http://kcwu.csie.org/~kcwu/geo/osm-gpx.css');</style>
<section id='gpx_container' class=gpx ></section>
<script type="application/javascript">
    simple_gpx($('#gpx_container'),
            "http://kcwu.csie.org/~kcwu/geo/gpx/20130518 鷹仔尖.gpx",
            { title: '20130518 鷹仔尖.gpx', height: 400 });
</script>

上面這段 HTML code 可以做出下面這樣的地圖

使用說明：

• 一般使用只要改 simple_gpx 那三行就夠了，剩下不用動。
• 用到的檔案只有 osm-gpx.js 是我寫的，於 public domain 釋出。其他檔案是各 project 自己的(BSD或MIT授權)，可自由使用。
• 若同一頁會用多次，gpx_container 要改成其他名字(不能跟其他的重複，不然會錯亂)。前兩行(jquery.min.js 跟 leaflet.js)總共只要寫一次就好。