Maps are nice – and sometimes necessary – for many websites. But creating beautiful, usable, accurate maps can be tricky. There is a thicket of concepts, tools and data sources to navigate.
Here’s our quick guide to some of the useful tools for web mapping out there to help web developers work with spatial data.
As a note – here we’ll present resources roughly in line with the path spatial data takes from its origin to a user’s browser from the perspective of a full stack web developer: collect – manipulate – analyse – store – access – visualise. Also, this list is not exhaustive! Loads of useful tools for web mapping exist – this is more of a windscreen tour.
Data comes from somewhere, and spatial data is no different. Exactly how spatial data is captured and created is beyond the scope of this post – all we need to know is that raster images and vector features can be downloaded or fetched from several reliable, authoritative sources.
OS Maps API. The Maps API serves detailed and scalable raster backdrop maps in four colour palettes – ‘Roads’, ‘Outdoor’, ‘Light’ and ‘Leisure’. The service is offered in Web Map Tile Service (WMTS) and ZXY protocols, and can be connected to maps built with Leaflet, Mapbox GL JS, OpenLayers, and other libraries.
OS Vector Tile API. We serve vector tiles via our Vector Tile API, offering scalable, customisable and lightweight mapping data for users to visualise with various mapping libraries.
Data prep is often a major step in creating a web app. Working with spatial data can be tricky, especially for developers less familiar. These tools can help speed up the job.
mapshaper.org. A handy in-browser tool for working with spatial data. Users upload .shp, GeoJSON, and other data formats, then can manipulate the attributes and geometries. The Export function lets users select the output format. Very useful for quick manipulations, especially with smaller datasets.
QGIS. QGIS is an open source desktop GIS (geographic information system) program. With QGIS, users can load, visualize, manipulate and export vector and raster data – including into GeoJSON and other formats.
GDAL. The Geospatial Data Abstraction Library really deserves to stand on its own – it is an incredibly powerful tool to work with both raster and vector data. Many geospatial tools are built on top of GDAL (including QGIS). With the library developers can manipulate spatial data in a very sophisticated way – but it is quite a technical tool to use.
toGeoJSON. A quick JS library to convert KML and GPX to GeoJSON on the command line, in with Node.js or in the browser. From Mapbox.
TopoJSON. Vector datasets can be quite large – making websites slower and the web developer’s life more difficult. TopoJSON helps by reducing the size of GeoJSON files by efficiently describing line segments (arcs) so the same lines don’t appear twice in the dataset. Note – to use TopoJSON you’ll need to also use the TopoJSON client, to convert back to GeoJSON.
Again, web developers tend to work with GeoJSON – so our focus will be managing these files.
GeoJSONLint. For checking validity of GeoJSON objects.
GeoJSON-Validation. A npm module to check validity of GeoJSON. Especially useful for validating user-uploaded files.
geojson-vt. Create vector tiles from GeoJSON data efficiently on the fly.
Spatial datasets require specialised databases to efficiently store and access. Most notably, spatial queries enable developers to access records based on some spatial dimension – selecting points that are contained within a polygon, for example, or lines that intersect another line.
PostGIS. PostgreSQL, with the PostGIS extension, is a commonly used relational database for spatial data. Well tested, large community, SQL.
SpatiaLite. Like PostGIS, SpatiaLite extends SQLite to support spatial queries.
Mapbox. With Mapbox, users can upload spatial data, which is stored in a way that it can be served to a browser. With Mapbox Studio users can create custom map styles for their location data.
Carto. Carto is a location intelligence platform with tools to ingest, enrich, analyse, visualise and integrate spatial data.
MongoDB. This NoSQL database supports geospatial queries.
GeoDjango. For developers running a Django back end, GeoDjango extends the framework to work with geographic data. Designed to connect to a geographic database like PostGIS or SpatiaLite.
Mapbox GL JS. Mapbox GL JS lets web developers build customizable, interactive vector maps, rendered using WebGL. This gives developers the option the customize styling and offers a smooth, impressive user experience, including 3D effects. GL JS fits into the Mapbox ecosystem.
OpenLayers. OpenLayers is another library for creating dynamic, interactive maps in the browser. The library handles both raster and vector tiles and can visualize spatial data from various formats, like GeoJSON, KML, GML and others.
d3.js. Data-Driven Documents (D3) is an incredibly powerful library for working with data in the browser. The library excels as a way to create interactive geographic maps and visualizations – supported by a large community and range of example code snippets.
Geoblaze. Extending geotiff.js, Geoblaze enables users to analyse and visualize raster data in the browser or in NodeJS.
Observable. Observable is a web-based notebook for exploring and visualizing data. Powerful – well worth a look.
Colorbrewer. Created by a cartographer who has extensively researched how to use colour on maps, Colorbrewer provides various colour palettes for map designers.
Adobe Color. A tool to generate colour palettes, including various schemes and hex code outputs.
OS Colour Palette. Ordnance Survey cartographers have created a colour scheme to be used on OS maps, made available in the OS GeoDataViz toolkit on Github.
Mapbox Maki. From Mapbox, Maki is a set of vector icons specifically for map designers – beautiful, with lots of icons you don’t find elsewhere.
Font Awesome. Another vector icon pack – with a free option.