2021年12月31日 / 最終更新日時 : 2025年2月23日 とれいる OpenLayers ★【OpenLayers 6】マップを回転させない方法 はじめに OpenLayers はデフォルトで、スマホやタブレットであればピンチで回転、パソコンであれば、Shift+Alt+ドラッグで回転できます。しかし、回転できてしまうと操作性が落ちてしまう場合もあるので、今回は […]
2021年12月31日 / 最終更新日時 : 2025年2月24日 とれいる OpenLayers ★【OpenLayers 6】マーカーにクリックイベントを付加する はじめに マーカーは表示するだけではなくクリックイベントやポップアップイベントなどを追加すると利便性が向上します。今回は、マーカーにクリックイベントを付加して、マーカーをクリックすると別ページへとジャンプするように設定 […]
2021年12月30日 / 最終更新日時 : 2025年2月24日 とれいる OpenLayers ★【OpenLayers 6】ズームレベルに応じてマーカーの表示/非表示を切り替える はじめに マーカーをマップ上に増やしていくと、広域表示でごちゃごちゃするので、ズームレベルに応じてマーカーを非表示にしたくなる場合があります。今回は、ズームレベルでマーカーの表示/非表示を切り替える方法について説明した […]
2021年12月28日 / 最終更新日時 : 2025年2月23日 とれいる OpenLayers ★【OpenLayers 6】マップ上にラインを描画する はじめに GPS ロガーで記録したデータを地図上で表示する等、OpenLayers を使ってラインを描画したくなる場合が有ります。ここでは、KML や GPX の読み込み機能は使わないで、配列で渡した経緯度を用いてライ […]
2021年12月27日 / 最終更新日時 : 2025年2月23日 とれいる OpenLayers ★【OpenLayers 6】マップ上にマーカーを配置する はじめに サイトやブログで相手に場所を伝えるとき、記事内にマップを埋め込むと効果的ですが、そういった場合にはマーカーを配置すると分かりやすいです。そこで今回は、OpenLayers 6 でマーカーを配置する方法について […]
2021年12月26日 / 最終更新日時 : 2025年2月24日 とれいる OpenLayers ★【OpenLayers 6】マップタイルを切り替える はじめに マップタイルには、Google Maps のような有料の物だけでなく、OpenStreetMap や国が公開しているデータなど様々なオープンデータも存在します。今回は OpenLayers 6 で、それらのマ […]
2021年12月25日 / 最終更新日時 : 2025年2月23日 とれいる OpenLayers ★【OpenLayers 8】埋め込み地図を表示させる方法 はじめに OpenLayers とは、ブラウザでマップデータを表示する、JavaScript のオープンソースライブラリです。Web サイト上にマップをカスタマイズして埋め込む場合、Google Maps だと料金体系 […]
2020年7月14日 / 最終更新日時 : 2025年2月22日 とれいる Leaflet ★【Leaflet】Font Awesome でマーカーを描画する はじめに CSS を使ったアイコンの中でも、Font Awesome というウェブフォントは、数千個ものアイコンが登録してあり、特に有名なウェブフォントになります。今回はそんな Font Awesome を使って、 L […]
2020年6月30日 / 最終更新日時 : 2025年2月22日 とれいる Leaflet ★【Leaflet】 CSS でマーカーを描画する はじめに Leaflet ではデフォルトでマーカーの画像が登録されていますが、CSS を使って描画をすることも可能です。そこで今回は、CSS を使ったマーカーの描画方法についてまとめたいと思います。 DrawTrail […]
2020年6月24日 / 最終更新日時 : 2025年2月22日 とれいる Leaflet ★【Leaflet】 マップ上にマーカーを配置する はじめに サイトやブログで相手に場所を伝えるとき、記事内にマップを埋め込むと効果的ですが、そういった場合にはマーカーを配置すると分かりやすいです。そこで今回は、Leaflet でマーカーを配置する方法についてまとめたい […]
