leaflet

コピペだけで作る完全無料なWEB地図

完全に無料なWEB地図はありますでしょうか。

WEB地図と言えばGoogleMapが圧倒的なシェアと知名度があります。一昔はGoogleMap
は完全無料であったが、今はクレジット登録が必須となっています。
一応毎月200ドルの無料枠があるため、一般的なホームページは無料枠を使い切って課金されること
は少ないでしょう。

しかしアクセスの多いサイトではGoogleMapは運営コストになります。
GoogleMap以外にMapboxやYahoo!地図などありますがどれもユーザ登録やトークン発行が必要です。
そこで、ユーザ登録やトーコンなど一切不要で、簡単にWEB地図は作れないでしょう。
その解答は勿論あります。

完全に無料なWEB地図を作る方法

それはとても簡単です。

  1. 地図描画にはleafle.jsを使うこと。
  2. そして、ベースとなるタイル地図はOpenStreetMapまたは地理院タイルを使うことです。
  • leafle.jsについて

leafle.jsはオープンソフトの地図描画
用のjavascriptライブラリです。完全にフリーで使えます。

  • 地図タイルについて

地図タイルとは決まったルールで格子状に分割された地図画像の断片です。詳細は
地理院サイトで確認できます。
leafle.jsはそのルールをもとに、画像の断片をきれいに並べて一枚の地図のように表示します。

この地図タイルは膨大なデータになるため、個人サーバで用意するのは難しいです。
無料で使える選択肢としてOpenStreetMapと地理院タイルになります。

OpenStreetMapのライセンスについて、こちらです。

“© OpenStreetMap contributors”を表示し、本家リンクを貼れば、基本無料で使えます。

地理院のタイルも、「国土地理院」と出所を明示し、リンクを貼ることで自由に使える地図が沢山あります。
詳細はこちらです。

日本では地理院タイルのほうが表示速度が速いです。

コピペだけでWEB地図を作る

下記の地図を利用して、とても簡単に作れます。

  • 地図の下のラジオボタンより、ベースとなる地図を選びます。
  • 地図をズームや移動して表示範囲を決めます。
  • 地図の上のマーカーを移動して、目的地点を決めます。

その後「コードをコピーする」ボタンを押して、コードをにコピーします。

コピー下コードを自分のサイトやブログに貼り付けるだけで地図が作成されます。

取り合えず確認したい場合は、JSFiddleのHTMLの部分にコードを貼り付けて見てください。

　 　 　

地図をさらに変更するには

  • 地図のサイズを変更するにはコードの下記部分の数字を変更してください。
    自分のサイトのコード環境に合わせた変更が必要です。
1
<div id="sengine_map" style="width: 600px; height: 400px;"></div>
  • アイコンを変更したい場合はコードの中iconUrl、iconRetinaUrlの部分を自分のアイコンのURLに書き換えてください。
    iconSize、iconAnchorも自分のアイコンの大きさに合わせて変更してください。
1
2
3
4
5
6
7
icon: L.icon({
	iconUrl: "",
	iconRetinaUrl: "",
	shadowUrl: "",
	iconSize: [24,36],
	iconAnchor: [12,36]'
})
  • さらにいろいろやりたい場合はleaflet本家のドキュメントを参考に修正してください。

以上、コピペだけで作るWEB地図でした。