Leaflet.jsは、これまでで最もシンプルなマップライブラリです。

グーグルマップは確かに最も人気があります 埋め込みマップウィジェット Webデザイナーのための。しかし、どうですか カスタム機能を追加する ツールチップやピンマーカーなど?

これは素晴らしいライブラリが好きなところです Leaflet.js トンを助けます.

これは 完全無料のオープンソースプロジェクト 当初はMapboxでVladimir Agafonkinという名前の人物によって作成されました。それ以来、リーフレットは含まれるように成長しました 何十人もの貢献者 世界中で.

頻繁に バグ修正と新機能で更新 それはあらゆるウェブサイトの全面的な実施を改善する。その純粋な力とデザインの美しさから、これは私のお気に入りのマッピングライブラリです。.

それは私がおそらくそれらすべてをリストすることができなかったほど多くの機能を持っています、しかしここにあります 最も面白いもの：

• モバイルハードウェアアクセラレーション
• ピンマーカー、シェイプオーバーレイ、およびツールチップ
• カスタムズーム＆パンアニメーション
• JSの依存関係はありません
• IE7を含むすべての主要ブラウザのサポート+

あなたがする必要があるので実装は少しトリッキーです。 座標を入力 そして 地図の大きさを定義する.

ユーザーはいつでもできる ズームアウトする そして 振り回す, そのため、見方は常に変わる可能性があります。しかしそれはまたに基づいています マップの定義方法 ページ上.

巨大があります ドキュメントページ Leafletのあらゆる面に関する情報が満載。残念なことに、それはとても密度が高いので私はただそれに飛び込むことはお勧めできません。おそらく迷子になるでしょう。代わりに、 リーフレットチュートリアルページ これも含まれています クイックスタートガイド 初心者向け.

あなたは方法を学ぶでしょう 地図を埋め込む、サイズ/位置を変更する, そしてどのように 上にカスタムグラフィックを追加する, 円やピンマーカーなど.

この1つのイントロガイドはできます 必要なものすべてを教える ブログ、会社のWebサイト、または今後開催されるプロジェクトでLeafletを使用する.

Googleマップを使用する理由はたくさんあります。それは強力で信頼でき、そして無料です。しかし、リーフレットは付属しています 箱から出してたくさんのより多くの機能 そしてあなたがする必要があるだけです あなたのWebページにCSS / JSファイルを追加する 始めるために。あなたも見つけることができます オンラインでホストされているコピー CDNルートを利用したい場合.

ドキュメントがあなたを怖がらせないでください。学ぶことはたくさんありますが すべての機能が必要というわけではありません 基本的なLeafletセットアップ用.

そしてそれはそれほどかかりません 最初から素晴らしい地図を作成する. 作成されたこのCodepenデモを覗いてみましょう Leaflet.jsとGoogle Maps APIを使用する.