タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
Webブラウザで地図を表示させる JavaScript のライブラリとして Leaflet がよく使われる。 Leaflet ではブラウザに地図タイルを表示し、移動・拡大・縮小といった基本的な動作を行うとともに、マーカー・画像等を地図と連携して表示させることが可能。あちこちの商用サイトでも使用されているのを見かける。 Leaflet は単なる JavaScript のライブラリなので、これを React で扱うときは、その間を上手いことバインディングしてくれる React Leaflet を使うのが便利。 そこで本記事では、React Leaflet を TypeScript で扱いつつ、国土地理院が公開している地理院タイルを表示するまでの手順を解説する。 （というか、これをやる方法を軽く検索したけど良いサンプルが見付からず、試行錯誤して動くものを作ったので、その経緯をメモとして残しておく
Next.jsプロジェクトでReact Leafletを使って地図を表示してみた | DevelopersIO
こんにちは！DA(データアナリティクス)事業本部 サービスソリューション部の大高です。 最近Next.jsを触っているのですが、ふと「地図も表示してみたいな」と思ったので試してみることにしました。 地図表示が出来るライブラリとしては様々なライブラリがあると思いますが、React Leafletというライブラリが利用できそうなので今回はこちらを利用して試してみたいと思います。 React Leafletについて 有名なオープンソースの地図表示ライブラリとしてLeafletというライブラリがあります。 このライブラリはJavaScriptライブラリとなっており、Reactプロジェクトでもこのライブラリを直接読み込んで利用することもできるかと思います。一方でReact向けのReact Leafletというラッパーライブラリが存在します。 こちらのReact Leafletを利用するとReactプ
Leafletを使った凄い地図たち。天気図、地質図、ハザードマップ、名字マップ、3D鉄道運行情報。 - 晴歩雨描
地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 ネット上で「Leaflet」に関する情報を検索する中で、Leafletを使ったすごい地図をいくつか見つけた。 【天気情報をオーバーレイ：OpenWeatherMap】 →→→ Interactive weather maps - OpenWeatherMap 以下は、デモ用サイトなので、いつまで使えるか不明。 →→→ OpenWeatherMap for Leaflet 【月待ビンゴ 攻略マップ】 何だかよく分からないが良くできている →→→ 月待ビンゴ 攻略マップ 地質図の表示もできる。 【地質図：地質情報配信サービス】 →→→ Simple WMS on Leaflet 【洪水ハザードマップ 全国版】 →→→ 洪水ハザードマップ 全国版 【土砂災害ハザードマップ 全国版】 →→→ 土砂災
Leaflet地図 リスト by 晴歩雨描
ブログ：Leaflet地図、作成記事「まとめ」 Step1：OpenStreetMap。地図にマーカー表示（東京タワー） [ブログ] Step2：OpenStreetMap。ラベル表示（東京タワー） [ブログ] Step3：国土地理院地図、Esri World Topo Map 切り替え（東京タワー） [ブログ] Step4：Googleマップ 追加（東京タワー） [ブログ] Step5：緯度・経度、標高を表示（富士山） [ブログ] Step6：現在地表示ボタン（東京タワー） [ブログ] Step7：フルスクリーン表示。Leaflet.fullscreen版。 [ブログ] Step8：フルスクリーン表示。requestFullscreen()版。 [ブログ] GPX表示(1) [ブログ] GPX表示(2)（移動距離、所要時間表示） [ブログ] GPX表示(3)（＋標高グラフ：Highcha
最近は地図関係のアプリを開発してて、ライブラリも多く実装したものを定期的にメモに残しておこうと思う Google Map の API が高額でいろいろなレイヤーを重ね合わせるのが少し面倒そうだったので、OpenStreetMap を使う方法を探索した React Leflet (Leaflet) Deck.gl MapLibre GL JS (fork of Mapbox GL JS) react-openlayers OpenSteetMap を使えるライブラリはかなりたくさんあり色々試したが、本記事では React Leaflet でシンプルな地図を表示させたメモです 環境 React 18.2.0 leaflet 1.9.4 react-leaflet: 4.2.1 React Leaflet を使う準備 $ npm i react-leaflet leaflet $ npm i -
Vue3 + vue-leaflet + Flask + Db2 Warehouse on Cloudで地図連携Webアプリを作成してDockerで動かす - Qiita
超長いタイトルですが、タイトル通り、地図を表示するフロントエンドはVue3 + vue-leafletで作成し、SQLAlchemyでDb2 Warehouse on CloudにアクセスするバックエンドとwebサーバーをFlaskで作成し、Dockerfileでコンテナ化できるようにしたものをgithubで公開したので、githubのソースからどうやってローカルで動かすか、コンテナ化するかの説明になります。 FlaskでDb2アクセスするモジュールをコンテナ化したい、とかいう時の参考にもなると思います(需要は不明ですが)。 図にすると以下のような感じです： ソースの説明はここではしませんが、 地図表示は 「Vue3 + vue-leaflet で地図表示」 Db2アクセスは 「Flask + SQLAlchemyでコネクションプールを使ってDb2に接続 & SQL実行(ORMなし)」 で
ヤマレコは、山登りのための記録や情報交換ができるサービスです。 スマホにインストールすると、工程を計画できたり、軌跡を記録できたり、途中の写真を保持してくれるので、いい感じです。 さらに、ヤマレコはWebAPIを提供してくれているので、自分で好きなように整理できそうです。 今回は、自分か特定ユーザが登ってきたすべての軌跡を地図上に一度に表示してみます。そうすることで、どのあたりを多く登ってきたのかがわかります。 地図の表示には、Leafletを使います。また、地図上の軌跡の表示には、緯度経度の情報であるGPXファイルを使います。ヤマレコは、このGPXファイルを出力していただいているので都合がよかったです。 ソースコードもろもろは以下に置きました。 使用するWebAPI WebAPIは、以下に説明があります。 今回使うのは、以下の2つです。（認証不要です） getReclist：山行記録リス
はじめに こんにちは、開発部の一筒です！ Leaflet.jsに触れる機会があったので簡単にご紹介したいと思います。 様々な機能がありますが今回はマーカー(ピン)の様々な表示方法について書きます。 Leafletとは JavaScriptで書かれたオープンソースの地図描画ライブラリです。 地図をWebページに統合するために使用され、オープンソースで、使いやすいAPIを提供しています。 地図上にマーカー、ポップアップ、ポリライン、ポリゴンなどを描画し、ユーザーとの対話を可能にする機能を提供します。 まず地図を用意 Leafletを使用する前に地図を表示させます。地図にはOpenStreetMapを利用しました。 OpenStreetMapとは フリーかつオープンソースの地図データベースです。 このデータベースは、世界中の道路、建物、公園、レストランなどの地理的な情報を含んでいます。 データは
Leafletで地図に画像を重ねる
重ねて表示 表示結果 コード <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Leafletで地図に画像を重ねる|U-知能デバイス研究所</title> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" /> <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script> <script> function init() { // 画像の設定 var image_url = "img/i083.jpg"; var bounds = L.latLngBounds( [36.980, 136.59], [36.645, 137.31],
地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 今回、「RainViewer」の雨雲レーダーを地図に重ねて表示するようにした。 参考になるWebページ。 【サンプル １】 直近の雨雲を重ねて表示。 →→→ https://ok2nd.github.io/leaflet/me-rainviewer1.html ＜プログラムソース抜粋＞ ちょっと無理やりなロジックになっている。$.ajaxを使うためにjQueryを使用。 <script src="//code.jquery.com/jquery-3.5.1.js"></script> <script> function getRainViewer(address) { var result = $.ajax({ type: 'GET', url: 'https://tilecache.rai
Leaflet + OpenStreetMapで、地図にマーカー＆ラベル表示。サンプルソース。 - 晴歩雨描
地図情報を扱うサービス「Google Maps API」が無料では使えなくなり、「Yahoo! JavaScriptマップAPI」もサービス提供が終了し、以前「Mapbox GL JS」を試してみた。 今回、「Leaflet」と「OpenStreetMap」を使って、地図にマーカー表示を試してみた。 「Leaflet」は、地図データを扱うためのJavaScript ライブラリ。「OpenStreetMap」は、OpenStreatMap財団が「Open Data Commons Open Database License (ODbL)」 の下にライセンスするオープンデータ。いずれも無料でかつAPIキーの取得なしに利用できる。以下のサイトを参考にした。 試したところ、マーカー表示だけなら非常に簡単にできる。 【ステップ０：基本】 LeafletのCSSとJSライブラリを読み込む <link
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog こんにちは、LINEのIT支援室で社内システムの開発と運用をしている岩月です。この記事はLINE Advent Calendar 2017の6日目の記事です。 人員の増加に対応するために、今年の4月、LINEはJR新宿ミライナタワーに移転しました。移転に伴い、IT支援室ではいくつかの新しい社内システムを導入しましたが、今日はその1つである「座席表」についてお話させていただきます。 開発のきっかけ 移転前、座席の管理は以下のようにExcelで行われていました（名前は消しています）。 ◯◯さんの座席を調べたいと思ったら、Excelもしくは変換されたPDFをダウンロードして、ビューアーの検索機能で名前を調べる必要がありました。恐らく
Step 12.タイルレイヤの重ね合わせ タイルレイヤはオーバーレイにも設定できる その際、ベースレイヤが見えるよう、透過度を指定するとよい タイルレイヤにより最大ズームレベルが異なる場合は、maxNativeZoomを設定すると拡大して表示される <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Step12.タイルレイヤの重ね合わせ|Lefletの応用|埼玉大学谷謙二研究室</title> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.0/dist/leaflet.css" /> <script src="https://unpkg.com/leaflet@1.3.0/dist/leaflet.js"></script> <script> fun
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React Leaflet + TypeScriptで地図（地理院タイル）を表示する
OpenStreetMap + React Leaflet で地図を表示したメモ - かもメモ
ヤマレコの軌跡をLeafletで表示する - Qiita
Leafletで様々なマーカーを表示させる - Qiita
Leaflet地図：「RainViewer」の雨雲レーダーを重ねて表示。サンプルソース。 - 晴歩雨描
Excel管理の座席表をLeafletでWeb化した話
Leafletの使い方応用編|オープンソースWeb地図ライブラリ|谷謙二研究室
iwashikoboneahiru.hatenablog.com
share.google
bakusai.com
leetcode.com
chemical-candy.seesaa.net
geoarchitect.hatenablog.com