Skip to content

Latest commit

Β 

History

History
325 lines (277 loc) Β· 33.8 KB

File metadata and controls

325 lines (277 loc) Β· 33.8 KB

Awesome Frontend GIS Awesome

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

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

Contents

πŸ‘¨β€πŸ’» JavaScript Libraries

Mapping

Libraries for creating web maps:

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

Data Processing

Libraries that help you analyse and process geospatial data:

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

LiDAR

Tools for visualizing point clouds with web browsers:

  • Plasio - Drag-n-drop In-browser LAS/LAZ point cloud viewer. GitHub stars
  • Potree - WebGL point cloud viewer for large datasets. GitHub stars
  • Potree & Cesium.js - Rezt, Austria LIDAR viewer.
  • Three.js - Point cloud data loader. GitHub stars

Remote Sensing

Resources for frontend earth observation and remote sensing:

πŸ’Ύ 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

πŸ—ΊοΈ Web maps

A compilation of interesting web maps:

  • Map of notable people - Topi Tjukanov.
  • Submarine cable map - TeleGeography.
  • Radio Garden - 3D Globe Radio Tuner.
  • Map of every building in the United States - New York Times.
  • Map of the Roman transport network - The Stanford Geospatial Network Model of the Roman World.
  • WebGL Wind - A WebGL-powered visualization of wind power. Capable of rendering up to 1 million wind particles at 60fps. GitHub stars
  • Statistical Atlas - A leaflet-powered atlas showcasing Eurostat's statistics.
  • ShadeMap - Every mountain, building and tree shadow in the world simulated for any date and time.
  • ClimateArchive - An interactive visualisation of climate model data across time and space.
  • Old Maps Online - Browse historical places and search for old maps with timeline.
  • chronotrains - Where can you go by train in 8h?
  • Castlemap - The world's 7,044 great castles, fortresses and palaces on one night map, built from Wikidata.
  • Europe Beach Map - Every notable European beach on one map, with sea temperature, sand and best season for each.
  • Detourmap - Waterfalls, caves, volcanoes and lonely coasts, plus the ruins, tombs, ghost towns and shipwrecks people left behind, on one world map, built from Wikidata.
  • Planetary Atlas - Zoomable maps of 14 worlds built from open NASA, USGS, ESA and JAXA imagery, with the IAU nomenclature and 69 surface mission landing sites.
  • FilmMap - Where films and television were actually shot: 15,272 filming locations across 161 countries, each one traced to a Wikidata statement.
  • Forest Fires Map - Interactive web map of forest fires.

🌐 Web apps

Plug-and-play geospatial web apps:

  • city roads - Render every single road in any city at once. GitHub stars
  • Datawrapper - Create charts, maps, and tables.
  • Fantasy Map Generator - Free web application for creating and editing fantasy maps. GitHub stars
  • GeoLibre - A lightweight, cloud-native GIS platform for visualizing, exploring, and analyzing geospatial data across desktop and web environments, with a responsive layout for mobile screens. GitHub stars
  • 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. GitHub stars
  • mapus - Tool for collaboratively exploring and annotating maps. GitHub stars
  • Peak Map - Visualizes elevation of any area on the map with filled area charts. GitHub stars
  • Plasio - Drag-n-drop in-browser LAS/LAZ point cloud viewer. GitHub stars
  • 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. GitHub stars
  • 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) GitHub stars
  • Pumperly - Open-source fuel price comparison and EV charging route planner using MapLibre GL JS, PostGIS, Valhalla routing, and Photon geocoding. GitHub stars
  • gpx studio - Online tool for GPX editing.

🎨 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:

  • CartoColor - A set of custom color palettes built on top of standards for color use on maps. GitHub stars
  • Chroma.js Color Palette Helper - Chroma.js-powered tool for mastering multi-hued, multi-stop color scales. GitHub stars
  • ColorBrewer - Colour advice for maps, based on Dr. Cynthia Brewer's research.
  • Dicopal.js - Discrete color palettes for JavaScript. GitHub stars
  • Textures.js - JavaScript library for creating SVG patterns, designed for data visualization. GitHub stars
  • viz-palette - Tool optimized for tweaking, copying, and pasting colors in and out of JavaScript.

πŸ“ 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. GitHub stars
  • Map Icons Collection - 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 are welcome, just follow the guidelines.


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.