OpenLayersでOpenStreetMapを利用する はじめの一歩
OpenStreetMap（略してOSM）がアツイ！という話を以前していて、その際はAndroidアプリにOSMおりましたが、今度はWebにOSMを埋め込んで利用してみたいと思います。
まず、超はじめの一歩で、Hello WorldならぬｍHello Map!で、地図をさくっと表示させてみたいと思います。
WebサイトにOSMを埋め込んで利用するには、下記にあるように、他の表示用のJsライブラリと連動させて表示する必要があります。
http://wiki.openstreetmap.org/wiki/Develop/Frameworks#Webmaps
一覧がありますが、最初は一番上のLeafletが軽いと自称しているのでいいかな、と思ってたんだよね。
しかし、LeafletはCloudMadeという会社が作っているようですが、CloudMadeのAPIキーを取得して、Leafletを利用する、というのがLeafletの最初のチュートリアルで書いてありますが、
http://leafletjs.com/examples/quick-start.html
CloudMadeのページでこのAPIキーの登録のページとか、見つからないんですよね。ちょっと詳しい情報を見ようとすると、連絡先を入力するように、ということになってしまいます。
なんとなく不安を覚える雲行きですし、本当にオープンなものを利用したい、というのが最近の私の方向性なので、OpenLayersを使ってみることにしました。
ということで、ほぼこのページのコピペではありますが、
http://wiki.openstreetmap.org/wiki/OpenLayers_Simple_Example
ちょっとした解説付きで載せておきます。
<!DOCTYPE HTML>
<html>
<head>
<title>OpenLayers Demo</title>
<style type="text/css">
html, body, #basicMap {
width: 100%;
height: 100%;
margin: 0;
}
</style>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script>
function init() {
map = new OpenLayers.Map("basicMap");
var mapnik = new OpenLayers.Layer.OSM();
var fromProjection = new OpenLayers.Projection("EPSG:4326"); // Transform from WGS 1984 測地系というやつです
var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection メルカトル図法…的なやつです
var position = new OpenLayers.LonLat(139.632314,35.45797).transform( fromProjection, toProjection); //中心座標 みなとみらいです。
var zoom = 15;
map.addLayer(mapnik);
map.setCenter(position, zoom );
}
</script>
</head>
<body onload="init();">
<div id="basicMap"></div>
</body>
</html>
これを実行すると、横浜のみなとみらいを中心とした、OpenStreetMapが表示されます。
- FONTが小さくて見えない；；携帯電話。。 — FONTER {2017-04-11 (火) 17:55:12}