目次
メモ。
GoogleMapがクレジットカード決済の導入必須となり、受託制作においてWebサイトへのマップの導入は格段に敷居が高くなってしまった。
社としてもこの危機を乗り越えるために代替手段を模索した結果。Leafletjs を利用したマップ表示を代替手段として採用することに。
Leafletjsとは
leafletはWeb上で地図を表示するオープンソースのマップクライアントライブラリです。
by http://shimz.me/blog/leaflet-js/4142
軽量でスマートフォンなどのタッチ操作にも対応した地図を手軽に表示することができます。
ユーザーによって様々なプラグインが作成されているのが特徴で、それらを組み合わせることで多様な表現を行うことができるので「地図なんてGoogle Maps APIで十分じゃね?」という方も、一度触ってみてください。
マップタイルを自由に切り替えることが可能。マップ生成のラッパーライブラリ。
導入方法
めっちゃ簡単だった。
1. リソースの読み込み
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.css" /><script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.js"></script>
2. JavaScriptで動作させる
A. 基本導入
// マップの生成
var map = L.map('map').setView(
[30.3748331, 130.9574997],
14 // ズーム
);
// OpenStreetMapを利用するためのタイル設定
L.tileLayer(
'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
{ attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }
).addTo(map);
B. マーカー + ポップアップの作成
$_html = $('<div>hoge</div>')
L.marker(
[30.3748331, 130.9574997],
{ title: "マーカーのタイトル" }
).addTo(map).bindPopup($_html.html())
C. マーカーにフィット
var markers = [
L.marker(
[30.3748331, 130.9574997],
{ title: "マーカーのタイトル" }
),
L.marker(
[30.3748331, 130.9574997],
{ title: "マーカーのタイトル" }
),
L.marker(
[30.3748331, 130.9574997],
{ title: "マーカーのタイトル" }
),
];
var group = new L.featureGroup(markers);
map.fitBounds(group.getBounds());
D. マーカーのアイコンを変更
var greenIcon = L.icon({
iconUrl: 'leaf-green.png',
shadowUrl: 'leaf-shadow.png',
iconSize: [38, 95],
shadowSize: [50, 64],
iconAnchor: [22, 94],
shadowAnchor: [4, 62],
popupAnchor: [-3, -76]
});
L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map);
結論
問題なくGoogleMapの代替にできそう。ルート表示などは無理。
現在地を動作するためには別途SSL等の導入は必須のため注意する。

最新の投稿
- 2019.01.12未分類Google Mapの代替手段
- 2015.11.14Sketch 3Sketch Tips – オフセットを保持したまま複製
- 2015.10.31Sketch 3Sketch Tips – 簡単に表組みする方法
- 2015.10.25メモMac から Mac へ。移行した時の注意点メモ。