タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
Webブラウザで地図を表示させる JavaScript のライブラリとして Leaflet がよく使われる。 Leaflet ではブラウザに地図タイルを表示し、移動・拡大・縮小といった基本的な動作を行うとともに、マーカー・画像等を地図と連携して表示させることが可能。あちこちの商用サイトでも使用されているのを見かける。 Leaflet は単なる JavaScript のライブラリなので、これを React で扱うときは、その間を上手いことバインディングしてくれる React Leaflet を使うのが便利。 そこで本記事では、React Leaflet を TypeScript で扱いつつ、国土地理院が公開している地理院タイルを表示するまでの手順を解説する。 （というか、これをやる方法を軽く検索したけど良いサンプルが見付からず、試行錯誤して動くものを作ったので、その経緯をメモとして残しておく
「道路を方角ごとに塗り分けると、その街のでき方がわかる :: デイリーポータルZ」 を Leaflet と地理院地図Vectorで - Qiita
はじめに 道路を方角ごとに塗り分けると、その街のでき方がわかる :: デイリーポータルZ という素敵な記事があります。 これを Leaflet と 地理院地図 Vector を使って実装してみましょう。 できあがり このように動作するものができあがりました。日本全国閲覧可能です。道路の密度が高い地域は表示が重くなるのでご注意を。 ワーキングデモは上の画像をクリックするか、こちらの URL からどうぞ。 https://bl.ocks.org/frogcat/raw/509f70a5da0bd3189b832d3c987d3b88/ ソースコードは gist においています。LICENSE は MIT を設定しているので適宜ご利用ください。 https://gist.github.com/frogcat/509f70a5da0bd3189b832d3c987d3b88 解説 100行に満たな
Leaflet + OpenStreetMap で地図情報を扱うサンプルコード - Qiita
Leaflet とは Leafletは、地図データを扱うためのJavaScript ライブラリ。Google Maps PlatoformやYOLPのようなメソッドで、地図情報の操作ができる。 Leaflet のウェブサイト https://leafletjs.com/ Leafletのレポジトリ https://github.com/Leaflet/Leaflet Vladimir Agafonkinというエンジニアによって開発された。 著作権は、Vladimir および各コントリビュータに帰属しているが、BSDライセンスを採用しているため、著作権の表示と免責条項さえ明記しておけば、再利用も再配布も自由となる。 Leafletを使えば、すぐに地図が使えるか No、Leaflet自体は単なるJSライブラリで、地図データを持っていない。 Leaflet で地図を表示するためにはどうすれば良い
Leafletを使った凄い地図たち。天気図、地質図、ハザードマップ、名字マップ、3D鉄道運行情報。 - 晴歩雨描
地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 ネット上で「Leaflet」に関する情報を検索する中で、Leafletを使ったすごい地図をいくつか見つけた。 【天気情報をオーバーレイ：OpenWeatherMap】 →→→ Interactive weather maps - OpenWeatherMap 以下は、デモ用サイトなので、いつまで使えるか不明。 →→→ OpenWeatherMap for Leaflet 【月待ビンゴ 攻略マップ】 何だかよく分からないが良くできている →→→ 月待ビンゴ 攻略マップ 地質図の表示もできる。 【地質図：地質情報配信サービス】 →→→ Simple WMS on Leaflet 【洪水ハザードマップ 全国版】 →→→ 洪水ハザードマップ 全国版 【土砂災害ハザードマップ 全国版】 →→→ 土砂災
Next.jsプロジェクトでReact Leafletを使って地図を表示してみた | DevelopersIO
こんにちは！DA(データアナリティクス)事業本部 サービスソリューション部の大高です。 最近Next.jsを触っているのですが、ふと「地図も表示してみたいな」と思ったので試してみることにしました。 地図表示が出来るライブラリとしては様々なライブラリがあると思いますが、React Leafletというライブラリが利用できそうなので今回はこちらを利用して試してみたいと思います。 React Leafletについて 有名なオープンソースの地図表示ライブラリとしてLeafletというライブラリがあります。 このライブラリはJavaScriptライブラリとなっており、Reactプロジェクトでもこのライブラリを直接読み込んで利用することもできるかと思います。一方でReact向けのReact Leafletというラッパーライブラリが存在します。 こちらのReact Leafletを利用するとReactプ
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
React-leafletとは Open Source Mapを表示するJavaScriptライブラリであるleafletを、React.js上で使えるように拡張するライブラリです。 React Leaflet公式 https://react-leaflet.js.org/ 本記事は公式のチュートリアルを順番にやっていくだけですので詳しくは公式サイトを参照してください https://react-leaflet.js.org/docs/start-introduction 1. プロジェクトの作成
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で地図に画像を重ねる|艮電算術研究所</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], ); //
最近は地図関係のアプリを開発してて、ライブラリも多く実装したものを定期的にメモに残しておこうと思う 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 -
地図データを扱う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版)
を押してください。 描画モード 地図上をクリックするとマーカーが出現。 マーカーをクリックすると、 その地点を中心とした円を指定した色と半径と塗りで描画。 ABCマーカーの右下（南東）に文字を表示。 消去モード クリックするとマーカーや円を消去。 [URL取得]で表示されるURLで直リンできます。[Go!]で新しいウィンドウで開きます。 ラベルは吹き出しではなくマーカーの右下に表示します。適宜移動を。 KMLについて google maps api版に引き続き、KMLデータによる出力に対応してみました。表示される内容を保存してGoogle マップの マイマップにインポートしてみたりどうぞ。出力されるのは、円とマーカーでラベルは対象外です。 円は、多角形で近似した「なんちゃって円」です。計算はL.circleを使わずに円を描くを、技術的な話は、Google Maps API V2時代の地図に
ウェブブラウザ上で、Leaflet を使用して、モーダルウィンドウを出そうとした時に少しハマった点があったので、その解決策を記載します。ちなみに、Leaflet とは Google Maps や 地理院地図 などの地図サービスを JavaScript から操作するためのライブラリです。 前提と実装環境 前提 今回の実装の前提は以下の通りになります。 Leaflet で設定した L.circle （以下、点）をクリックするとモーダルウィンドウが現れる モーダルウィンドウ内には入力欄があり、モーダルウィンドウを閉じると情報を保存する 再度、点をクリックすると保存された情報が表示される ハマったときに実装していた環境 実装していたときの環境は、 以下の通りです。ウェブブラウザのクライアントサイドでも、 Node.js 由来の箇所以外は同様だと思われます。 言語 TypeScript 1.6 モー
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
Tile layer providers (OSM, MapBox, etc) must support CORS Any markers on the map must also support CORS. The default Leaflet-CDN markers don't, so they aren't supported. Your browser must support CORS and Canvas, so IE >= 10 with no exceptions. This library does not rasterize HTML because browsers cannot rasterize HTML. Therefore, L.divIcon and other HTML-based features of a map, like zoom control
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://【自分のサーバーアド
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React Leaflet + TypeScriptで地図（地理院タイル）を表示する
React-leafletの使い方メモ - Qiita
ヤマレコの軌跡をLeafletで表示する - Qiita
leaflet.jsで地図に円を描画 - Qiita
OpenStreetMap + React Leaflet で地図を表示したメモ - かもメモ
Leaflet地図：「RainViewer」の雨雲レーダーを重ねて表示。サンプルソース。 - 晴歩雨描
Leaflet でモーダルウィンドウを呼び出す時の注意 - Qiita
Leafletの使い方応用編|オープンソースWeb地図ライブラリ|谷謙二研究室
GitHub - mapbox/leaflet-image: leaflet maps to images
Leaflet 外部からポップアップを開く [あちあち情報局]
yume1.nk.awe.jp
courrier.jp
delishkitchen.tv
xn--y8jxam1sj83qk6dwy5i.com
kofukutrading.com
x.com