joewdavies / awesome-frontend-gis Goto Github PK

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.

• 👨‍💻 JavaScript Libraries
  • Mapping
  • Data Processing
  • LiDAR
  • Remote Sensing
• 💾 Data sources
  • Downloads
  • Web APIs
  • Collections
• 📒 Notebooks
  • Beginner
  • Intermediate
  • Advanced
• 🗺️ Web maps
• 🌐 Web apps
• 🎨 Colour advice
• 📍 Icons
• 📺 Videos
• 📚 Further reading

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.

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.

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.

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.

A collection of geospatial open data sources:

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.

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.

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.

Some JavaScript notebooks to help you code:

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

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

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

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.

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

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

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.