Awesome Frontend Gis

Frontend Gisを扱う資料や関連プロジェクトをまとめたAwesomeリストです。

目次

• 👨‍💻 JavaScriptライブラリ
  • 地図描画
  • データ処理
  • LiDAR
  • リモートセンシング
• 💾 データソース
  • ダウンロード
  • ウェブAPI
  • コレクション
• 📒 Notebook
  • 初級
  • 中級
  • 上級
• :world_map: ウェブ地図
• 🌐 ウェブアプリ
• 🎨 配色の助言
• 📍 アイコン
• 📺 動画
• 📚 参考資料
• 🤝 コントリビューション

👨‍💻 JavaScriptライブラリ

地図描画

ウェブ地図を作成するためのライブラリです。

• antvis L7 - 大規模なWebGLを用いた地理空間データ可視化。
• ArcGIS Maps SDK for JavaScript - 現代的なJavaScript APIおよびウェブコンポーネントライブラリで、ブラウザ上でインタラクティブな2次元および3次元ウェブアプリケーションを構築します。
• ArcGIS REST JS - the ArcGIS REST API that run in Node.js and modern browsers. 向けのCompact, modular JavaScript wrappers。
• Bertin.js - visualizing geospatial data and making thematic maps for the web. 向けのA JavaScript library。
• Cesium.js - world-class 3D mapping of geospatial data. 向けのAn open-source JavaScript library。
• d3-geo - creating maps based on D3.js. 向けのA library。
• d3-geo-projection - 拡張された地理投影。
• d3-geo-voronoi - the sphere. 向けのVoronoi diagrams and Delaunay triangulation。
• datamaps - 1ファイルでカスタマイズ可能な地図可視化。
• Deck.GL - WebGL2を用いた地理空間可視化レイヤー。
• Eurostat-map - データ駆動型地図。
• globe.gl - 3D rendering. 向けのThis library is a convenience wrapper around the three-globe plugin, using ThreeJS/WebGL。
• Google Maps - Googleマップ用のJavaScript API。
• gridviz - visualizing gridded data. 向けのA package。
• HERE maps API - 機能豊かでカスタマイズ可能なHEREマップを使ってウェブアプリケーションを構築します。
• iTowns - visualizing 3D geospatial data. 向けのA Three.js-based framework written in JavaScript/WebGL。
• Leaflet - mobile-friendly interactive maps. 向けのThe leading open-source JavaScript library。
• Map Forecast API - Leaflet 1.4.xに基づく使いやすいライブラリ。風の地図を表示可能。
• Mapbox GL JS - ベクターテイルからインタラクティブな地図をWebGLを使用してレンダリングするJavaScriptライブラリ。
• maplibre - 2020年12月にmapbox-gl-jsが非OSSライセンスに切り替えられた前には、オープンソースのフォークとして存在した。
• MapTalks.js - integrated 2D/3D maps. 向けのAn open-source JavaScript library。
• OpenLayers - creating interactive maps on the web. 向けのA high-performance, feature-packed library。
• react-simple-maps - React, built on top of d3-geo. 向けのAn SVG mapping component library。
• Tangram - creative cartography. 向けのWebGL map rendering engine。
• TerriaJS - building rich, web-based geospatial data explorers. 向けのA library。
• Wrld.js - Leafletをベースにしたアニメーション3D都市地図。

データ処理

地理空間データの分析・処理を支援するライブラリです。

• Arc.js - GeoJSONまたはWKT形式の線として、大円経路を計算する。
• awesome-GeoJSON - GeoJSONツールのカタログ。
• Euclid.ts - 2次元ユークリッド幾何学のクラス、ユーティリティ、および描画ツール。
• flatbush - 2D points and rectangles in JavaScript. 向けのA really fast static spatial index。
• FlatGeoBuf - geographic data based on flatbuffers. 向けのA performant binary encoding。
• flatten-js - 幾何学的形状の操作、交点の検出、包含関係の確認、距離の計算、変換などに使用。
• Galton - 軽量なNode.jsによる等時線サーバー。
• gdal3.js - レイザーおよびベクターデータをさまざまなフォーマットに変換。
• geoblaze - 高速なJavaScriptによるレイザー処理エンジン。
• geobuf - geographic data. 向けのA compact binary encoding。
• GeoTiff.js - visualization or analysis. 向けのParse TIFF files。
• geolib - 基本的な地理空間操作を提供するライブラリ。
• geopackage-js - GeoPackage JavaScriptライブラリはGeoPackageファイルの読み込みを可能にする。
• geoparquet - Apache Parquetに地理空間データをエンコードする。
• geotoolbox - use with geojson properties. 向けのProvides several GIS operations。
• geojson-merge - 複数のGeoJSONファイルを1つのFeatureCollectionにマージする。
• geojson-vt - slicing GeoJSON data. 向けのA highly efficient JavaScript library。
• Geometric.js - doing geometry. 向けのA JavaScript library。
• JSTS - JavaScriptトポロジーサイツ。
• koop - connecting incompatible spatial APIs. 向けのA JavaScript toolkit。
• math.gl - 地理空間および3D用途に特化したJavaScript数学ライブラリ。
• Proj4js - 座標系間の座標変換を行う。
• rbush - 2D spatial indexing. 向けのA high-performance JavaScript library。
• spl.js - JavaScriptでSpatiaLite機能を使用可能にする。
• statsbreaks - thematic mapping. 向けのSplit a quantitative dataset into classes。
• Turf.js - spatial analysis. 向けのA JavaScript library。
• topoJSON - use in D3 maps. 向けのConvert GeoJSON to TopoJSON。
• Wicket - moving between Well-Known Text (WKT) and various framework geometries. 向けのA modest library。

LiDAR

ウェブブラウザーで点群を可視化するツールです。

• Plasio - ブラウザ内でのドラッグ＆ドロップによるLAS/LAZポイントクラウド閲覧機能。
• Potree - large datasets. 向けのWebGL point cloud viewer。
• Potree & Cesium.js - レッツ、オーストリアLIDARビューイング
• Three.js - ポイントクラウドデータローダー。

リモートセンシング

フロントエンドでの地球観測・リモートセンシングに関するリソースです。

• EOSDIS Worldview - browsing global, full-resolution satellite imagery. 向けのInteractive interface。
• Google Earth Engine - 地理空間処理サービス。
• Sentinel Hub custom scripts - センチネル・ハブと併用可能なカスタムスクリプトのリポジトリ。
• sentinelhub-js - センチネル・ハブサービスを用いて衛星画像をダウンロードし、処理します。
• Spectral - the Google Earth Engine JavaScript API. 向けのAwesome Spectral Indices。

💾 データソース

地理空間オープンデータソースの一覧です。

ダウンロード

ダウンロード可能なデータです。

• ArcGIS Hub - 38万以上のオープンデータセット。
• Copernicus global DEM - グローバルな標高タイル。
• Copernicus open access hub - コペンヒクス衛星画像のダウンロード。
• ETOPO1 - 地球表面の1分間（アール）単位のグローバルリリーフモデル。
• European population grids - GISCO - グリッドセルごとの人口データ。
• European Postcodes Point Data - ヨーロッパ全域の郵便番号の位置情報。
• Geoboundaries - 世界最大のオープンかつ無料の政治境界データベース。
• Global Biodiversity Information Facility (GBIF) - 生物多様性データへのオープンアクセス。
• Global Climate Monitor - グローバルなオープン気候データ。
• Global power plant database - 火力発電所のオープンソースデータベース。
• Galileo - 地理空間データの発見および管理プラットフォーム。
• Healthcare Services in Europe - ヨーロッパにおける医療サービスの配置位置。
• HydroSHEDS - グローバルアプリケーション向けに一貫した水系データ。
• NASA Earth Data - Earthdata Searchで、ブラウザ上でNASAの地球観測データを検索・発見・可視化・精緻化・アクセスできます。
• Natural Earth - 無料のベクターマップおよびレイターマップデータ。
• OpenAerialMap - ライセンスされた画像をアクセスできるオープンサービス。
• OpenMapTiles - 無料のOpenStreetMapベクターテイル。
• OpenStreetMap - 無料で世界中をカバーする地理データセット
• Open Topography - 高解像度地形データとツール
• Ookla internet speed data - グローバルネットワークのパフォーマンスメトリクス。
• Sentinel Hub custom scripts - Sentinel Hub. 向けのRepository of custom scripts。
• USGS Earth Explorer - 衛星画像などの検索と注文
• World Atlas TopoJSON - ナチュラル・エアースのベクターデータをTopoJSON形式で提供。
• World Bank - グローバル開発データへの無料アクセス
• WorldPop - 開かれた空間人口統計データセット

ウェブAPI

地理空間データを動的に取得するRESTful APIです。

• Address API - ヨーロッパ全域の住所データ（地理コードと逆地理コード）
• API Geo - 公式フランス地理データAPI
• ArcGIS location services - ベースマップ、地理コード、場所情報、ルート計画、地理情報強化サービス
• bng2latlong - イギリスの国境グリッドを経度・緯度に変換
• breezometer - 空気質、天気、花粉、環境データ
• Country State City API - 都市・州・国データベース
• Geoapify - 地図、地理コード、ルート計画などの地理サービス
• geonames - 住所名の検索と逆地理コードのサポート
• Geocode.xyz - 逆地理コード、前向き地理コード、地理解析API
• GISCO data distribution API - 欧州委員会が提供する行政区域と境界データソース
• GraphHopper Route Optimization API - さまざまな車両ルート問題の解決
• movebank-api - animal tracking data. 向けのPlatform。
• OpenAQ - 最大規模のオープンソース空気質データプラットフォーム
• Open Charge Map API - 電動車充電所の公開登録情報
• OpenCage - オープンデータを用いた前向きおよび逆向き地理コードAPI
• Open-Meteo - 世界規模の天気予報API
• Open Notify - ISSの位置と宇宙にいる人の数
• Open Postcode Geo API - イギリスの郵便番号と地理データ
• OpenSky API - リアルタイムの空域情報を取得。
• openrouteservice - 方向、等時線、地理コーディングサービス
• OpenStreetMap - Overpass APIを介してOpenStreetMapデータを取得
• opentopodata API - Open Topography Data API
• Overpass API - OpenStreetMapデータを取得
• RainViewer - 無料の天気レーダーおよび衛星データAPI
• REST countries - RESTフルAPIを介して国情報を取得
• Sunrise and sunset - 特定地点の日出日没時刻を提供
• TomTom - 地理コーディング、ルーティング、交通情報など
• USGS earthquake data - さまざまなパラメータで地震データを検索
• ZipCheckup API - US ZIP-level environmental safety data: water quality, air quality, PFAS, radon, lead, flood risk. 向けのFree REST API。
• what3words - 3語の住所を座標に変換
• PostalCodes - グローバル郵便番号検索、国別輸出データ、住所検証データ

コレクション

オープンな地理空間データセットのコレクションとリポジトリです。

• awesome-public-datasets - カテゴリが多様なオープンデータを豊富に収録した素晴らしいリポジトリ。
• Free GIS data - 500以上の自由に利用可能な地理データセットを提供するサイトへのリンク
• Public APIs - use in software and web development. 向けのA collective list of free APIs。
• WRI - 世界資源研究所
• David Rumsey map collection - 歴史的な地図アーカイブ

📒 Notebook

実装を支援するJavaScript Notebookです。

初級

• Hello, Leaflet - ObservableHQ
• Hello, Bertin.js - ニコラス・ラムベルト
• Hello, Mapbox GL - Mike Bostock
• Hello, eurostat-map.js - ジョー・デイビス
• Hello, gridviz - ニコラス・ラムベルト

中級

• World Tour - D3
• Choropleth - D3
• How to make a nice scalebar - Julien Gaffuri。
• #GISCHAT Twitter Users with MapBoxGL - Globe Projection - クリス・マルク
• Hexgrid maps with d3-hexgrid - ラルスバース
• Bivariate Choropleth with Continuous Color Scales - ステファニー・ツェルク
• Visualizing Eurostat grid data using Three.js & D3 - ジョー・デイビス

上級

• Try to impeach this? Challenge accepted! - カリム・ドゥイエブ
• Bars and pubs in Paris - ニコラス・ラムベルト
• Brussels Street Gender Inequality - カリム・ドゥイエブ
• Animating voting maps with regl - ベンジャミン・スコルト
• Election maps as dorling striped circles - Julien Gaffuri。
• GeoParquet on the web - ケイル・バロン
• Interactive Regl wind demo - ダニエル・カオ
• Dorling cartogram of the Spanish Presidential election - アドリアン・ブランコ
• Visualizing earthquakes with Three.js - ジョー・デイビス
• GeoArrow and GeoParquet in deck.gl - ケイル・バロン

:world_map: ウェブ地図

興味深いウェブ地図の一覧です。

• Map of notable people - トピ・ツイカノフ
• Submarine cable map - テレジオグラフィ
• Radio Garden - 3D Globe ラジオチューナー
• Map of every building in the United States - ニューヨーク・タイムズ
• Map of the Roman transport network - スタンフォード地理空間ネットワークモデルによるローマ世界
• WebGL Wind - 地理・統計・歴史・環境情報を可視化するウェブ地図です。 参照: https://img.shields.io/github/stars/mapbox/webgl-wind?style=social
• Statistical Atlas - ユーロステートの統計を示す葉書型アトラス
• ShadeMap - 世界中のすべての山、建物、木の影を、いつでもどこでもシミュレーション
• ClimateArchive - 時間と空間を軸にした気候モデルデータのインタラクティブな可視化
• Old Maps Online - 歴史的な場所を閲覧し、タイムラインで古い地図を検索
• chronotrains - 8時間で電車で行ける場所はどこ？
• Castlemap - 世界の7,044の偉大な城、要塞、宮殿を1夜で1マップにまとめた、ウィキデータから構築
• Europe Beach Map - ヨーロッパのすべての著名なビーチを1マップにまとめ、それぞれの海水温、砂、最適シーズンを表示
• Detourmap - 滝、洞窟、火山、孤独な海岸、そして人々が遺した遺跡、墓、幽霊町、船の沈没地を1世界マップにまとめた、ウィキデータから構築
• Planetary Atlas - NASA、USGS、ESA、JAXAのオープンデータから構築された14の世界のズーム可能なマップ、IAUの命名法と69の表面探査着陸地点を含む
• FilmMap - 映画やテレビが実際に撮影された場所：161か国で15,272の撮影場所、それぞれウィキデータの記述に紐づけた
• Forest Fires Map - 森林火災のインタラクティブウェブマップ

🌐 ウェブアプリ

すぐに利用できる地理空間ウェブアプリです。

• city roads - 任意の都市内のすべての道路を一度に描画。
• Datawrapper - チャート、マップ、テーブルを作成
• Fantasy Map Generator - creating and editing fantasy maps. 向けのFree web application。
• GeoLibre - visualizing, exploring, and analyzing geospatial data across desktop and web environments, with a responsive layout for mobile screens. 向けのA lightweight, cloud-native GIS platform。
• geotiff.io - 簡単なラスタープロセスへの即時アクセスを提供
• IMAGE - テーママップを生成するツール
• Kepler - 大規模データセットに対する強力なオープンソース地理空間分析ツール
• magrit - テーママップ用のオンラインアプリケーション
• mapshaper - マップデータのオンライン編集ツール
• MapOnShirt - マップからカラフルなデザインを作成し、それらを製品に変換します。
• Maputnik - Mapbox GL styles. 向けのFree and open visual editor。
• mapus - collaboratively exploring and annotating maps. 向けのTool。
• Peak Map - 地図上の任意の領域の標高を埋め込みチャートで可視化。
• Plasio - ブラウザ内でのドラッグ＆ドロップによるLAS/LAZポイントクラウド表示ツール。
• StoryMap JS - ESRIのStory Mapアプリケーションへのオープンソース代替品。
• TopoExport - オープンソースデータセットを使用して2Dの等高線と3Dの地形をエクスポートします。
• uMap - OpenStreetMapのレイヤーを使って地図を作成し、あなたのサイトに埋め込む。
• bboxFinder - マップからbbox値を検索するためのヘルプページ。
• geojson.io - 空間データを作成・閲覧・共有するための簡単で迅速なツール。
• GeoJSONLint - GeoJSONの検証と閲覧を行うためにこのサイトを使用します。
• Pharos AI - geopolitical conflict tracking with interactive DeckGL/MapLibre geospatial visualization. (Source Code) 向けのOpen-source real-time intelligence dashboard。
• Pumperly - MapLibre GL JS、PostGIS、Valhallaルート計画、Photon地名検索を用いたオープンソースの燃料価格比較およびEV充電ルート計画ツール。
• gpx studio - GPX編集用のオンラインツール。

🎨 配色の助言

データ可視化と地図製作では配色が重要です。地図に適した色を選ぶためのツールを紹介します。

• CartoColor - color use on maps. 向けのA set of custom color palettes built on top of standards。
• Chroma.js Color Palette Helper - mastering multi-hued, multi-stop color scales. 向けのChroma.js-powered tool。
• ColorBrewer - ドクター・シザン・ブルワーより導かれた地図のカラーリングアドバイス。
• Dicopal.js - JavaScript. 向けのDiscrete color palettes。
• Textures.js - creating SVG patterns, designed for data visualization. 向けのJavaScript library。
• viz-palette - JavaScript内で色を調整・コピー・ペーストするための最適化されたツール。

📍 アイコン

GISウェブサイトへ追加できるアイコンです。

• font-GIS - GIS地図やウェブサイトで使えるアイコン素材・生成ツールです。 参照: https://img.shields.io/github/stars/Viglino/font-gis?style=social
• Map Icons Collection - あなたのマップ上のPOI（ポイント・オブ・インタレスト）として使用できる、1000以上の無料かつカスタマイズ可能なアイコンセット。
• Material Symbols - 1つのフォントファイルに収録された2,990以上のグリフで、デザインバリエーションが豊富。
• Geoapify map marker playground - Marker Icon APIは、美しいアイコンを作成し、マップマーカーとして使用できます。

📺 動画

ウェブマッピングに関する講演・チュートリアル動画です。

• Mapping Geolocation with Leaflet.js - Working with Data and APIs in JavaScript - The Coding Train。
• 10 Maps, and the Tech and Stories Behind Them - Maarten Lambrechts。
• Intermediate Three.js Tutorial - Create a Globe with Custom Shaders - Chris Courses。
• Statistical Cartography - Design principles for statistical map design - Julien Gaffuri。

📚 参考資料

• Fundamentals of Data Visualization - Claus O. Wilke。
• A Workbook for Interactive Cartography and Visualization on the Open Web - 地図製作・データ可視化・地理空間ネットワークの参考資料です。 参照: https://img.shields.io/github/stars/uwcartlab/webmapping?style=social
• Thematic Mapping: 101 Inspiring Ways to Visualise Empirical Data - Kenneth Field。
• Color use guidelines for mapping and visualization - Cynthia A. Brewer。
• Geospatial Network Visualization - 地理空間ネットワークデータの可視化技術のコレクション。

🤝 コントリビューション

コントリビューションを歓迎します。ガイドラインに従ってください。

この一覧について質問がある場合は、X（旧Twitter）の @joewdavies へ連絡するか、GitHub Issueを作成してください。