コンテンツへスキップ ナビゲーションに移動

DrawTrail

  • 当サイトについて
  • DrawTrail の使い方
  • Leaflet/OpenLayers/osmdroid
    • オンラインマップについて
    • Leaflet
    • OpenLayers
    • osmdroid

Leaflet

  1. HOME
  2. Leaflet/OpenLayers/osmdroid
  3. 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日 / 最終更新日時 : 2021年1月31日 とれいる Leaflet

【Leaflet】埋め込み地図を表示させる方法

はじめに  Web サイトに地図をカスタマイズして埋め込む場合、Google Maps だと料金体系や著作権が問題となってきます。ここで、Google Maps の代わりとなるのが Leaflet です。Leaflet […]

自己紹介


 

とれいる

 専門はハードウェア開発だけど、趣味でWeb系の言語も勉強中。if/for/while 文以外も使えるようにしたい。

カテゴリー

  • Concept
  • How to use
  • Leaflet/OpenLayers/osmdroid
    • About Online Map
    • Leaflet
    • OpenLayers
    • osmdroid

Copyright © DrawTrail All Rights Reserved.

Powered by WordPress & Lightning Theme by Vektor,Inc. technology.

MENU
  • 当サイトについて
  • DrawTrail の使い方
  • Leaflet/OpenLayers/osmdroid
    • オンラインマップについて
    • Leaflet
    • OpenLayers
    • osmdroid