awesome-awesomeness/html/frontendgis.md2.html

<!--lint disable double-link awesome-heading -->
<div data-align="center">
<h2>
Awesome Frontend GIS <a href="https://github.com/sindresorhus/awesome">
<img src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg" alt="Awesome" href="https://github.com/sindresorhus/awesome">
</a>
</h2>
<p>Geographic Information Systems (GIS) for web browsers. <br> For
managing, analyzing, editing, and visualizing geographic data.</p>
<div>
<pre><code>&lt;a href=&quot;https://github.com/eurostat/gridviz&quot; target=&quot;_blank&quot;&gt;
    &lt;img src=&#39;https://user-images.githubusercontent.com/25485293/191950255-cbd83c6a-4880-4c0a-a665-b59a21467702.PNG&#39;&gt;
&lt;/a&gt;</code></pre>
</div>
<p><em>A compilation of geospatial-related web frameworks, tools, demos,
applications, data sources and more.</em></p>
</div>
<h2 id="contents">Contents</h2>
<ul>
<li><a href="#-javascript-libraries">👨‍💻 <strong>JavaScript
Libraries</strong></a>
<ul>
<li><a href="#mapping">Mapping</a></li>
<li><a href="#data-processing">Data Processing</a></li>
<li><a href="#lidar">LiDAR</a></li>
<li><a href="#remote-sensing">Remote Sensing</a></li>
</ul></li>
<li><a href="#-data-sources">💾 <strong>Data sources</strong></a>
<ul>
<li><a href="#downloads">Downloads</a></li>
<li><a href="#web-apis">Web APIs</a></li>
<li><a href="#collections">Collections</a></li>
</ul></li>
<li><a href="#-notebooks">📒 <strong>Notebooks</strong></a>
<ul>
<li><a href="#beginner">Beginner</a></li>
<li><a href="#intermediate">Intermediate</a></li>
<li><a href="#advanced">Advanced</a></li>
</ul></li>
<li><a href="#world_map-web-maps">:world_map: Web maps</a></li>
<li><a href="#-web-apps">🌐 <strong>Web apps</strong></a></li>
<li><a href="#-colour-advice">🎨 <strong>Colour advice</strong></a></li>
<li><a href="#-icons">📍 <strong>Icons</strong></a></li>
<li><a href="#-videos">📺 <strong>Videos</strong></a></li>
<li><a href="#-further-reading">📚 <strong>Further
reading</strong></a></li>
</ul>
<h2 id="javascript-libraries">👨‍💻 JavaScript Libraries</h2>
<h3 id="mapping">Mapping</h3>
<p>Libraries for creating web maps:</p>
<ul>
<li><a href="https://github.com/antvis/L7">antvis L7</a> - Large-scale
WebGL-powered Geospatial Data Visualization. <img
src="https://img.shields.io/github/stars/antvis/L7?style=social"
alt="GitHub stars" /></li>
<li><a href="https://developers.arcgis.com/javascript/latest/">ArcGIS
Maps SDK for JavaScript</a> - Modern JavaScript API and web component
library for building interactive 2D and 3D web apps for the
browser.</li>
<li><a href="https://github.com/Esri/arcgis-rest-js">ArcGIS REST JS</a>
- Compact, modular JavaScript wrappers for the ArcGIS REST API that run
in Node.js and modern browsers. <img
src="https://img.shields.io/github/stars/Esri/arcgis-rest-js?style=social"
alt="GitHub stars" /></li>
<li><a href="https://github.com/neocarto/bertin">Bertin.js</a> - A
JavaScript library for visualizing geospatial data and making thematic
maps for the web. <img
src="https://img.shields.io/github/stars/neocarto/bertin?style=social"
alt="GitHub stars" /></li>
<li><a href="https://github.com/CesiumGS/cesium">Cesium.js</a> - An
open-source JavaScript library for world-class 3D mapping of geospatial
data. <img
src="https://img.shields.io/github/stars/CesiumGS/cesium?style=social"
alt="GitHub stars" /></li>
<li><a href="https://github.com/d3/d3-geo">d3-geo</a> - A library for
creating maps based on D3.js. <img
src="https://img.shields.io/github/stars/d3/d3-geo?style=social"
alt="GitHub stars" /></li>
<li><a
href="https://github.com/d3/d3-geo-projection">d3-geo-projection</a> -
Extended geographic projections. <img
src="https://img.shields.io/github/stars/d3/d3-geo-projection?style=social"
alt="GitHub stars" /></li>
<li><a href="https://github.com/Fil/d3-geo-voronoi">d3-geo-voronoi</a> -
Voronoi diagrams and Delaunay triangulation for the sphere. <img
src="https://img.shields.io/github/stars/Fil/d3-geo-voronoi?style=social"
alt="GitHub stars" /></li>
<li><a href="https://github.com/markmarkoh/datamaps">datamaps</a> -
Customizable map visualizations in one file. <img
src="https://img.shields.io/github/stars/markmarkoh/datamaps?style=social"
alt="GitHub stars" /></li>
<li><a href="https://github.com/visgl/deck.gl">Deck.GL</a> - WebGL2
powered geospatial visualization layers. <video
src="https://img.shields.io/github/stars/visgl/deck.gl?style=social"
controls=""><a
href="https://img.shields.io/github/stars/visgl/deck.gl?style=social">GitHub
stars</a></video></li>
<li><a
href="https://github.com/eurostat/eurostat-map.js">Eurostat-map</a> -
Create and customise web maps showing Eurostat data using D3.js. <embed
src="https://img.shields.io/github/stars/eurostat/eurostat-map.js?style=social" /></li>
<li><a href="https://github.com/vasturiano/globe.gl">globe.gl</a> - This
library is a convenience wrapper around the three-globe plugin, using
ThreeJS/WebGL for 3D rendering. <video
src="https://img.shields.io/github/stars/vasturiano/globe.gl?style=social"
controls=""><a
href="https://img.shields.io/github/stars/vasturiano/globe.gl?style=social">GitHub
stars</a></video></li>
<li><a
href="https://developers.google.com/maps/documentation/javascript">Google
Maps</a> - Google Maps API for JavaScript.</li>
<li><a href="https://github.com/eurostat/gridviz">gridviz</a> - A
package for visualizing gridded data. <img
src="https://img.shields.io/github/stars/eurostat/gridviz?style=social"
alt="GitHub stars" /></li>
<li><a href="https://developer.here.com/develop/javascript-api">HERE
maps API</a> - Build web applications with feature-rich and customizable
HERE maps.</li>
<li><a href="https://github.com/iTowns/itowns">iTowns</a> - A
Three.js-based framework written in JavaScript/WebGL for visualizing 3D
geospatial data. <img
src="https://img.shields.io/github/stars/iTowns/itowns?style=social"
alt="GitHub stars" /></li>
<li><a href="https://github.com/Leaflet/Leaflet">Leaflet</a> - The
leading open-source JavaScript library for mobile-friendly interactive
maps. <img
src="https://img.shields.io/github/stars/Leaflet/Leaflet?style=social"
alt="GitHub stars" /></li>
<li><a href="https://github.com/windycom/API">Map Forecast API</a> -
Simple-to-use library based on Leaflet 1.4.x. It allows you to show wind
maps. <img
src="https://img.shields.io/github/stars/windycom/API?style=social"
alt="GitHub stars" /></li>
<li><a href="https://github.com/mapbox/mapbox-gl-js">Mapbox GL JS</a> -
JavaScript library that uses WebGL to render interactive maps from
vector tiles. <img
src="https://img.shields.io/github/stars/mapbox/mapbox-gl-js?style=social"
alt="GitHub stars" /></li>
<li><a href="https://github.com/maplibre/maplibre-gl-js">maplibre</a> -
It originated as an open-source fork of mapbox-gl-js, before their
switch to a non-OSS license in December 2020. <img
src="https://img.shields.io/github/stars/maplibre/maplibre-gl-js?style=social"
alt="GitHub stars" /></li>
<li><a href="https://github.com/maptalks/maptalks.js">MapTalks.js</a> -
An open-source JavaScript library for integrated 2D/3D maps. <embed
src="https://img.shields.io/github/stars/maptalks/maptalks.js?style=social" /></li>
<li><a href="https://github.com/openlayers/openlayers">OpenLayers</a> -
A high-performance, feature-packed library for creating interactive maps
on the web. <img
src="https://img.shields.io/github/stars/openlayers/openlayers?style=social"
alt="GitHub stars" /></li>
<li><a
href="https://github.com/zcreativelabs/react-simple-maps">react-simple-maps</a>
- An SVG mapping component library for React, built on top of d3-geo.
<img
src="https://img.shields.io/github/stars/zcreativelabs/react-simple-maps?style=social"
alt="GitHub stars" /></li>
<li><a href="https://github.com/tangrams/tangram">Tangram</a> - WebGL
map rendering engine for creative cartography. <img
src="https://img.shields.io/github/stars/tangrams/tangram?style=social"
alt="GitHub stars" /></li>
<li><a href="https://github.com/TerriaJS/terriajs">TerriaJS</a> -
TerriaJS is a library for building rich, web-based geospatial data
explorers. <img
src="https://img.shields.io/github/stars/TerriaJS/terriajs?style=social"
alt="GitHub stars" /></li>
<li><a href="https://github.com/wrld3d/wrld.js/">Wrld.js</a> - Animated
3D city maps based on Leaflet. <embed
src="https://img.shields.io/github/stars/wrld3d/wrld.js?style=social" /></li>
</ul>
<h3 id="data-processing">Data Processing</h3>
<p>Libraries that help you analyse and process geospatial data: - <a
href="https://github.com/springmeyer/arc.js">Arc.js</a> - Calculate
great circles routes as lines in GeoJSON or WKT format. <embed
src="https://img.shields.io/github/stars/springmeyer/arc.js?style=social" />
- <a href="https://github.com/tmcw/awesome-geojson">awesome-GeoJSON</a>
- Catalogue of GeoJSON tools. <img
src="https://img.shields.io/github/stars/tmcw/awesome-geojson?style=social"
alt="GitHub stars" /> - <a
href="https://github.com/mathigon/euclid.js">Euclid.ts</a> - 2D
Euclidean geometry classes, utilities, and drawing tools. <embed
src="https://img.shields.io/github/stars/mathigon/euclid.js?style=social" />
- <a href="https://github.com/mourner/flatbush">flatbush</a> - A really
fast static spatial index for 2D points and rectangles in JavaScript.
<img
src="https://img.shields.io/github/stars/mourner/flatbush?style=social"
alt="GitHub stars" /> - <a
href="https://github.com/flatgeobuf/flatgeobuf">FlatGeoBuf</a> - A
performant binary encoding for geographic data based on flatbuffers.
<img
src="https://img.shields.io/github/stars/flatgeobuf/flatgeobuf?style=social"
alt="GitHub stars" /> - <a
href="https://github.com/alexbol99/flatten-js">flatten-js</a> - For
manipulating geometrical shapes, finding intersections, checking
inclusion, calculating distance, transformations, and more. <img
src="https://img.shields.io/github/stars/alexbol99/flatten-js?style=social"
alt="GitHub stars" /> - <a
href="https://github.com/urbica/galton">Galton</a> - Lightweight Node.js
isochrone server. <img
src="https://img.shields.io/github/stars/urbica/galton?style=social"
alt="GitHub stars" /> - <a
href="https://github.com/bugra9/gdal3.js">gdal3.js</a> - Convert raster
and vector geospatial data to various formats. <embed
src="https://img.shields.io/github/stars/bugra9/gdal3.js?style=social" />
- <a href="https://github.com/GeoTIFF/geoblaze">geoblaze</a> - A blazing
fast JavaScript raster processing engine. <img
src="https://img.shields.io/github/stars/GeoTIFF/geoblaze?style=social"
alt="GitHub stars" /> - <a
href="https://github.com/mapbox/geobuf">geobuf</a> - Geobuf is a compact
binary encoding for geographic data. <img
src="https://img.shields.io/github/stars/mapbox/geobuf?style=social"
alt="GitHub stars" /> - <a
href="https://github.com/geotiffjs/geotiff.js">GeoTiff.js</a> - Parse
TIFF files for visualization or analysis. <embed
src="https://img.shields.io/github/stars/geotiffjs/geotiff.js?style=social" />
- <a href="https://github.com/manuelbieh/geolib">geolib</a> - Library to
provide basic geospatial operations. <img
src="https://img.shields.io/github/stars/manuelbieh/geolib?style=social"
alt="GitHub stars" /> - <a
href="https://github.com/ngageoint/geopackage-js">geopackage-js</a> -
The GeoPackage JavaScript library provides the ability to read
GeoPackage files. <img
src="https://img.shields.io/github/stars/ngageoint/geopackage-js?style=social"
alt="GitHub stars" /> - <a
href="https://github.com/opengeospatial/geoparquet">geoparquet</a> -
Encoding geospatial data in Apache Parquet. <img
src="https://img.shields.io/github/stars/opengeospatial/geoparquet?style=social"
alt="GitHub stars" /> - <a
href="https://github.com/neocarto/geotoolbox">geotoolbox</a> - Provides
several GIS operations for use with geojson properties. <img
src="https://img.shields.io/github/stars/neocarto/geotoolbox?style=social"
alt="GitHub stars" /> - <a
href="https://github.com/mapbox/geojson-merge">geojson-merge</a> - Merge
multiple GeoJSON files into one FeatureCollection. <img
src="https://img.shields.io/github/stars/mapbox/geojson-merge?style=social"
alt="GitHub stars" /> - <a
href="https://github.com/mapbox/geojson-vt">geojson-vt</a> - A highly
efficient JavaScript library for slicing GeoJSON data. <img
src="https://img.shields.io/github/stars/mapbox/geojson-vt?style=social"
alt="GitHub stars" /> - <a
href="https://github.com/HarryStevens/geometric">Geometric.js</a> - A
JavaScript library for doing geometry. <img
src="https://img.shields.io/github/stars/HarryStevens/geometric?style=social"
alt="GitHub stars" /> - <a
href="https://github.com/bjornharrtell/jsts">JSTS</a> - JavaScript
Topology Suite. <img
src="https://img.shields.io/github/stars/bjornharrtell/jsts?style=social"
alt="GitHub stars" /> - <a
href="https://github.com/koopjs/koop">koop</a> - A JavaScript toolkit
for connecting incompatible spatial APIs. <img
src="https://img.shields.io/github/stars/koopjs/koop?style=social"
alt="GitHub stars" /> - <a
href="https://github.com/uber-web/math.gl">math.gl</a> - JavaScript math
library focused on Geospatial and 3D use cases. <video
src="https://img.shields.io/github/stars/uber-web/math.gl?style=social"
controls=""><a
href="https://img.shields.io/github/stars/uber-web/math.gl?style=social">GitHub
stars</a></video> - <a
href="https://github.com/proj4js/proj4js">Proj4js</a> - Transform
coordinates from one coordinate system to another. <img
src="https://img.shields.io/github/stars/proj4js/proj4js?style=social"
alt="GitHub stars" /> - <a
href="https://github.com/mourner/rbush">rbush</a> - RBush is a
high-performance JavaScript library for 2D spatial indexing. <img
src="https://img.shields.io/github/stars/mourner/rbush?style=social"
alt="GitHub stars" /> - <a
href="https://github.com/jvail/spl.js">spl.js</a> - Makes it possible to
use SpatiaLite functionality in JavaScript. <embed
src="https://img.shields.io/github/stars/jvail/spl.js?style=social" /> -
<a href="https://github.com/riatelab/statsbreaks">statsbreaks</a> -
Split a quantitative dataset into classes for thematic mapping. <img
src="https://img.shields.io/github/stars/riatelab/statsbreaks?style=social"
alt="GitHub stars" /> - <a
href="https://www.npmjs.com/package/supercluster">supercluster</a> - A
very fast JavaScript library for geospatial point clustering. <img
src="https://img.shields.io/github/stars/mapbox/supercluster?style=social"
alt="GitHub stars" /> - <a
href="https://github.com/Turfjs/turf">Turf.js</a> - A JavaScript library
for spatial analysis. <img
src="https://img.shields.io/github/stars/Turfjs/turf?style=social"
alt="GitHub stars" /> - <a
href="https://github.com/topojson/topojson">topoJSON</a> - Convert
GeoJSON to TopoJSON for use in D3 maps. <img
src="https://img.shields.io/github/stars/topojson/topojson?style=social"
alt="GitHub stars" /> - <a
href="https://github.com/arthur-e/Wicket">Wicket</a> - A modest library
for moving between Well-Known Text (WKT) and various framework
geometries. <img
src="https://img.shields.io/github/stars/arthur-e/Wicket?style=social"
alt="GitHub stars" /></p>
<h3 id="lidar">LiDAR</h3>
<p>Tools for visualizing point clouds with web browsers:</p>
<ul>
<li><a href="https://github.com/verma/plasio">Plasio</a> - Drag-n-drop
In-browser LAS/LAZ point cloud viewer.</li>
<li><a href="https://github.com/potree/potree">Potree</a> - WebGL point
cloud viewer for large datasets.</li>
<li><a href="https://potree.org/potree/examples/cesium_retz.html">Potree
&amp; Cesium.js</a> - Rezt, Austria LIDAR viewer.</li>
<li><a
href="https://threejs.org/examples/#webgl_loader_pcd">Three.js</a> -
Point cloud data loader.</li>
</ul>
<h3 id="remote-sensing">Remote Sensing</h3>
<p>Resources for frontend earth observation and remote sensing:</p>
<ul>
<li><a href="https://github.com/nasa-gibs/worldview">EOSDIS
Worldview</a> - Interactive interface for browsing global,
full-resolution satellite imagery.</li>
<li><a
href="https://developers.google.com/earth-engine/tutorials/tutorial_api_01">Google
Earth Engine</a> - Geospatial processing service.</li>
<li><a href="https://github.com/sentinel-hub/custom-scripts">Sentinel
Hub custom scripts</a> - A repository of custom scripts to be used with
Sentinel Hub.</li>
<li><a
href="https://github.com/sentinel-hub/sentinelhub-js/">sentinelhub-js</a>
- Download and process satellite imagery using Sentinel Hub
services.</li>
<li><a href="https://github.com/awesome-spectral-indices">Spectral</a> -
Awesome Spectral Indices for the Google Earth Engine JavaScript
API.</li>
</ul>
<h2 id="data-sources">💾 Data sources</h2>
<p>A collection of geospatial open data sources:</p>
<h3 id="downloads">Downloads</h3>
<p>Data available for download:</p>
<ul>
<li><a href="https://hub.arcgis.com/">ArcGIS Hub</a> - Over 380,000 open
datasets.</li>
<li><a
href="https://ec.europa.eu/eurostat/web/gisco/geodata/digital-elevation-model/copernicus#Elevation">Copernicus
global DEM</a> - Global elevation tiles.</li>
<li><a
href="https://www.copernicus.eu/en/access-data/conventional-data-access-hubs">Copernicus
open access hub</a> - Copernicus satellite imagery download.</li>
<li><a href="https://www.ngdc.noaa.gov/mgg">ETOPO1</a> - 1 arc-minute
global relief model of Earth’s surface.</li>
<li><a
href="https://ec.europa.eu/eurostat/web/gisco/geodata/grids">European
population grids - GISCO</a> - Population figures in grid cells.</li>
<li><a
href="https://ec.europa.eu/eurostat/web/gisco/geodata/administrative-units/postal-codes">European
Postcodes Point Data</a> - Location of postal codes across Europe.</li>
<li><a href="https://www.geoboundaries.org/">Geoboundaries</a> - The
world’s largest open, free political boundaries database.</li>
<li><a href="https://www.gbif.org/">Global Biodiversity Information
Facility (GBIF)</a> - Open access to biodiversity data.</li>
<li><a href="https://kerdoc.cica.es/">Global Climate Monitor</a> -
Global open climate data.</li>
<li><a
href="https://datasets.wri.org/dataset/globalpowerplantdatabase">Global
power plant database</a> - Open source database of power plants.</li>
<li><a href="https://galileo.gisdata.io/">Galileo</a> - Geospatial data
discovery and management platform.</li>
<li><a
href="https://ec.europa.eu/eurostat/web/gisco/geodata/basic-services#Healthcare">Healthcare
Services in Europe</a> - Locations of healthcare services in
Europe.</li>
<li><a href="https://www.hydrosheds.org/">HydroSHEDS</a> - Consistent
hydrographic data for global applications.</li>
<li><a href="https://search.earthdata.nasa.gov/search">NASA Earth
Data</a> - Search, discover, visualize, refine, and access NASA Earth
Observation data in your browser with Earthdata Search.</li>
<li><a href="https://neo.gsfc.nasa.gov/">NASA Earth Observations</a> -
Browse and download satellite data imagery.</li>
<li><a href="https://www.naturalearthdata.com/">Natural Earth</a> - Free
vector and raster map data.</li>
<li><a href="https://openaerialmap.org/">OpenAerialMap</a> - Open
service for accessing licensed imagery.</li>
<li><a href="https://openmaptiles.org/">OpenMapTiles</a> - Free
OpenStreetMap Vector Tiles.</li>
<li><a
href="https://www.geofabrik.de/data/download.html">OpenStreetMap</a> -
Free, world-wide geographic data set.</li>
<li><a href="https://opentopography.org/">Open Topography</a> -
High-resolution topography data and tools.</li>
<li><a href="https://github.com/teamookla/ookla-open-data">Ookla
internet speed data</a> - Global network performance metrics.</li>
<li><a href="https://github.com/sentinel-hub/custom-scripts">Sentinel
Hub custom scripts</a> - Repository of custom scripts for Sentinel
Hub.</li>
<li><a href="https://earthexplorer.usgs.gov/">USGS Earth Explorer</a> -
Query and order satellite images and more.</li>
<li><a href="https://github.com/topojson/world-atlas">World Atlas
TopoJSON</a> - Natural Earth’s vector data as TopoJSON.</li>
<li><a href="https://data.worldbank.org/">World Bank</a> - Free access
to global development data.</li>
<li><a href="https://www.worldpop.org/">WorldPop</a> - Open access
spatial demographic datasets.</li>
</ul>
<h3 id="web-apis">Web APIs</h3>
<p>Restful APIs for consuming geospatial data on the fly:</p>
<ul>
<li><a
href="https://gisco-services.ec.europa.eu/addressapi/docs/">Address
API</a> - Pan-European address data with geocoding and
reverse-geocoding.</li>
<li><a href="https://api.gouv.fr/les-api/api-geo">API Geo</a> - Official
French geographical data API.</li>
<li><a
href="https://developers.arcgis.com/rest/location-based-services/">ArcGIS
location services</a> - Basemaps, Geocoding, Places, routing, and
GeoEnrichment.</li>
<li><a href="https://www.getthedata.com/bng2latlong">bng2latlong</a> -
Converts British National Grid to latitude and longitude.</li>
<li><a
href="https://docs.breezometer.com/api-documentation/introduction/">breezometer</a>
- Air Quality, Weather, Pollen, and Environmental data.</li>
<li><a href="https://countrystatecity.in/">Country State City API</a> -
Database of city, state, and country data.</li>
<li><a href="https://apidocs.geoapify.com/">Geoapify</a> - Geospatial
services such as maps, geocoding, and routing.</li>
<li><a
href="http://www.geonames.org/export/web-services.html">geonames</a> -
Supports placename lookup and reverse geocoding.</li>
<li><a href="https://geocode.xyz/">Geocode.xyz</a> - Reverse geocoding,
forward geocoding, and geoparsing API.</li>
<li><a href="https://gisco-services.ec.europa.eu/distribution/v2/">GISCO
data distribution API</a> - European Commission data source for
administrative regions and boundaries.</li>
<li><a
href="https://www.graphhopper.com/route-optimization/">GraphHopper Route
Optimization API</a> - Solves various vehicle routing problems.</li>
<li><a
href="https://github.com/movebank/movebank-api-doc">movebank-api</a> -
Platform for animal tracking data.</li>
<li><a href="https://openaq.org/">OpenAQ</a> - Largest open-source air
quality data platform.</li>
<li><a href="https://openchargemap.org">Open Charge Map API</a> - Public
registry of electric vehicle charging locations.</li>
<li><a href="https://opencagedata.com/api">OpenCage</a> - Forward and
reverse geocoding API using open data.</li>
<li><a href="https://open-meteo.com/">Open-Meteo</a> - Global weather
forecast API.</li>
<li><a href="http://open-notify.org/Open-Notify-API/">Open Notify</a> -
ISS location and number of people in space.</li>
<li><a href="https://www.getthedata.com/open-postcode-geo-api">Open
Postcode Geo API</a> - British postcodes with geospatial data.</li>
<li><a
href="https://openskynetwork.github.io/opensky-api/rest.html">OpenSky
API</a> - Retrieve live airspace information.</li>
<li><a
href="https://openrouteservice.org/dev/#/api-docs">openrouteservice</a>
- Directions, isochrones, and geocoding services.</li>
<li><a
href="https://wiki.openstreetmap.org/wiki/Overpass_API">OpenStreetMap</a>
- Retrieve OpenStreetMap data via Overpass API.</li>
<li><a href="https://www.opentopodata.org/">opentopodata API</a> - Open
Topography Data API.</li>
<li><a href="https://wiki.openstreetmap.org/wiki/Overpass_API">Overpass
API</a> - Retrieve OpenStreetMap data.</li>
<li><a href="https://www.rainviewer.com/api.html">RainViewer</a> - Free
weather radar and satellite data API.</li>
<li><a href="https://restcountries.com/">REST countries</a> - Get
country information via a RESTful API.</li>
<li><a href="https://sunrise-sunset.org">Sunrise and sunset</a> -
Provides sunset and sunrise times for locations.</li>
<li><a
href="https://developer.tomtom.com/api-explorer-index/documentation/product-information/introduction">TomTom</a>
- Geocoding, routing, traffic, and more.</li>
<li><a href="https://earthquake.usgs.gov/fdsnws/event/1/">USGS
earthquake data</a> - Search earthquake data by various parameters.</li>
<li><a href="https://developer.what3words.com/public-api">what3words</a>
- Converts 3-word addresses to coordinates.</li>
</ul>
<h3 id="collections">Collections</h3>
<p>Compilations and repositories of open geospatial datasets: - <a
href="https://github.com/awesomedata/awesome-public-datasets">awesome-public-datasets</a>
- An awesome repository full of open datasets from an abundance of
different categories. - <a href="https://freegisdata.rtwilson.com/">Free
GIS data</a> - Links to over 500 sites providing freely available
geographic datasets. - <a
href="https://github.com/public-apis-dev/public-apis">Public APIs</a> -
A collective list of free APIs for use in software and web development.
- <a href="https://www.wri.org/data">WRI</a> - World Resources
Institute.</p>
<h2 id="notebooks">📒 Notebooks</h2>
<p>Some JavaScript notebooks to help you code:</p>
<h3 id="beginner">Beginner</h3>
<ul>
<li><a
href="https://observablehq.com/@observablehq/hello-leaflet">Hello,
Leaflet</a> - ObservableHQ.</li>
<li><a
href="https://observablehq.com/@neocartocnrs/hello-bertin-js">Hello,
Bertin.js</a> - Nicolas Lambert.</li>
<li><a
href="https://observablehq.com/@observablehq/hello-mapbox-gl">Hello,
Mapbox GL</a> - Mike Bostock.</li>
<li><a
href="https://observablehq.com/@joewdavies/eurostat-map-js">Hello,
eurostat-map.js</a> - Joe Davies.</li>
<li><a
href="https://observablehq.com/@neocartocnrs/hello-gridviz">Hello,
gridviz</a> - Nicolas Lambert.</li>
</ul>
<h3 id="intermediate">Intermediate</h3>
<ul>
<li><a href="https://observablehq.com/@d3/world-tour">World Tour</a> -
D3.</li>
<li><a href="https://observablehq.com/@d3/choropleth">Choropleth</a> -
D3.</li>
<li><a href="https://observablehq.com/@jgaffuri/nice-scale-bar">How to
make a nice scalebar</a> - Julien Gaffuri.</li>
<li><a
href="https://observablehq.com/@chriszrc/gischat-twitter-users-with-mapboxgl-globe-projection">#GISCHAT
Twitter Users with MapBoxGL - Globe Projection</a> - Chris Marx.</li>
<li><a
href="https://observablehq.com/@larsvers/hexgrid-maps-with-d3-hexgrid">Hexgrid
maps with d3-hexgrid</a> - Larsvers.</li>
<li><a
href="https://observablehq.com/@stephanietuerk/bivariate-choropleth-with-continuous-color-scales">Bivariate
Choropleth with Continuous Color Scales</a> - Stephanie Tuerk.</li>
<li><a
href="https://observablehq.com/@joewdavies/visualizing-eurostat-grid-data-using-three-js-d3">Visualizing
Eurostat grid data using Three.js &amp; D3</a> - Joe Davies.</li>
</ul>
<h3 id="advanced">Advanced</h3>
<ul>
<li><a
href="https://observablehq.com/@karimdouieb/try-to-impeach-this-challenge-accepted">Try
to impeach this? Challenge accepted!</a> - Karim Douieb.</li>
<li><a
href="https://observablehq.com/@neocartocnrs/bars-pubs-in-paris">Bars
and pubs in Paris</a> - Nicolas Lambert.</li>
<li><a
href="https://observablehq.com/@karimdouieb/brussels-streets-gender-inequality">Brussels
Street Gender Inequality</a> - Karim Douieb.</li>
<li><a
href="https://observablehq.com/@bmschmidt/animating-voting-maps-with-regl">Animating
voting maps with regl</a> - Benjamin Schmidt.</li>
<li><a
href="https://observablehq.com/@jgaffuri/election-map-dorling-striped-circles">Election
maps as dorling striped circles</a> - Julien Gaffuri.</li>
<li><a
href="https://observablehq.com/@kylebarron/geoparquet-on-the-web">GeoParquet
on the web</a> - Kyle Barron.</li>
<li><a
href="https://observablehq.com/@dkaoster/interactive-regl-wind-demo">Interactive
Regl wind demo</a> - Daniel Kao.</li>
<li><a
href="https://observablehq.com/@adrianblanco/dorling-cartogram-of-the-spanish-presidential-election">Dorling
cartogram of the Spanish Presidential election</a> - Adrián Blanco.</li>
<li><a
href="https://observablehq.com/@joewdavies/visualizing-earthquakes-with-three-js">Visualizing
earthquakes with Three.js</a> - Joe Davies.</li>
<li><a
href="https://observablehq.com/@kylebarron/geoarrow-and-geoparquet-in-deck-gl">GeoArrow
and GeoParquet in deck.gl</a> - Kyle Barron.</li>
</ul>
<h2 id="world_map-web-maps">:world_map: Web maps</h2>
<p>A compilation of interesting web maps:</p>
<ul>
<li><a href="https://tjukanovt.github.io/notable-people">Map of notable
people</a> - Topi Tjukanov.</li>
<li><a href="https://www.submarinecablemap.com/">Submarine cable map</a>
- TeleGeography.</li>
<li><a href="https://radio.garden/">Radio Garden</a> - 3D Globe Radio
Tuner.</li>
<li><a
href="https://www.nytimes.com/interactive/2018/10/12/us/map-of-every-building-in-the-united-states.html">Map
of every building in the United States</a> - New York Times.</li>
<li><a href="https://orbis.stanford.edu/">Map of the Roman transport
network</a> - The Stanford Geospatial Network Model of the Roman
World.</li>
<li><a href="https://github.com/mapbox/webgl-wind">Webgl Wind</a> - A
WebGL-powered visualization of wind power. Capable of rendering up to 1
million wind particles at 60fps.</li>
<li><a href="https://ec.europa.eu/statistical-atlas/viewer">Statistical
Atlas</a> - A leaflet-powered atlas showcasing Eurostat’s
statistics.</li>
<li><a href="https://shademap.app/">ShadeMap</a> - Every mountain,
building and tree shadow in the world simulated for any date and
time.</li>
<li><a href="https://climatearchive.org/">ClimateArchive</a> - An
interactive visualisation of climate model data across time and
space.</li>
<li><a href="https://www.oldmapsonline.org/">Old Maps Online</a> -
Browse historical places and search for old maps with timeline.</li>
<li><a href="https://www.chronotrains.com">chronotrains</a> - Where can
you go by train in 8h?</li>
</ul>
<h2 id="web-apps">🌐 Web apps</h2>
<p>Plug-and-play geospatial web apps:</p>
<ul>
<li><a href="https://anvaka.github.io/city-roads/">city roads</a> -
Render every single road in any city at once.</li>
<li><a href="https://github.com/datawrapper/datawrapper">Datawrapper</a>
- Create charts, maps, and tables.</li>
<li><a href="https://github.com/Azgaar/Fantasy-Map-Generator">Fantasy
Map Generator</a> - Free web application for creating and editing
fantasy maps.</li>
<li><a href="http://app.geotiff.io/">geotiff.io</a> - Provides quick
access to easy-to-use raster processing.</li>
<li><a href="https://gisco-services.ec.europa.eu/image/">IMAGE</a> -
Tool for generating thematic maps.</li>
<li><a href="https://kepler.gl/demo">Kepler</a> - A powerful open-source
geospatial analysis tool for large-scale datasets.</li>
<li><a href="https://magrit.cnrs.fr/">magrit</a> - An online application
for thematic mapping.</li>
<li><a href="https://mapshaper.org/">mapshaper</a> - Online editor for
map data.</li>
<li><a href="https://maponshirt.com">MapOnShirt</a> - Create colorful
designs from maps and turn them into products.</li>
<li><a href="https://github.com/maputnik/editor">Maputnik</a> - Free and
open visual editor for Mapbox GL styles.</li>
<li><a href="https://github.com/alyssaxuu/mapus">mapus</a> - Tool for
collaboratively exploring and annotating maps.</li>
<li><a href="https://github.com/anvaka/peak-map">Peak Map</a> -
Visualizes elevation of any area on the map with filled area
charts.</li>
<li><a href="https://github.com/verma/plasio">Plasio</a> - Drag-n-drop
in-browser LAS/LAZ point cloud viewer.</li>
<li><a href="https://storymap.knightlab.com/">StoryMap JS</a> -
Open-source alternative to ESRI’s Story Map application.</li>
<li><a href="https://topoexport.com">TopoExport</a> - Export 2D contour
lines and 3D topography using open-source datasets.</li>
<li><a href="https://github.com/umap-project/umap">uMap</a> - Create
maps with OpenStreetMap layers and embed them in your site.</li>
<li><a href="http://bboxfinder.com/">bboxFinder</a> - Helper page for
finding bbox values from a map.</li>
<li><a href="https://geojson.io/">geojson.io</a> - A quick, simple tool
for creating, viewing, and sharing spatial data.</li>
<li><a href="https://geojsonlint.com/">GeoJSONLint</a> - Use this site
to validate and view your GeoJSON.</li>
</ul>
<h2 id="colour-advice">🎨 Colour advice</h2>
<p>Colour usage is very important in data visualisation and cartography.
Here are some tools to help you choose the best colours for your
maps:</p>
<ul>
<li><a href="https://github.com/CartoDB/CartoColor">CartoColor</a> - A
set of custom color palettes built on top of standards for color use on
maps.</li>
<li><a href="https://gka.github.io/palettes/#/9">Chroma.js Color Palette
Helper</a> - Chroma.js-powered tool for mastering multi-hued, multi-stop
color scales.</li>
<li><a href="https://colorbrewer2.org/">ColorBrewer</a> - Colour advice
for maps, based on Dr. Cynthia Brewer’s research.</li>
<li><a href="https://github.com/riatelab/dicopal.js">Dicopal.js</a> -
Discrete color palettes for JavaScript.</li>
<li><a href="https://github.com/riccardoscalco/textures">Textures.js</a>
- JavaScript library for creating SVG patterns, designed for data
visualization.</li>
<li><a
href="https://www.susielu.com/data-viz/viz-palette">viz-palette</a> -
Tool optimized for tweaking, copying, and pasting colors in and out of
JavaScript.</li>
</ul>
<h2 id="icons">📍 Icons</h2>
<p>Icons to add to your GIS websites: - <a
href="https://github.com/Viglino/font-gis">font-GIS</a> - A very very
cool icon font set for use with GIS and spatial analysis tools. - <a
href="https://mapicons.mapsmarker.com/">Map Icons Collection</a> - A set
of more than 1000 free and customizable icons to use as placemarks for
your POI (Point of Interests) locations on your maps. - <a
href="https://fonts.google.com/icons?icon.query=map">Material
Symbols</a> - Over 2,990 glyphs in a single font file with a wide range
of design variants. - <a
href="https://apidocs.geoapify.com/playground/icon/">Geoapify map marker
playground</a> - The Marker Icon API lets you create beautiful icons and
use them as Map Markers.</p>
<h2 id="videos">📺 Videos</h2>
<p>Videos of web mapping presentations and tutorials:</p>
<ul>
<li><a href="https://www.youtube.com/watch?v=nZaZ2dB6pow">Mapping
Geolocation with Leaflet.js - Working with Data and APIs in
JavaScript</a> - The Coding Train.</li>
<li><a href="https://www.youtube.com/watch?v=PpWAKVjPlgU">10 Maps, and
the Tech and Stories Behind Them</a> - Maarten Lambrechts.</li>
<li><a
href="https://www.youtube.com/watch?v=vM8M4QloVL0&amp;t=4418s">Intermediate
Three.js Tutorial - Create a Globe with Custom Shaders</a> - Chris
Courses.</li>
<li><a href="https://www.youtube.com/watch?v=e803ElX5Q_c">Statistical
Cartography - Design principles for statistical map design</a> - Julien
Gaffuri.</li>
</ul>
<h2 id="further-reading">📚 Further reading</h2>
<ul>
<li><a href="https://clauswilke.com/dataviz/">Fundamentals of Data
Visualization</a> - Claus O. Wilke.</li>
<li><a href="https://github.com/uwcartlab/webmapping">A Workbook for
Interactive Cartography and Visualization on the Open Web</a> - Robert
Roth, Carl Sack, Gareth Baldrica-Franklin, Yuying Chen, Rich Donohue,
Lily Houtman, Tim Prestby, Robin Tolochko, Nick Underwood.</li>
<li><a
href="https://www.esri.com/en-us/esri-press/browse/thematic-mapping">Thematic
Mapping: 101 Inspiring Ways to Visualise Empirical Data</a> - Kenneth
Field.</li>
<li><a
href="https://colorbrewer2.org/learnmore/schemes_full.html#qualitative">Color
use guidelines for mapping and visualization</a> - Cynthia A.
Brewer.</li>
<li><a href="https://geonetworks.github.io/">Geospatial Network
Visualization</a> - A collection of visualization techniques for
geospatial network data.</li>
</ul>
<h2 id="contributing">Contributing</h2>
<p>Contributions of any kind are welcome, just follow the <a
href="./CONTRIBUTING.md">guidelines</a> by either:</p>
<ul>
<li>Filling a <a
href="https://github.com/joewdavies/awesome-frontend-gis/issues/new/">suggestion
issue</a> (easier).</li>
<li>Opening a <a
href="https://github.com/joewdavies/awesome-frontend-gis/compare">pull
request</a>.</li>
</ul>
<hr />
<p>If you have any questions about this list, please don’t hesitate to
contact me <a href="https://twitter.com/joewdavies"><span
class="citation" data-cites="joewdavies">@joewdavies</span></a> on X
(formerly Twitter) or <a
href="https://github.com/joewdavies/awesome-frontend-gis/issues/new">open
a GitHub issue</a>.</p>
<p><a
href="https://github.com/joewdavies/awesome-frontend-gis">frontendgis.md
Github</a></p>