OpenStreetMapを使ってみた

GoogleMapsが1日あたり 25,000 件を超えると有償になるということで

大規模サイトの場合は他のサービスを使う場合がある。

https://developers.google.com/maps/faq?hl=ja#usage_pricing

今回使用したのが

http://osm.jp/

まずはJSを読み込む


&lt;script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"&gt;&lt;/script&gt;

1	<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>

CSSなどは特になく、これだけを読みこめばOK

地図を表示する


&lt;div id="map" style="height: 500px; width: 100%;"&gt;&lt;/div&gt;

1	<div id="map" style="height: 500px; width: 100%;"></div>

このあたりはGoogleMapsと同じ。


var map = new OpenLayers.Map("map");
var mapnik = new OpenLayers.Layer.OSM();
map.addLayer(mapnik);

var l1 = new OpenLayers.LonLat(139.76, 35.68).transform(
	new OpenLayers.Projection("EPSG:4326"),
	new OpenLayers.Projection("EPSG:900913")
);

map.setCenter(l1, 15);

var map = new OpenLayers.Map("map");

var mapnik = new OpenLayers.Layer.OSM();

map.addLayer(mapnik);

var l1 = new OpenLayers.LonLat(139.76, 35.68).transform(

new OpenLayers.Projection("EPSG:4326"),

new OpenLayers.Projection("EPSG:900913")

);

map.setCenter(l1, 15);

指定したターゲットに対して上記のようなjsを実行する。

すると地図が表示される。

マーカーを設置する


var map = new OpenLayers.Map("map");
var mapnik = new OpenLayers.Layer.OSM();
map.addLayer(mapnik);

var l1 = new OpenLayers.LonLat(139.76, 35.68).transform(
	new OpenLayers.Projection("EPSG:4326"),
	new OpenLayers.Projection("EPSG:900913")
);

map.setCenter(l1, 15);

var markers = new OpenLayers.Layer.Markers("map");
map.addLayer(markers);

var p1 = new OpenLayers.Layer.Text("My Points", { location:"txt/1.txt" } );
map.addLayer(p1);

var p2 = new OpenLayers.Layer.Text("My Points", { location:"txt/2.txt" } );
map.addLayer(p2);

var p3 = new OpenLayers.Layer.Text("My Points", { location:"txt/3.txt" } );
map.addLayer(p3);

var map = new OpenLayers.Map("map");

var mapnik = new OpenLayers.Layer.OSM();

map.addLayer(mapnik);

var l1 = new OpenLayers.LonLat(139.76, 35.68).transform(

new OpenLayers.Projection("EPSG:4326"),

new OpenLayers.Projection("EPSG:900913")

);

map.setCenter(l1, 15);

var markers = new OpenLayers.Layer.Markers("map");

map.addLayer(markers);

var p1 = new OpenLayers.Layer.Text("My Points", { location:"txt/1.txt" } );

map.addLayer(p1);

var p2 = new OpenLayers.Layer.Text("My Points", { location:"txt/2.txt" } );

map.addLayer(p2);

var p3 = new OpenLayers.Layer.Text("My Points", { location:"txt/3.txt" } );

map.addLayer(p3);

上記に加えてマーカーを出力するソースを追加。

マーカーの置き方は色々あるようだが、このやり方がGoogleMapsには無いのと、設定と管理が楽そうで、個人的には気に入った。

今回マーカーを3つ設定しており、それぞれで設定ファイルを読み込んでいる。

こちらは1.txtのサンプル


lat	lon	title	description	icon	iconSize	iconOffset
35.685	139.758	赤いマーカー	説明文	http://maps.google.co.jp/mapfiles/ms/icons/red-dot.png	32,32	0,0

1 2	lat lon title description icon iconSize iconOffset 35.685 139.758 赤いマーカー説明文 http://maps.google.co.jp/mapfiles/ms/icons/red-dot.png 32,32 0,0