Awesome Frontend GIS

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
  • Data Processing
  • LiDAR
  • Remote Sensing
• 💾 Data sources
  • Downloads
  • Web APIs
  • Collections
• 📒 Notebooks
  • Beginner
  • Intermediate
  • Advanced
• :world_map: Web maps
• 🌐 Web apps
• 🎨 Colour advice
• 📍 Icons
• 📺 Videos
• 📚 Further reading

👨‍💻 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 - 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 - Google Maps API for JavaScript.
• 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 - TerriaJS is 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 - Geobuf is 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 - RBush is 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.
• supercluster - A very fast JavaScript library for geospatial point clustering.
• 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:

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

Remote Sensing

Resources for frontend earth observation and remote sensing:

• EOSDIS Worldview - Interactive interface for browsing global, full-resolution satellite imagery.
• Google Earth Engine - 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:

• ArcGIS Hub - Over 380,000 open datasets.
• Copernicus global DEM - Global elevation tiles.
• Copernicus open access hub - Copernicus satellite imagery download.
• ETOPO1 - 1 arc-minute global relief model of Earth's surface.
• European population grids - GISCO - Population figures in grid cells.
• European Postcodes Point Data - Location of postal codes across Europe.
• Geoboundaries - The world's largest open, free political boundaries database.
• Geodata.gov.gr - Open geospatial data for Greece.
• Global Biodiversity Information Facility (GBIF) - Open access to biodiversity data.
• Global Climate Monitor - Global open climate data.
• Global power plant database - Open source database of power plants.
• Galileo - Geospatial data discovery and management platform.
• Healthcare Services in Europe - Locations of healthcare services in Europe.
• HydroSHEDS - Consistent hydrographic data for global applications.
• NASA Earth Data - Search, discover, visualize, refine, and access NASA Earth Observation data in your browser with Earthdata Search.
• NASA Earth Observations - Browse and download satellite data imagery.
• NASA SEDAC - Global Urban Polygons and Points Dataset.
• Natural Earth - Free vector and raster map data.
• OpenAerialMap - Open service for accessing licensed imagery.
• OpenMapTiles - Free OpenStreetMap Vector Tiles.
• OpenStreetMap - Free, world-wide geographic data set.
• Open Topography - High-resolution topography data and tools.
• Ookla internet speed data - Global network performance metrics.
• Sentinel Hub custom scripts - Repository of custom scripts for Sentinel Hub.
• USGS Earth Explorer - Query and order satellite images and more.
• World Atlas TopoJSON - Natural Earth's vector data as TopoJSON.
• World Bank - Free access to global development data.
• WorldPop - Open access spatial demographic datasets.

Web APIs

Restful APIs for consuming geospatial data on the fly:

• Address API - Pan-European address data with geocoding and reverse-geocoding.
• API Geo - Official French geographical data API.
• ArcGIS location services - Basemaps, Geocoding, Places, routing, and GeoEnrichment.
• bng2latlong - Converts British National Grid to latitude and longitude.
• breezometer - Air Quality, Weather, Pollen, and Environmental data.
• Country State City API - Database of city, state, and country data.
• Geoapify - Geospatial services such as maps, geocoding, and routing.
• geonames - Supports placename lookup and reverse geocoding.
• Geocode.xyz - Reverse geocoding, forward geocoding, and geoparsing API.
• GISCO data distribution API - European Commission data source for administrative regions and boundaries.
• GraphHopper Route Optimization API - Solves various vehicle routing problems.
• movebank-api - Platform for animal tracking data.
• OpenAQ - Largest open-source air quality data platform.
• Open Charge Map API - Public registry of electric vehicle charging locations.
• OpenCage - Forward and reverse geocoding API using open data.
• Open-Meteo - Global weather forecast API.
• Open Notify - ISS location and number of people in space.
• Open Postcode Geo API - British postcodes with geospatial data.
• OpenSky API - Retrieve live airspace information.
• openrouteservice - Directions, isochrones, and geocoding services.
• OpenStreetMap - Retrieve OpenStreetMap data via Overpass API.
• opentopodata API - Open Topography Data API.
• Overpass API - Retrieve OpenStreetMap data.
• RainViewer - Free weather radar and satellite data API.
• REST countries - Get country information via a RESTful API.
• Sunrise and sunset - Provides sunset and sunrise times for locations.
• TomTom - Geocoding, routing, traffic, and more.
• USGS earthquake data - Search earthquake data by various parameters.
• what3words - Converts 3-word addresses to coordinates.

Collections

Compilations and repositories of open geospatial datasets:

• awesome-public-datasets - An awesome repository full of open datasets from an abundance of different categories.
• Free GIS data - Links to over 500 sites providing freely available geographic datasets.
• Public APIs - A collective list of free APIs for use in software and web development.
• WRI - World Resources Institute.

📒 Notebooks

Some JavaScript notebooks to help you code:

Beginner

• Hello, Leaflet - ObservableHQ.
• Hello, Bertin.js - Nicolas Lambert.
• Hello, Mapbox GL - Mike Bostock.
• Hello, eurostat-map.js - Joe Davies.
• Hello, gridviz - Nicolas Lambert.

Intermediate

• World Tour - D3.
• Choropleth - D3.
• How to make a nice scalebar - Julien Gaffuri.
• #GISCHAT Twitter Users with MapBoxGL - Globe Projection - Chris Marx.
• Hexgrid maps with d3-hexgrid - Larsvers.
• Bivariate Choropleth with Continuous Color Scales - Stephanie Tuerk.
• Visualizing Eurostat grid data using Three.js & D3 - Joe Davies.

Advanced

• Try to impeach this? Challenge accepted! - Karim Douieb.
• Bars and pubs in Paris - Nicolas Lambert.
• Brussels Street Gender Inequality - Karim Douieb.
• Animating voting maps with regl - Benjamin Schmidt.
• Election maps as dorling striped circles - Julien Gaffuri.
• GeoParquet on the web - Kyle Barron.
• Interactive Regl wind demo - Daniel Kao.
• Dorling cartogram of the Spanish Presidential election - Adrián Blanco.
• Visualizing earthquakes with Three.js - Joe Davies.
• GeoArrow and GeoParquet in deck.gl - Kyle Barron.

:world_map: 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.
• 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.

🌐 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.

🎨 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.
• Chroma.js Color Palette Helper - Chroma.js-powered tool for mastering multi-hued, multi-stop color scales.
• ColorBrewer - Colour advice for maps, based on Dr. Cynthia Brewer's research.
• Dicopal.js - Discrete color palettes for JavaScript.
• Textures.js - JavaScript library for creating SVG patterns, designed for data visualization.
• 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.
• 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:

• 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.

📚 Further reading

• Fundamentals of Data Visualization - Claus O. Wilke.
• A Workbook for Interactive Cartography and Visualization on the Open Web - Robert Roth, Carl Sack, Gareth Baldrica-Franklin, Yuying Chen, Rich Donohue, Lily Houtman, Tim Prestby, Robin Tolochko, Nick Underwood.
• Thematic Mapping: 101 Inspiring Ways to Visualise Empirical Data - Kenneth Field.
• Color use guidelines for mapping and visualization - Cynthia A. Brewer.

Contributing

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

• Filling a suggestion issue (easier).
• Opening a pull request.

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.