タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
Webブラウザで地図を表示させる JavaScript のライブラリとして Leaflet がよく使われる。 Leaflet ではブラウザに地図タイルを表示し、移動・拡大・縮小といった基本的な動作を行うとともに、マーカー・画像等を地図と連携して表示させることが可能。あちこちの商用サイトでも使用されているのを見かける。 Leaflet は単なる JavaScript のライブラリなので、これを React で扱うときは、その間を上手いことバインディングしてくれる React Leaflet を使うのが便利。 そこで本記事では、React Leaflet を TypeScript で扱いつつ、国土地理院が公開している地理院タイルを表示するまでの手順を解説する。 （というか、これをやる方法を軽く検索したけど良いサンプルが見付からず、試行錯誤して動くものを作ったので、その経緯をメモとして残しておく
「道路を方角ごとに塗り分けると、その街のでき方がわかる :: デイリーポータルZ」 を Leaflet と地理院地図Vectorで - Qiita
「道路を方角ごとに塗り分けると、その街のでき方がわかる :: デイリーポータルZ」 を Leaflet と地理院地図VectorでleafletGISfoss4g はじめに 道路を方角ごとに塗り分けると、その街のでき方がわかる :: デイリーポータルZ という素敵な記事があります。 これを Leaflet と 地理院地図 Vector を使って実装してみましょう。 できあがり このように動作するものができあがりました。日本全国閲覧可能です。道路の密度が高い地域は表示が重くなるのでご注意を。 ワーキングデモは上の画像をクリックするか、こちらの URL からどうぞ。 ソースコードは gist においています。LICENSE は MIT を設定しているので適宜ご利用ください。 解説 100行に満たない html/js なのでとりあえず全部貼っておきますね。 <!DOCTYPE html> <ht
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.js leafletの使い方を学びながら、座席表を作ります。 はじめに GW前に会社の座席表の更新作業がありました。80人くらいです（はぁ）。 更新作業は、いつもどおりExcelに座席Noが入っていて、名前、社員番号を入れていくスタイル。座席Noはレイアウト図（製図みたいなもの）に書いてあって、画像を見ながら人を当てていくという苦行でした。 この作業は二度とやりたくないなと思いましたので、GWを使って座席表の仕組みを作ってみることにしました。 ゴール 座席表を作ります。 すでに所有しているオフィスの図面（画像）を使います。新しく製図をするとか、特別なソフトウェアにデータを移しなおすのはやりません。 座席にマウスを当てると、誰が座っているのか情報を出します。人を検索できるようにします。検索したらその人の座席が分かるようにします 使ったもの ライブラリ系 Leafle
Leafletを使って北海道のマンホールカードの配布先一覧地図をつくってみました。俯瞰的に配布先を確認することができ、配布先への経路も簡単に調べることができます。 LeafletのTooltip（ツールチップ）の使い方についてまとめました。Tooltipの表示位置の変更（offset）や表示する方向の変更方法について記載しています。
Leafletを使った凄い地図たち。天気図、地質図、ハザードマップ、名字マップ、3D鉄道運行情報。 - 晴歩雨描
地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 ネット上で「Leaflet」に関する情報を検索する中で、Leafletを使ったすごい地図をいくつか見つけた。 【天気情報をオーバーレイ：OpenWeatherMap】 →→→ Interactive weather maps - OpenWeatherMap 以下は、デモ用サイトなので、いつまで使えるか不明。 →→→ OpenWeatherMap for Leaflet 【月待ビンゴ 攻略マップ】 何だかよく分からないが良くできている →→→ 月待ビンゴ 攻略マップ 地質図の表示もできる。 【地質図：地質情報配信サービス】 →→→ Simple WMS on Leaflet 【洪水ハザードマップ 全国版】 →→→ 洪水ハザードマップ 全国版 【土砂災害ハザードマップ 全国版】 →→→ 土砂災
Revolutionize GIS Data Management with Leaflet-GeomanExperience the most advanced geospatial data mangement with Leaflet-Geoman for effortless creation and editing of geospatial data. Directly on the map.
OpenStreetMapを使用する上で、Leafletがとても扱いやすかったため、 簡単に使い方をまとめておきます。 Leafletとは https://leafletjs.com/ Web地図のJavaScriptライブラリです。 簡単にWeb地図を表示することができます。 公式ドキュメントが丁寧で読み易いです。 地図を表示する 日本を中心にした地図を表示します。 <!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>地図表示</title> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> <script src="http://cdn.leafletjs.com/leaflet-0
今昔マップ on the web:時系列地形図閲覧サイト|埼玉大学教育学部 谷謙二（人文地理学研究室）|Leaflet版
> tweet 時系列地形図閲覧サイト「今昔マップ on the web」 トップへ 埼玉大学教育学部 谷 謙二（人文地理学研究室） 使用上の注意 使用データ デスクトップ版
Next.jsプロジェクトでReact Leafletを使って地図を表示してみた | DevelopersIO
こんにちは！DA(データアナリティクス)事業本部 サービスソリューション部の大高です。 最近Next.jsを触っているのですが、ふと「地図も表示してみたいな」と思ったので試してみることにしました。 地図表示が出来るライブラリとしては様々なライブラリがあると思いますが、React Leafletというライブラリが利用できそうなので今回はこちらを利用して試してみたいと思います。 React Leafletについて 有名なオープンソースの地図表示ライブラリとしてLeafletというライブラリがあります。 このライブラリはJavaScriptライブラリとなっており、Reactプロジェクトでもこのライブラリを直接読み込んで利用することもできるかと思います。一方でReact向けのReact Leafletというラッパーライブラリが存在します。 こちらのReact Leafletを利用するとReactプ
const position = [51.505, -0.09] render( <MapContainer center={position} zoom={13} scrollWheelZoom={false}> <TileLayer attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /> <Marker position={position}> <Popup> A pretty CSS3 popup. <br /> Easily customizable. </Popup> </Marker> </MapContainer
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
今昔マップ on the web:時系列地形図閲覧サイト|埼玉大学教育学部 谷謙二（人文地理学研究室）|Leaflet版
> 時系列地形図閲覧サイト「今昔マップ on the web」 トップへ 埼玉大学教育学部 谷 謙二（人文地理学研究室） 使用上の注意 使用データ デスクトップ版
Vue3 + vue-leaflet + Flask + Db2 Warehouse on Cloudで地図連携Webアプリを作成してDockerで動かす - Qiita
Vue3 + vue-leaflet + Flask + Db2 Warehouse on Cloudで地図連携Webアプリを作成してDockerで動かすFlaskdb2DockerVue.jsdb2warehouse_on_cloud 超長いタイトルですが、タイトル通り、地図を表示するフロントエンドはVue3 + vue-leafletで作成し、SQLAlchemyでDb2 Warehouse on CloudにアクセスするバックエンドとwebサーバーをFlaskで作成し、Dockerfileでコンテナ化できるようにしたものをgithubで公開したので、githubのソースからどうやってローカルで動かすか、コンテナ化するかの説明になります。 FlaskでDb2アクセスするモジュールをコンテナ化したい、とかいう時の参考にもなると思います(需要は不明ですが)。 図にすると以下のような感じです
ヤマレコは、山登りのための記録や情報交換ができるサービスです。 スマホにインストールすると、工程を計画できたり、軌跡を記録できたり、途中の写真を保持してくれるので、いい感じです。 さらに、ヤマレコは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で色々な地図を表示する 地図を表示するために使われているオープンソース・ソフトウェア・ライブラリのひとつである『Leaflet.js』を使用してオープンストリートマップや他の地図を表示する方法を記載します。 使用する地図によっては、使用条件等がありますので、それぞれの利用規約を参照するようにして下さい。 なお、以下のプログラムは Windows 10 において次のブラウザで動作を確認しました。 ・ Internet Explorer 11 / Ver. 11.379.17763.0 ・ Microsoft Edge / Ver. 11.0.17763.379 ・ Firefox / Ver. 65.0.2 (64ビット) ・ Google Chrome / Ver. 73.0.3683.86 (64ビット) ・ Safari / Ver. 5.1.7 (7534.57
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. プロジェクトの作成
モチベーション Leaflet.jsは使い勝手がシンプルで、D3やPixiJSなどと組み合わせてオリジナルのレイヤーを拡張することが割と自由にできて気に入っています。 ただ、１点、マウスホイールでのズームが段階ズームであることが気に入らなかったので、無段階化するプラグインもどきを作ってみました。 （leaflet.jsはデフォルトでズームのステップを細かくすることはできるのですが、ホイールを回した量に応じてズーム量を変えることができない） デモはこちら イメージ できたものはGitHubに上げております。 方法 実は作ったのはずいぶん前なので細かい部分までは覚えていないのですが、leafletはピンチイン/アウトでのズームにも対応しており、こちらは無段階ズームです。 なので、マウスホイールイベントをトリガーとして、ピンチイン/アウトしたときの処理内容を移植したプラグインを作ればよいのではな
ウェブブラウザ上で、Leaflet を使用して、モーダルウィンドウを出そうとした時に少しハマった点があったので、その解決策を記載します。ちなみに、Leaflet とは Google Maps や 地理院地図 などの地図サービスを JavaScript から操作するためのライブラリです。 前提と実装環境 前提 今回の実装の前提は以下の通りになります。 Leaflet で設定した L.circle （以下、点）をクリックするとモーダルウィンドウが現れる モーダルウィンドウ内には入力欄があり、モーダルウィンドウを閉じると情報を保存する 再度、点をクリックすると保存された情報が表示される ハマったときに実装していた環境 実装していたときの環境は、 以下の通りです。ウェブブラウザのクライアントサイドでも、 Node.js 由来の箇所以外は同様だと思われます。 言語 TypeScript 1.6 モー
地図タイルの試作 地図タイルの仕組み L.TileLayer で地図でない画像を扱う練習をするにあたり、できれば本物の地図でないタイルのサンプルセットが欲しかったんですが、そういうものをすぐ拾える心当たりがなかったので自分でタイルを作ってみました。 Leaflet は Google Maps モデルの地図タイル をそのまま使えるので 256×256 ピクセルのタイルをズームレベル0からズームレベルが1つあがるたびに縦横が2倍に拡大されるようにデータを作成します（実際には大きい画像から縮小しますけどね）。今回は 1024×1024 ピクセルの画像を用意してズームレベル0～2のタイルを作成しました。 こうして作ったタイルを L.TileLayer で読み込むには最初の引数で指定する URL がタイルのファイル配置と一致している必要があります。 L.tileLayer('tiles/{z}/{x
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で地図（地理院タイル）を表示する
Leafletを使ってオンラインでインタラクティブな座席表を作る - Qiita
Leaflet入門 | Leafletの使い方の記事一覧 | kitanote | kitanote
Geoman - GeoJSON Editor, Leaflet-Plugins and more tools for your teams
LeafletでOpenStreetMapを表示してみる - Qiita
React Leaflet | React Leaflet
ヤマレコの軌跡をLeafletで表示する - Qiita
leaflet.jsで地図に円を描画 - Qiita
OpenStreetMap + React Leaflet で地図を表示したメモ - かもメモ
Leaflet地図：「RainViewer」の雨雲レーダーを重ねて表示。サンプルソース。 - 晴歩雨描
Leafletで色々な地図を表示する（１／６） - Qiita
React-leafletの使い方メモ - Qiita
Leaflet.jsのマウスホイールZoomを、Googlemap的な無段階ズームにする - Qiita
Leaflet でモーダルウィンドウを呼び出す時の注意 - Qiita
Leaflet で地図以外の画像を扱う #2 L.TileLayer
Leafletの使い方応用編|オープンソースWeb地図ライブラリ|谷謙二研究室
GitHub - mapbox/leaflet-image: leaflet maps to images
Leaflet 外部からポップアップを開く [あちあち情報局]
etutorend.com
news.yahoo.co.jp
bbs.animanch.com
cancam.jp
shop.tsukumo.co.jp
haretokidokiyuki.com