OpenStreetMapとは
OpenStreetMap(OSM)は、道路地図などの地理情報データを誰でも利用できるよう、フリーの地理情報データを作成することを目的としたプロジェクトです。
誰でも自由に参加して、誰でも自由に編集でき、誰でも自由に利用する事が出来ます。（https://openstreetmap.jpより引用）
OpenStreetMapを自分のサイトなどに表示する場合には下記のようなコードを記述します。
<body onload="layers_sample()"> <div id="map_canvas" style="width:600px; height:400px"></div> </body>
headタグに次のように記述します。
function layers_sample(){
var options = {
controls:[
new OpenLayers.Control.Navigation(), //移動アイコン
new OpenLayers.Control.NavToolbar(), //手のアイコン、虫眼鏡アイコン
new OpenLayers.Control.PanZoomBar(), //ズームバー
new OpenLayers.Control.ScaleLine(), //スケール
new OpenLayers.Control.Attribution() //ライセンス表記
],
};
var mapObj = new OpenLayers.Map("map_canvas",options);
mapObj.addLayer(new OpenLayers.Layer.OSM());
mapObj.setCenter(new OpenLayers.LonLat(139.76, 35.68)
.transform(
new OpenLayers.Projection("EPSG:4326"),
new OpenLayers.Projection("EPSG:3857")
), 15
);
}
デフォルトだと「Data CC-By-SA by OpenStreetMap」というAttribution情報がかなり高い位置に表示されてしまうので、スタイルシートに以下の記述を追加し、位置とフォントサイズを変更します。
#map_canvas.olControlAttribution {
font-size:13px;
bottom:3px;
}
スポンサード・リンク