2023年10月15日 / 最終更新日時 : 2023年10月15日 とれいる MapLibre 【MapLibre】複数のテキストを記載する 上の図のように、マップ内に複数のテキストを配置する場合(タイル自体に文字があってすいません…)、一旦 GeoJSON で定義してあげて、map.addSource で ソースとして追加し、addLayer […]
2023年10月13日 / 最終更新日時 : 2023年10月13日 とれいる MapLibre 【MapLibre】マップにマーカーを追加する MapLibre でマップにマーカーを追加するだけなら、下記の1行を追加するだけで大丈夫です。 マーカーの色も簡単に変えられます。便利ですね。 ポップアップを追加するには、別途ポップアップを定義して、マーカーにセッ […]
2023年10月11日 / 最終更新日時 : 2023年10月11日 とれいる MapLibre 【MapLibre】ズームコントロール/コンパス/スケールを表示 上の図のように、マップの右上にズームコントロール/コンパスを追加するには、以下のように記述します(ナビゲーションコントロールを追加します)。なお、コンパスをクリックすると、北が上の表示に戻ります。 左下にスケールバー […]
2023年10月10日 / 最終更新日時 : 2023年10月17日 とれいる MapLibre 【MapLibre】埋め込み地図を表示する方法 Contents1 はじめに2 MapLibre の導入方法3 ラスタタイルを使用する はじめに MapLibre とは、ブラウザでマップデータを表示する、TypeScript (Microsoft が公開した Jav […]
2023年10月7日 / 最終更新日時 : 2023年10月13日 とれいる Uncategorized 当サイト開設のいきさつ 今回は当サイトを開設した経緯について書いてみたいと思います。 このサイトでは、Leaflet (サイトへの埋め込み地図を作るための JavaScript ライブラリ)の プログラム自動生成フォーム を作ったり、And […]
2023年10月7日 / 最終更新日時 : 2023年10月15日 とれいる About Online Map GPX 地図をサイト/ブログに埋め込む方法 Contents1 はじめに2 Leaflet を使った方法3 Google My Maps を使った方法4 DrawTrail を使った方法 はじめに サイクリングや登山をすると、GPS ログをとることがしばしありま […]
2023年10月7日 / 最終更新日時 : 2023年10月7日 とれいる About Online Map 【Google My Maps】GPX 地図をサイト/ブログに埋め込む Contents1 はじめに2 GPX を読み込む3 自分のサイトに埋め込む はじめに サイクリングや登山をすると、GPS ログをとることがしばしありますが、そういったときに GPS ログは GPX (GPS eXch […]
2023年10月7日 / 最終更新日時 : 2023年10月8日 とれいる Leaflet 【Leaflet】GPX を地図に埋め込む Contents1 はじめに2 leaflet-gpx3 実装例 はじめに サイクリングや登山をすると、GPS ログをとることがしばしありますが、そういったときに GPS ログは GPX (GPS eXchange f […]
2023年10月1日 / 最終更新日時 : 2023年10月4日 とれいる About Online Map 【Android】 GPS ログをサイト/ブログに埋め込む Contents1 はじめに2 アプリのダウンロード3 GPS ログを取得、出力する4 CSV から HTML/JS を生成する5 スマホから DrawTrail を開く6 まとめ はじめに 登山や旅行、サイクリングの […]
2023年9月24日 / 最終更新日時 : 2023年9月24日 とれいる Leaflet 【Leaflet】マップにスケールバーを追加する Contents1 はじめに2 スケールバーを追加する方法3 実装例 はじめに Leflet で描画したマップをサイトに掲載するとき、スケールバーが有ったほうが見やすくなることが有ります。そこで今回は、Leaflet […]