JA:Openlayers POI layer example
目的
ここでの目的は、OSM スリッピーマップの上に POI のマーカーを表示することです。 この例では、これを行うためのとても簡単な方法を示します。
ファイル
index.html
以下を新しい HTML ファイルとしてコピーして、index.html という名前にします。
<html><body>
<div id="mapdiv"></div>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script>
map = new OpenLayers.Map("mapdiv");
map.addLayer(new OpenLayers.Layer.OSM());
var pois = new OpenLayers.Layer.Text( "My Points",
{ location:"./textfile.txt",
projection: map.displayProjection
});
map.addLayer(pois);
//Set start centrepoint and zoom
var lonLat = new OpenLayers.LonLat( 9.5788, 48.9773 )
.transform(
new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
map.getProjectionObject() // to Spherical Mercator Projection
);
var zoom=11;
map.setCenter (lonLat, zoom);
</script>
</body></html>
textfile.txt
次に、textfile.txt という名前のファイルを作ります。 これはタブ区切りのテキストファイルで、それぞれの列は最初の行で定義されます。 このファイルの例は以下のようなものです:
lat lon title description icon iconSize iconOffset 48.9459301 9.6075669 Title One Description one<br>Second line.<br><br>(click again to close) Ol_icon_blue_example.png 24,24 0,-24 48.9899851 9.5382032 Title Two Description two. Ol_icon_red_example.png 16,16 -8,-8
注意: 最後の行の最後の文字の後に改行を入れるのを忘れないようにしてください。 さもなければ最後の行の POI は表示されません。
さらなる詳細については OpenLayers documentation on Layer.Text も参照してください。
アイコンファイル
それから、この例に必要な二つのアイコンファイルをダウンロードします:
- Ol_icon_blue_example.png
- Ol_icon_red_example.png
結果
四つ全てのファイルはあなたのウェブサーバーの同じフォルダに置く必要があります。
Now you can open a browser window with the URL of your new index.html file. You will see OSM maps, served from the main server. If you click on the layers switcher symbol ("+" in the top right corner of the map), you will see an overlay layer called "My Points". This layer shows the markers defined by the file textfile.txt. The blue and the red marker on the map are the visible result.
重要
この例をあなたのウェブサイトで公開するなら、あなたは全ての ライセンス 要求に責任があります!