山手線を徒歩で一周する人のための記録アプリ「YamaNotes」をリリースしました - すずかのプログラミング勉強記
はじめに 山手線を徒歩で一周する人のための記録アプリ「YamaNotes」をリリースしました。 この記事では「YamaNotes」の使い方や、開発過程で苦労したことなどをまとめます。 6/14追記：東京の気温が高くなることが予想されています。熱中症予防のため、涼しくなってからの挑戦をおすすめします。 サービスURL www.yamanotes.com リポジトリ github.com はじめに 自己紹介 アプリの概要 山手線徒歩一周チャレンジとは？ 使い方 ログインする 初期設定をする 進捗を確認する 到着する 履歴を確認する 開発に至る経緯 技術スタック 技術選定の理由 短期間で必要な機能を作るため、Rails7とHotwireで実装 コストを抑えて作るため、APIやデプロイ先を調査 地図の表示と描画にLeaflet + OpenStreetMapを使用 Render.com + Sup
Webブラウザで地図を表示させる JavaScript のライブラリとして Leaflet がよく使われる。 Leaflet ではブラウザに地図タイルを表示し、移動・拡大・縮小といった基本的な動作を行うとともに、マーカー・画像等を地図と連携して表示させることが可能。あちこちの商用サイトでも使用されているのを見かける。 Leaflet は単なる JavaScript のライブラリなので、これを React で扱うときは、その間を上手いことバインディングしてくれる React Leaflet を使うのが便利。 そこで本記事では、React Leaflet を TypeScript で扱いつつ、国土地理院が公開している地理院タイルを表示するまでの手順を解説する。 （というか、これをやる方法を軽く検索したけど良いサンプルが見付からず、試行錯誤して動くものを作ったので、その経緯をメモとして残しておく
JavaScriptのおすすめライブラリ＆フレームワーク40選
JavaScriptのおすすめライブラリ＆フレームワーク40選 JavaScriptのライブラリやフレームワークを使うことで、幅広い特徴と機能により、ウェブサイトやアプリケーションの開発が容易になります。これを可能にしているのが、JavaScriptの動的で柔軟であるという特性でしょう。2020年に実施されたStackOverflowの調査によると、JavaScriptは回答者の67.7%が使用しており、最もよく使われているプログラミング言語として記録を更新（8年目）しています。 その汎用性の高さから、バックエンドとフロントエンド両方の開発やテストに利用できます。その結果、さまざまな目的に対応する数多くのJavaScriptライブラリやフレームワークを見つけることができます。それゆえに、プロジェクトでどれを利用すべきかと迷ってしまうこともあるでしょう。 しかし、心配はご無用です。今回の記事
【実践】PythonとOpenStreetMapで学ぶ経路システム開発入門 - uepon日々の備忘録
前回はGoogle Map APIを使用して開発を行いましたが、今回はOpenStreetMapを使用した似たようなことにチャレンジしてみようと思います。Pythonを使ってOpenStreetMapの経路検索URLを生成する方法ことを目的とします。 参考 uepon.hatenadiary.com オープンストリートマップ（OpenStreetMap）とは？ オープンストリートマップ（英語: OpenStreetMap、OSM）は、自由に利用でき、なおかつ編集機能のある世界地図を作るオープンコラボレーションプロジェクトである。GPS機能を持った携帯機器、空中写真、衛星画像、他の地理情報システムからのデータをもとに作られていくのが基本だが、編集ツール上で道1本から手入力での追加も可能である。与えられた画像とベクトルデータセットはオープンデータベースライセンス（ODbL）1.0のもと再利用可
Pythonの地図可視化ライブラリfoliumでインタラクティブな地図を作成してみる | DevelopersIO
はじめに データアナリティクス事業本部のkobayashiです。 Pythonでデータ分析を行っていると、位置情報や地理データを地図上に可視化したいケースがあるかと思います。matplotlibやplotlyでも地図の描画は可能ですが、インタラクティブな操作（ズーム、ドラッグ、クリックでの情報表示）を手軽に実現したい場合には少し手間がかかります。 今回は、PythonからインタラクティブなWebベースの地図を簡単に作成できるライブラリfoliumを試してみたのでその内容をまとめます。 python-visualization/folium: Make beautiful maps with Leaflet.js & Python Folium — Folium documentation foliumとは foliumは、Pythonのデータ処理能力とJavaScriptの地図ライブラリで
JAXA Earth API for JavaScript Version 2.0.0 のAPIドキュメントです。 このAPIを利用すると、地球観測データを容易にブラウザ上に表示したり、地球観測データを利用したウェブアプリを開発したりすることが可能です。 必要な範囲のデータを必要な解像度で取り扱う仕組みになっているため、ブラウザ上で動作するJavaScriptであってもデータを取り扱うことが可能となっていることが特徴です。 Version 2系よりブラウザのメインスレッドのみならず、ブラウザのウェブワーカーや、 Node.js、 Deno、 Bun での実行にも対応しました。TypeScriptによる開発も可能となりました。 そのため、Version 1系に比べて仕様が大きく変更となっております。 クイックスタート 何ができる？ ほんの数行のプログラミングで地球観測データにアクセスできます
Leafletを使った凄い地図たち。天気図、地質図、ハザードマップ、名字マップ、3D鉄道運行情報。 - 晴歩雨描
地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 ネット上で「Leaflet」に関する情報を検索する中で、Leafletを使ったすごい地図をいくつか見つけた。 【天気情報をオーバーレイ：OpenWeatherMap】 →→→ Interactive weather maps - OpenWeatherMap 以下は、デモ用サイトなので、いつまで使えるか不明。 →→→ OpenWeatherMap for Leaflet 【月待ビンゴ 攻略マップ】 何だかよく分からないが良くできている →→→ 月待ビンゴ 攻略マップ 地質図の表示もできる。 【地質図：地質情報配信サービス】 →→→ Simple WMS on Leaflet 【洪水ハザードマップ 全国版】 →→→ 洪水ハザードマップ 全国版 【土砂災害ハザードマップ 全国版】 →→→ 土砂災
最近は地図関係のアプリを開発してて、ライブラリも多く実装したものを定期的にメモに残しておこうと思う 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
地理座標系での距離や面積を計算するときに見る資料
極半径 b = a(1 - f) 平均半径 r = (2a - b)/3 Openlayers WGS84 or GRS80の平均半径 Leaflet WGS84 or GRS80の平均半径 Tufr.js WGS84 or GRS80 地球を球体として扱う 公式が使えて計算が楽。 半径には平均半径を使う。 距離 球体上の最短距離である大円距離(大圏距離)を求める。 英語で調べるときはgreat circleやgeodesic lineあたりでググる。 公式はwikipediaにある通り。 ライブラリはだいたいこの公式を採用している。 Openlayers Leaflet Turf.js 面積 指定した座標が囲む球体の表面の面積を求める。 球上の面積を求めるリュイリエの公式(l’Huiller’s formula)は複雑でやってられないから簡易式を使おう、というNASAの論文のアルゴリズム
地理情報・PostGISことはじめ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? フューチャー Advent Calendar 2020 17日目です。 昨日は @alfe_below さんによる「package.json dependencies メンテの仕方 最短ルート」でした。 はじめに 地理情報を扱うアプリケーションを開発するにあたって、基礎知識として頭に入れておいたほうが良さそうなことと、PostGISの簡単な使い方をまとめてみました。 Google Maps JavaScript APIやLeaflet.jsなど、フロントエンドのライブラリの使い方については触れていません。また、測量に関する細かい話も書い
はじめに Leafletなど、地図を表示するJavaScriptライブラリを用いると簡単に表示できますが、仕組みを理解するためあえて自力で計算してタイルを表示します。 探してみると、計算方法は見つかるのですが、数学が苦手な僕にはちょっと難しい・・・ので、できるだけ分かりやすい式で作りました。 最後に計算結果の確認をするため、富士山山頂の座標(35.36072, 138.72743)をもとに、タイル画像を表示してみます。 参考ページ Zenn:メルカトルとは何かを計算式から見る Qiita:メルカトル図法 wikipedia:メルカトル図法 国土地理院タイルの特徴 タイルはメルカトル図法 地図画像は縦横256pixcelの正方形 ズームレベル0は全世界を1枚(256×256)で表示する 緯度85度まで(256pxに収まる範囲。発散してしまうので) 左上を原点とする座標系(西経180度北緯85
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog こんにちは、LINEのIT支援室で社内システムの開発と運用をしている岩月です。この記事はLINE Advent Calendar 2017の6日目の記事です。 人員の増加に対応するために、今年の4月、LINEはJR新宿ミライナタワーに移転しました。移転に伴い、IT支援室ではいくつかの新しい社内システムを導入しましたが、今日はその1つである「座席表」についてお話させていただきます。 開発のきっかけ 移転前、座席の管理は以下のようにExcelで行われていました（名前は消しています）。 ◯◯さんの座席を調べたいと思ったら、Excelもしくは変換されたPDFをダウンロードして、ビューアーの検索機能で名前を調べる必要がありました。恐らく
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React Leaflet + TypeScriptで地図（地理院タイル）を表示する
JAXA Earth API for JavaScript
OpenStreetMap + React Leaflet で地図を表示したメモ - かもメモ
Leaflet地図：「RainViewer」の雨雲レーダーを重ねて表示。サンプルソース。 - 晴歩雨描
緯度、経度をもとに国土地理院タイルを表示する方法(ライブラリ未使用) - Qiita
Excel管理の座席表をLeafletでWeb化した話