2023年10月15日 / 最終更新日時 : 2025年2月22日 とれいる MapLibre ★【MapLibre】複数のテキストを記載する 上の図のように、マップ内に複数のテキストを配置する場合（タイル自体に文字があってすいません…）、一旦 GeoJSON で定義してあげて、map.addSource で ソースとして追加し、addLayer […]
2023年10月13日 / 最終更新日時 : 2025年2月22日 とれいる MapLibre ★【MapLibre】マップにマーカーを追加する MapLibre でマップにマーカーを追加するだけなら、下記の１行を追加するだけで大丈夫です。 マーカーの色も簡単に変えられます。便利ですね。 ポップアップを追加するには、別途ポップアップを定義して、マーカーにセッ […]
2023年10月11日 / 最終更新日時 : 2025年2月22日 とれいる MapLibre ★【MapLibre】ズームコントロール/コンパス/スケールを表示 上の図のように、マップの右上にズームコントロール/コンパスを追加するには、以下のように記述します（ナビゲーションコントロールを追加します）。なお、コンパスをクリックすると、北が上の表示に戻ります。 左下にスケールバー […]
2023年10月10日 / 最終更新日時 : 2025年2月22日 とれいる MapLibre ★【MapLibre】埋め込み地図を表示する方法 はじめに MapLibre とは、ブラウザでマップデータを表示する、TypeScript （Microsoft が公開した JavaScript の派生言語）のオープンソースライブラリです。もともとは Mapbox が […]
2023年10月7日 / 最終更新日時 : 2025年2月23日 とれいる Leaflet ★【Leaflet】GPX を地図に埋め込む はじめに サイクリングや登山をすると、GPS ログをとることがしばしありますが、そういったときに GPS ログは GPX （GPS eXchange format：XMLの一種）という形式で保存されることも多いです。例 […]
2023年9月24日 / 最終更新日時 : 2025年2月22日 とれいる Leaflet ★【Leaflet】マップにスケールバーを追加する はじめに Leflet で描画したマップをサイトに掲載するとき、スケールバーが有ったほうが見やすくなることが有ります。そこで今回は、Leaflet でスケールバーを追加する方法について紹介したいと思います。 スケールバ […]
2022年1月16日 / 最終更新日時 : 2025年2月23日 とれいる OpenLayers ★【OpenLayers 6】マップを固定する方法 はじめに マップを画像のようにサイトへと埋め込みたい場合、スクロールやズームが動作してしまうとかえって扱いづらくなってしまうことがあります。そこで今回は OpenLayers を使った埋め込みマップについて、完全に固定 […]
2022年1月10日 / 最終更新日時 : 2025年2月23日 とれいる OpenLayers ★【OpenLayers 6】最大/最小ズームを設定する はじめに マップの使用用途によっては、最大/最小ズームを設定して、ズームレベルを制限したい場合があります。そこで今回は、最大/最小ズームを設定する方法について説明したいと思います。 最大/最小ズームを設定する方法 マ […]
2022年1月10日 / 最終更新日時 : 2025年2月22日 とれいる Leaflet ★【Leaflet】マップを固定する方法 はじめに マップを画像のようにサイトへと埋め込みたい場合、スクロールやズームするとかえって扱いづらくなってしまうことがあります。そこで今回は Leaflet を使った埋め込みマップについて、完全に固定する方法について説 […]
2022年1月2日 / 最終更新日時 : 2025年2月22日 とれいる About Online Map ★【Leaflet/OpenLayers】Gesture Handling 機能を実装する はじめに Gesture Handling とは、マップをスマートフォンで閲覧する際に２本指でしかスクロールできないようにしたり、PCで閲覧する際にCtrlキーを押さないとズームできないようにする機能の事です。今回は、 […]
