OpenStreetMapを使ってみた
GoogleMapsが1日あたり 25,000 件を超えると有償になるということで
大規模サイトの場合は他のサービスを使う場合がある。
https://developers.google.com/maps/faq?hl=ja#usage_pricing
今回使用したのが
http://osm.jp/
まずはJSを読み込む
|
1 | <script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script> |
CSSなどは特になく、これだけを読みこめばOK
地図を表示する
|
1 | <div id="map" style="height: 500px; width: 100%;"></div> |
このあたりはGoogleMapsと同じ。
|
1 2 3 4 5 6 7 8 9 10 | 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を実行する。
すると地図が表示される。
マーカーを設置する
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | 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のサンプル
|
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 |
TSV形式になっており、
緯度、経度、タイトル、内容、アイコンパス、アイコンサイズ、アイコン位置
となっている。
欠点としては、パラメータで吹き出しのサイズ指定ができないようなので、jsで調整しなければならないということ。
構造としては、
.olPopup : width=210px,hight=210px
div : width,height指定なし
.olPopupContent : width=200px,hight=200px
h2 : タイトル
p : 内容
という順番になっている。
Author Profile
SHARE
