| OCテックノート - パート 201

一覧がありますが、最初は一番上の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}

OpenStreetMap]]を利用するアプリやシステムの開発依頼は[[こちら！

投稿者:

Office2007　印刷する

Office2007の使い方

Office2007終了時に再起動する

OpenLayers

OpenLayersとは

OpenLayers Mapのz-indexを変更する

OpenLayers Mapのz-indexを変更する

OpenLayersでOpenStreetMapを利用する

OpenLayersでOpenStreetMapを利用するはじめの一歩

Office2007の使い方

OpenLayersとは

OpenLayers Mapのz-indexを変更する

OpenLayersでOpenStreetMapを利用する はじめの一歩

OpenLayersでOpenStreetMapを利用するはじめの一歩