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
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:
💾 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:
- 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
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.
🎨 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:
📚 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.