2020年7月17日 / 最終更新日時 : 2023年1月14日 とれいる About Online Map レンタルサーバーでマップタイルを管理する はじめに 皆で地図を編集して、誰もが利用できる地図を作るプロジェクト「OpenStreetMap (OSM)」。基本的にはマップタイルを自由に利用することができますが、サーバー資源は有限なので、過度なアクセスをするとブ […]
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月29日 / 最終更新日時 : 2023年10月2日 とれいる About Online Map サイト/ブログへマップを埋め込む方法 はじめに Google Maps を始めとして、オンラインのマップサービスは沢山存在します。今回は特にサイトやブログにマップを埋め込む方法について、プログラミング不要なものに限定して、それらのサービスをまとめたいと思い […]
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日 / 最終更新日時 : 2023年10月6日 とれいる Leaflet 【Leaflet】マップ中心の位置をリセットする Leaflet ではマップの中心座標を map.getCenter() で取得できますが、マップの横幅を変更した場合など、そもそもマップの中心が要素の中心にいなくなるときがあります。 そんなときは次の一文を挿入すると […]
2020年6月13日 / 最終更新日時 : 2023年10月14日 とれいる Leaflet 【Leaflet】埋め込み地図を表示させる方法 はじめに Web サイトに地図をカスタマイズして埋め込む場合、Google Maps だと料金体系や著作権が問題となってきます。ここで、Google Maps の代わりとなるのが Leaflet です。Leaflet […]
