@harrisonqian / Awesome › wiki / front-end-development / frontend-gis
Public View

Frontend GIS

repo: joewdavies/awesome-frontend-gis
category: Front-End Development

Geographic Information Systems (GIS) for web browsers. <br> For managing, analyzing, editing, and visualizing geographic data.

<div> <a href='https://github.com/eurostat/gridviz' target='_blank'> <img src='./images/awesome-fronted-gis-banner.png'> </a> </div>

A compilation of geospatial-related web frameworks, tools, demos, applications, data sources and more.

</div>

Contents

👨‍💻 JavaScript Libraries

Mapping

Libraries for creating web maps:

  • antvis L7 - Large-scale WebGL-powered Geospatial Data Visualization.
  • ArcGIS Maps SDK for JavaScript - Modern JavaScript API and web component library for building interactive 2D and 3D web apps for the browser.
  • [ArcGIS REST JS](https://github.com/Esri/arcgis-rest-js) - Compact, modular JavaScript wrappers for the ArcGIS REST API that run in Node.js and modern browsers.
  • Bertin.js - A JavaScript library for visualizing geospatial data and making thematic maps for the web.
  • Cesium.js - An open-source JavaScript library for world-class 3D mapping of geospatial data.
  • d3-geo - A library for creating maps based on D3.js.
  • d3-geo-projection - Extended geographic projections.
  • d3-geo-voronoi - Voronoi diagrams and Delaunay triangulation for the sphere.
  • datamaps - Customizable map visualizations in one file.
  • Deck.GL - WebGL2 powered geospatial visualization layers.
  • Eurostat-map - Create and customise web maps showing Eurostat data using D3.js.
  • globe.gl - This library is a convenience wrapper around the three-globe plugin, using ThreeJS/WebGL for 3D rendering.
  • Google Maps - JavaScript API for Google Maps.
  • gridviz - A package for visualizing gridded data.
  • HERE maps API - Build web applications with feature-rich and customizable HERE maps.
  • iTowns - A Three.js-based framework written in JavaScript/WebGL for visualizing 3D geospatial data.
  • Leaflet - The leading open-source JavaScript library for mobile-friendly interactive maps.
  • Map Forecast API - Simple-to-use library based on Leaflet 1.4.x. It allows you to show wind maps.
  • Mapbox GL JS - JavaScript library that uses WebGL to render interactive maps from vector tiles.
  • maplibre - It originated as an open-source fork of mapbox-gl-js, before their switch to a non-OSS license in December 2020.
  • MapTalks.js - An open-source JavaScript library for integrated 2D/3D maps.
  • OpenLayers - A high-performance, feature-packed library for creating interactive maps on the web.
  • react-simple-maps - An SVG mapping component library for React, built on top of d3-geo.
  • Tangram - WebGL map rendering engine for creative cartography.
  • TerriaJS - A library for building rich, web-based geospatial data explorers.
  • Wrld.js - Animated 3D city maps based on Leaflet.

Data Processing

Libraries that help you analyse and process geospatial data:

  • Arc.js - Calculate great circles routes as lines in GeoJSON or WKT format.
  • awesome-GeoJSON - Catalogue of GeoJSON tools.
  • Euclid.ts - 2D Euclidean geometry classes, utilities, and drawing tools.
  • flatbush - A really fast static spatial index for 2D points and rectangles in JavaScript.
  • FlatGeoBuf - A performant binary encoding for geographic data based on flatbuffers.
  • flatten-js - For manipulating geometrical shapes, finding intersections, checking inclusion, calculating distance, transformations, and more.
  • Galton - Lightweight Node.js isochrone server.
  • gdal3.js - Convert raster and vector geospatial data to various formats.
  • geoblaze - A blazing fast JavaScript raster processing engine.
  • geobuf - A compact binary encoding for geographic data.
  • GeoTiff.js - Parse TIFF files for visualization or analysis.
  • geolib - Library to provide basic geospatial operations.
  • geopackage-js - The GeoPackage JavaScript library provides the ability to read GeoPackage files.
  • geoparquet - Encoding geospatial data in Apache Parquet.
  • geotoolbox - Provides several GIS operations for use with geojson properties.
  • geojson-merge - Merge multiple GeoJSON files into one FeatureCollection.
  • geojson-vt - A highly efficient JavaScript library for slicing GeoJSON data.
  • Geometric.js - A JavaScript library for doing geometry.
  • JSTS - JavaScript Topology Suite.
  • koop - A JavaScript toolkit for connecting incompatible spatial APIs.
  • math.gl - JavaScript math library focused on Geospatial and 3D use cases.
  • Proj4js - Transform coordinates from one coordinate system to another.
  • rbush - A high-performance JavaScript library for 2D spatial indexing.
  • spl.js - Makes it possible to use SpatiaLite functionality in JavaScript.
  • statsbreaks - Split a quantitative dataset into classes for thematic mapping.
  • Turf.js - A JavaScript library for spatial analysis.
  • topoJSON - Convert GeoJSON to TopoJSON for use in D3 maps.
  • Wicket - A modest library for moving between Well-Known Text (WKT) and various framework geometries.

LiDAR

Tools for visualizing point clouds with web browsers:

Remote Sensing

Resources for frontend earth observation and remote sensing:

  • EOSDIS Worldview - Interactive interface for browsing global, full-resolution satellite imagery.
  • [Google Earth Engine](https://developers.google.com/earth-engine/tutorials/tutorial_api_01) - Geospatial processing service.
  • Sentinel Hub custom scripts - A repository of custom scripts to be used with Sentinel Hub.
  • sentinelhub-js - Download and process satellite imagery using Sentinel Hub services.
  • Spectral - Awesome Spectral Indices for the Google Earth Engine JavaScript API.

💾 Data sources

A collection of geospatial open data sources:

Downloads

Data available for download:

Web APIs

Restful APIs for consuming geospatial data on the fly:

Collections

Compilations and repositories of open geospatial datasets:

📒 Notebooks

Some JavaScript notebooks to help you code:

Beginner

Intermediate

Advanced

:world_map: Web maps

A compilation of interesting web maps:

🌐 Web apps

Plug-and-play geospatial web apps:

  • city roads - Render every single road in any city at once.
  • Datawrapper - Create charts, maps, and tables.
  • Fantasy Map Generator - Free web application for creating and editing fantasy maps.
  • geotiff.io - Provides quick access to easy-to-use raster processing.
  • IMAGE - Tool for generating thematic maps.
  • Kepler - A powerful open-source geospatial analysis tool for large-scale datasets.
  • magrit - An online application for thematic mapping.
  • mapshaper - Online editor for map data.
  • MapOnShirt - Create colorful designs from maps and turn them into products.
  • Maputnik - Free and open visual editor for Mapbox GL styles.
  • mapus - Tool for collaboratively exploring and annotating maps.
  • Peak Map - Visualizes elevation of any area on the map with filled area charts.
  • Plasio - Drag-n-drop in-browser LAS/LAZ point cloud viewer.
  • StoryMap JS - Open-source alternative to ESRI's Story Map application.
  • TopoExport - Export 2D contour lines and 3D topography using open-source datasets.
  • uMap - Create maps with OpenStreetMap layers and embed them in your site.
  • bboxFinder - Helper page for finding bbox values from a map.
  • geojson.io - A quick, simple tool for creating, viewing, and sharing spatial data.
  • GeoJSONLint - Use this site to validate and view your GeoJSON.
  • Pharos AI - Open-source real-time intelligence dashboard for geopolitical conflict tracking with interactive DeckGL/MapLibre geospatial visualization. (Source Code)
  • Pumperly - Open-source fuel price comparison and EV charging route planner using MapLibre GL JS, PostGIS, Valhalla routing, and Photon geocoding.

🎨 Colour advice

Colour usage is very important in data visualisation and cartography. Here are some tools to help you choose the best colours for your maps:

📍 Icons

Icons to add to your GIS websites:

  • font-GIS - A very very cool icon font set for use with GIS and spatial analysis tools.
  • [Map Icons Collection](https://mapicons.mapsmarker.com/) - A set of more than 1000 free and customizable icons to use as placemarks for your POI (Point of Interests) locations on your maps.
  • Material Symbols - Over 2,990 glyphs in a single font file with a wide range of design variants.
  • Geoapify map marker playground - The Marker Icon API lets you create beautiful icons and use them as Map Markers.

📺 Videos

Videos of web mapping presentations and tutorials:

📚 Further reading

Contributing

Contributions of any kind are welcome, just follow the guidelines by either:

If you have any questions about this list, please don't hesitate to contact me @joewdavies on X (formerly Twitter) or open a GitHub issue.

[[curator]]
I'm the Curator. I can help you navigate, organize, and curate this wiki. What would you like to do?