2023年9月24日 / 最終更新日時 : 2023年9月24日 とれいる Leaflet 【Leaflet】マップにスケールバーを追加する はじめに Leflet で描画したマップをサイトに掲載するとき、スケールバーが有ったほうが見やすくなることが有ります。そこで今回は、Leaflet でスケールバーを追加する方法について紹介したいと思います。 スケールバ […]
2022年1月10日 / 最終更新日時 : 2022年1月10日 とれいる Leaflet 【Leaflet】マップを固定する方法 はじめに マップを画像のようにサイトへと埋め込みたい場合、スクロールやズームするとかえって扱いづらくなってしまうことがあります。そこで今回は Leaflet を使った埋め込みマップについて、完全に固定する方法について説 […]
2020年7月14日 / 最終更新日時 : 2021年1月31日 とれいる Leaflet 【Leaflet】Font Awesome でマーカーを描画する はじめに CSS を使ったアイコンの中でも、Font Awesome というウェブフォントは、数千個ものアイコンが登録してあり、特に有名なウェブフォントになります。今回はそんな Font Awesome を使って、 L […]
2020年6月30日 / 最終更新日時 : 2021年1月31日 とれいる Leaflet 【Leaflet】 CSS でマーカーを描画する はじめに Leaflet ではデフォルトでマーカーの画像が登録されていますが、CSS を使って描画をすることも可能です。そこで今回は、CSS を使ったマーカーの描画方法についてまとめたいと思います。 DrawTrail […]
2020年6月24日 / 最終更新日時 : 2021年1月31日 とれいる Leaflet 【Leaflet】 マップ上にマーカーを配置する はじめに サイトやブログで相手に場所を伝えるとき、記事内にマップを埋め込むと効果的ですが、そういった場合にはマーカーを配置すると分かりやすいです。そこで今回は、Leaflet でマーカーを配置する方法についてまとめたい […]
2020年6月23日 / 最終更新日時 : 2021年1月31日 とれいる Leaflet 【Leaflet】 マップの初期設定をする はじめに Leaflet の初期設定をしていないと、マーカーが地球一周で消えたり、南極や北極の外側の領域まで表示されたりすることがあります。そこで今回は、Leaflet の初期設定（ maxBounds など）について […]
2020年6月22日 / 最終更新日時 : 2021年1月31日 とれいる Leaflet 【Leaflet】 複数のマップタイルを切り替える はじめに OpenStreetMap や Stamen Design, 国が公開しているデータなど、マップには様々なオープンデータが存在します。今回はそれらマップタイルを切り替える方法のうち、 ①コントロールを追加して […]
2020年6月16日 / 最終更新日時 : 2021年2月27日 とれいる Leaflet 【Leaflet】マップ上にバブルチャートを描画する はじめに バブルチャートとは、円の大きさによってデータの大きさを表すグラフのことです。マップとの親和性も高くて、どこに、何が、どれくらいあるのかを視覚化することができます。 今回はそんなバブルチャートを、Leafle […]
2020年6月14日 / 最終更新日時 : 2020年6月25日 とれいる Leaflet 【Leaflet】マップ中心の位置をリセットする Leaflet ではマップの中心座標を map.getCenter() で取得できますが、マップの横幅を変更した場合など、そもそもマップの中心が要素の中心にいなくなるときがあります。 そんなときは次の一文を挿入すると […]
2020年6月13日 / 最終更新日時 : 2023年10月1日 とれいる Leaflet 【Leaflet】埋め込み地図を表示させる方法 はじめに Web サイトに地図をカスタマイズして埋め込む場合、Google Maps だと料金体系や著作権が問題となってきます。ここで、Google Maps の代わりとなるのが Leaflet です。Leaflet […]
