Awesome Frontend GIS
Geographic Information Systems (GIS) for web browsers. For managing,
analyzing, editing, and visualizing geographic data.
<a href="https://github.com/eurostat/gridviz" target="_blank">
<img src='https://user-images.githubusercontent.com/25485293/191950255-cbd83c6a-4880-4c0a-a665-b59a21467702.PNG'>
</a>
A compilation of geospatial-related web frameworks, tools, demos,
applications, data sources and more.
Contents
👨💻 JavaScript Libraries
Mapping
Libraries for creating web maps:
- Leaflet - The leading
open-source JavaScript library for mobile-friendly interactive
maps.
- OpenLayers - A
high-performance, feature-packed library for creating interactive maps
on the web.
- Cesium.js - An open-source
JavaScript library for world-class 3D mapping of geospatial data.
- maplibre -
It originated as an open-source fork of mapbox-gl-js, before their
switch to a non-OSS license in December 2020.
- Deck.GL - WebGL2
powered geospatial visualization layers.
- MapTalks.js -
An open-source JavaScript library for integrated 2D/3D maps.
- antvis L7 - Large-scale
WebGL-powered Geospatial Data Visualization.
- Tangram - WebGL
map rendering engine for creative cartography.
- TerriaJS -
TerriaJS is a library for building rich, web-based geospatial data
explorers.
- gridviz - A
package for visualizing gridded data.
- Eurostat-map -
Create and customise web maps showing Eurostat data using D3.js.
- Bertin.js - A
JavaScript library for visualizing geospatial data and making thematic
maps for the web.
- regl-map-animation
- Animate x/y point data using regl and categorize them into a bar
chart.
- iTowns - A
Three.js-based framework written in JavaScript/WebGL for visualizing 3D
geospatial data.
- globe.gl - This library is a
convenience wrapper around the three-globe plugin, and uses
ThreeJS/WebGL for 3D rendering.
- 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.
- d3-inertia - An
extension to d3-drag that continues the mouse movement with some
inertia.
- datamaps -
Customizable map visualizations in one file.
- react-simple-maps
- An SVG mapping component library for React, built on top of
d3-geo.
- Google
Maps - Google Maps API for JavaScript.
- Wrld.js - Animated
3D city maps based on Leaflet.
- Mapbox GL
JS - JavaScript library that uses WebGL to render interactive maps
from vector tiles.
- ArcGIS API for
JS - A lightweight way to embed maps and tasks in web
applications.
- HERE
maps API - Build web applications with feature-rich and customizable
HERE maps.
- Map Forecast API -
Simple-to-use library based on Leaflet 1.4.x. It allows you to show wind
maps.
Data Processing
Libraries that help you analyse and process geospatial data: - geolib - Library to
provide basic geospatial operations like distance calculation,
conversion of decimal coordinates to sexagesimal, etc. - Turf.js - Turf is a JavaScript
library for spatial analysis. - JSTS - JavaScript
Topology Suite. - flatten-js - For
manipulating geometrical shapes, finding intersections, checking
inclusion, calculating distance, transformations and more. - flatbush - A really fast
static spatial index for 2D points and rectangles in JavaScript. - rbush - RBush is a
high-performance JavaScript library for 2D spatial indexing of points
and rectangles. - Geometric.js - A
JavaScript library for doing geometry. - Euclid.ts - 2D
Euclidean geometry classes, utilities, and drawing tools. - Proj4js - Transform
coordinates from one coordinate system to another, including datum
transformations. - GeoTiff.js - Parse
TIFF files for visualization or analysis. - Arc.js - Calculate
great circles routes as lines in GeoJSON or WKT format. - awesome-GeoJSON -
Catalogue of GeoJSON tools. - topoJSON - Convert
GeoJSON to TopoJSON for use in D3 maps. - d3-geo-polygon -
Clipping and geometric operations for spherical polygons. - Wicket - A modest library
for moving between Well-Known Text (WKT) and various framework
geometries. - koop - Koop
is a JavaScript toolkit for connecting incompatible spatial APIs. - spl.js - Makes it possible to
use SpatiaLite functionality in JavaScript. Behind the scenes, a
WebAssembly port of SpatiaLite is used. - geotoolbox - Provides
several GIS operations for use with geojson properties. Useful for
thematic cartography. - supercluster - A
very fast JavaScript library for geospatial point clustering for
browsers and Node. - geoblaze - A blazing fast
JavaScript raster processing engine. Using geoblaze, you can run
computations ranging from basic statistics (min, max, mean, mode) to
band arithmetic and histogram generation in either a web browser or a
node application. - geopackage-js -
The GeoPackage JavaScript library currently provides the ability to read
GeoPackage files. - geojson-merge - Merge
multiple GeoJSON files into one FeatureCollection. - Galton - Lightweight Node.js
isochrone server. Build isochrones using OSRM, Turf and concaveman. - geojson-vt - A highly
efficient JavaScript library for slicing GeoJSON data into vector tiles
on the fly. - geobuf -
Geobuf is a compact binary encoding for geographic data. - geoparquet -
Encoding geospatial data in Apache Parquet. - statsbreaks - Split
(classify/discretize) a quantitative dataset into a (k) number of
classes or thematic categories. Useful for creating a choropleth map. -
gdal3.js - Convert
raster and vector geospatial data to various formats and coordinate
systems entirely in the browser. - math.gl - JavaScript math
library focused on Geospatial and 3D use cases.
LiDAR
Tools for visualizing point clouds with web browsers:
- Potree - WebGL point
cloud viewer for large datasets.
- Plasio - Drag-n-drop
In-browser LAS/LAZ point cloud viewer.
- Potree
& Cesium.js - Rezt, Austria LIDAR viewer.
- Three.js -
Point cloud data loader.
Remote Sensing
Resources for frontend earth observation and remote sensing:
- Google
Earth Engine - Geospatial processing service.
- sentinelhub-js
- Download and process satellite imagery in JavaScript or TypeScript
using Sentinel Hub services.
- Sentinel
Hub custom scripts - A repository of custom scripts to be used with
Sentinel Hub.
- Spectral -
Awesome Spectral Indices for the Google Earth Engine JavaScript API
(Code Editor).
- EOSDIS
Worldview - Interactive interface for browsing global,
full-resolution satellite imagery.
💾 Data sources
A collection of geospatial open data sources:
Downloads
Data available for download:
- OpenMapTiles - Free
OpenStreetMap Vector Tiles.
- OpenStreetMap - A
free, world-wide geographic data set.
- Natural Earth - Free
vector and raster map data at 1:10m, 1:50m, and 1:110m scales.
- World Atlas
TopoJSON - A convenient redistribution of Natural Earth’s vector
data as TopoJSON.
- Copernicus
global DEM - Global elevation tiles.
- ETOPO1 - 1
arc-minute global relief model of Earth’s surface that integrates land
topography and ocean bathymetry.
- HydroSHEDS - Hydrographic
information in a consistent and comprehensive format for regional and
global-scale applications.
- geoboundaries - The
world’s largest open, free and research-ready database of political
administrative boundaries.
- Global
power plant database - A comprehensive, global, open source database
of power plants.
- Ookla
internet speed data - Provides global network performance metrics.
Data is provided in both Shapefile format as well as Apache
Parquet.
- European
population grids - GISCO - These datasets contain grid cells
covering the European land territory, for various resolutions from 1km
to 100km. Base statistics such as population figures are provided for
these cells.
- Healthcare
Services in Europe - The locations of healthcare services across
Europe.
- European
Postcodes Point Data - The postal code point dataset shows the
location of postal codes, NUTS codes and the Degree of Urbanisation
classification across the EU, EFTA and candidate countries from a
variety of sources.
- WorldPop - Open access
spatial demographic datasets built using transparent approaches.
- World Bank - Free and open
access to global development data.
- USGS Earth Explorer -
Query and order satellite images, aerial photographs, and cartographic
products through the U.S. Geological Survey.
- Open Topography -
OpenTopography facilitates community access to high-resolution, Earth
science-oriented, topography data, and related tools and resources.
- NASA Earth Observations -
Here you can browse and download imagery of satellite data from NASA’s
constellation of Earth Observing System satellites.
- Geodata.gov.gr -
Open geospatial data for Greece.
- ArcGIS Hub - Over 380,000 open
datasets.
- DIVA-GIS - Free spatial
data. Includes country and global level boundaries, climate, species
occurence, crop and elevation data.
- OpenAerialMap - An open
service to provide access to a commons of openly licensed imagery and
map layer services.
- Global Climate
Monitor - Global open climate data available for download.
- Copernicus open access
hub - Copernicus satellite imagery download.
Web APIs
Restful APIs for consuming geospatial data on the fly:
- GISCO
data distribution API - Official European Commission data source for
administrative regions, Coastal lines, Communes, Countries, Local
Administrative Units, NUTS, Urban Audit.
- Address
API - Pan-european address data. Supports geocoding,
reverse-geocoding and lists of address components (e.g. all roads in a
city).
- USGS
earthquake data - Allows custom searches for earthquake information
using a variety of parameters.
- movebank-api -
Movebank is a free, online database and research platform for animal
tracking and other on-animal sensor data.
- Overpass
API - Retrieve OpenStreetMap data.
- REST countries - Get
information about countries via a RESTful API.
- OSMNames - The OSMNames
open-source project provides raw place data in an easy-to-index
form.
- Open Notify -
Get the current location of the International Space Station (ISS) and
current number of people in space!
- OpenAQ - OpenAQ is the
largest open-source air quality data platform.
- openrouteservice
- Directions, Isochrones, Time-Distance Matrix, Pelias Geocoding, POIs,
Elevation, Optimization.
- GraphHopper Route
Optimization API - Solves a variety of vehicle routing problems,
including the classical “traveling salesman problem”.
- Geoapify - Maps, address
and location search, route optimization, reachability analysis, geodata
access, and more.
- OpenCage - Forward and
reverse worldwide geocoding API using open data.
- breezometer
- API endpoints for Air Quality, Pollen, Weather, Wildfire, Cleanest
Routes and Environmental Alerts. Serves current conditions, forecasts,
and historical data.
- ipfind - Geographic location of an
IP address or any domain name along with some other useful
information.
- bng2latlong -
Simple API to convert an OSGB36 easting and northing (British National
Grid) to WGS84 latitude and longitude.
- Open
Postcode Geo API - British postcodes with easting, northing,
latitude, and longitude.
- Country State City API -
Full Database of city state country available in JSON, SQL, XML, YAML
& CSV format.
- API Geo - Official
French geographical data API.
- geonames -
Supports placename lookup, postal Code Search, reverse geocoding, nearby
populated place and nearby toponym searches.
- opentopodata API - Open
Topo Data is a REST API server for your elevation data.
- what3words
- Convert 3 word addresses to coordinates and vice versa.
- TomTom
- Charging stations, fuel prices, routing, geocoding, parking
availability, traffic and waypoint optimization endpoints.
- Open Charge Map
API - Non-commercial, non-profit global public registry of electric
vehicle charging locations.
- OpenSky
API - Retrieve live airspace information for research and
non-commerical purposes.
- Open-Meteo - Global weather
forecast API for non-commercial use.
- RainViewer - Free
weather API. Offers the past (2 hours) and forecast (30 minutes) weather
radar data and the past infrared satellite data.
- Sunrise and sunset -
Sunset and sunrise times for a given latitude and longitude.
- Geocode.xyz - Reverse Geocoding,
Forward Geocoding, Geoparsing API. Free requests throttled at 1 request
per second.
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. - WRI -
World resources institute. - Public APIs -
A collective list of free APIs for use in software and web
development.
📒 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.
- Kepler - A powerful open source
geospatial analysis tool for large-scale data sets.
- Plasio - Drag-n-drop
In-browser LAS/LAZ point cloud viewer.
- mapshaper - Online editor for
map data.
- geotiff.io - GeoTIFF.io
provides quick access to easy-to-use raster processing.
- IMAGE - An
easy-to-use tool for generating thematic maps.
- magrit - Magrit is an online
application for thematic mapping (cartography).
- StoryMap JS - The Open
source alternative to ESRI’s Story map application.
- Datawrapper
- Create charts, maps, and tables.
- Maputnik - A free
and open visual editor for the Mapbox GL styles targeted at developers
and map designers.
- Fantasy
Map Generator - Free web application that helps fantasy writers,
game masters, and cartographers create and edit fantasy maps.
- uMap - Lets you
create a map with OpenStreetMap layers and embed it in your site.
- Peak Map - Allows
you to visualize elevation of any area on the map with filled area
charts (also known as a ridgeline).
- mapus - Mapus is a
tool to explore and annotate collaboratively on a map.
- MapOnShirt - A fun tool for
creating colorful designs from maps and turning them into T-shirts,
Posters, Cushions and more.
🎨 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:
- ColorBrewer - Colour advice
for maps, based on the research of Dr. Cynthia Brewer.
- viz-palette -
This project is optimized for tweaking, copying, and pasting colors in
and out of JavaScript.
- Chroma.js Color Palette
Helper - This chroma.js-powered tool is here to help us mastering
multi-hued, multi-stops color scales.
- Dicopal.js -
Discrete color palettes (hundreds of them!) for JavaScript.
- Textures.js
- JavaScript library for creating SVG patterns. Made on top of d3.js, it
is designed for data visualization. Textures are useful for the
selective perception of different categories.
📍 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.