タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
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 【洪水ハザードマップ 全国版】 →→→ 洪水ハザードマップ 全国版 【土砂災害ハザードマップ 全国版】 →→→ 土砂災
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
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 -
地図に円を描く (Leaflet版)
を押してください。 描画モード 地図上をクリックするとマーカーが出現。 マーカーをクリックすると、 その地点を中心とした円を指定した色と半径と塗りで描画。 ABCマーカーの右下（南東）に文字を表示。 消去モード クリックするとマーカーや円を消去。 [URL取得]で表示されるURLで直リンできます。[Go!]で新しいウィンドウで開きます。 ラベルは吹き出しではなくマーカーの右下に表示します。適宜移動を。 KMLについて google maps api版に引き続き、KMLデータによる出力に対応してみました。表示される内容を保存してGoogle マップの マイマップにインポートしてみたりどうぞ。出力されるのは、円とマーカーでラベルは対象外です。 円は、多角形で近似した「なんちゃって円」です。計算はL.circleを使わずに円を描くを、技術的な話は、Google Maps API V2時代の地図に
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：山行記録リス
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZM
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
Leaflet 1系を使用してマーカのポップアップを外部からオープンします。 注意：「Leaflet勉強のための試作プログラムなので間違っている可能性があります」「DokuWikiは個別にヘッダを編集できないので通常とは少し違う構造になっています」 <div id="mapid" style="width: 100%; height: 400px;"></div> <!-- 外部からポップアップを開くためのリンク --> <p> <a href="#mapid" onclick="popupOn(0);">【東京都】</a> <a href="#mapid" onclick="popupOn(1);">【千葉県】</a> <a href="#mapid" onclick="popupOn(2);">【埼玉県】</a> </p> <script src="https://【自分のサーバーアド
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
let circle = L.circle( [Number(latlng[0]), Number(latlng[1])], 20, { className : `point-${latlng[0]}-${latlng[1]} input-nothing` } ); circle.on( 'click', circleClicked // クリック時の動作、モーダルウィンドウを開く ); circle.addTo(map); leaflet-modal 由来の注意点 leaflet-modal では、以下で列挙することに注意する必要があります。 モーダルウィンドウを閉じる処理の記述 モーダルウィンドウを閉じるときの保存処理 モーダルウィンドウを閉じる処理 点をクリックしてモーダルウィンドウを開く時の処理に関しては、 L.Map.openmodal() で定義することが可能です。しかし、 モ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React Leaflet + TypeScriptで地図（地理院タイル）を表示する
React-leafletの使い方メモ - Qiita
OpenStreetMap + React Leaflet で地図を表示したメモ - かもメモ
ヤマレコの軌跡をLeafletで表示する - Qiita
leaflet.jsで地図に円を描画 - Qiita
Leaflet地図：「RainViewer」の雨雲レーダーを重ねて表示。サンプルソース。 - 晴歩雨描
Leaflet 外部からポップアップを開く [あちあち情報局]
Excel管理の座席表をLeafletでWeb化した話
Leafletの使い方応用編|オープンソースWeb地図ライブラリ|谷謙二研究室
Leaflet でモーダルウィンドウを呼び出す時の注意 - Qiita
pleasantbreeze.hatenablog.com
saleem.hatenablog.com
hkmn.jp
hkmn.jp
hkmn.jp
www.nikkei.com