Feature Comparison of Online Mapping Libraries

Comparison: leaflet, mapbox, openlayers, d3, google maps

Feature Comparison

Let’s have a closer look at these features, their availability and their easy of use.

I refer to all the libraries by their name as follow:

d3.js = D3
Mapbox GL JS = Mapbox
OpenLayers = Openlayers
Leaflet = Leaflet
Google Maps JavaScript API = Google Maps

Projections

Does the library support different projections?

d3mapboxOpenLayersLeafletGoogle Maps
Support
Ease of use

D3

Does support projections. They prebuilt 13 projections you can find here but you can roll your own projection as well via
Support:  Yes
Ease of use:  Easy
Example:  https://bl.ocks.org/d3indepth/f7ece0ab9a3df06a8cecd2c0e33e54ef

Mapbox

No support for other projections than the mercator projection. But a bird told me that this might be coming soon. :)
Support:  No

OpenLayers

Does support other projections via EPSG codes. You need to know the EPSG code, the projection definition and use proj4
Support:  Yes
Ease of use:  Medium
Example 1:  https://openlayers.org/en/latest/examples/reprojection-by-code.html
Example 2:  https://openlayers.org/en/latest/doc/tutorials/raster-reprojection.html

Leaflet

You can use projections in leaflet via this plugin:
https://kartena.github.io/Proj4Leaflet/
Support:  Yes, via Plugin
Ease of use:  Medium
Example:  https://bl.ocks.org/d3indepth/f7ece0ab9a3df06a8cecd2c0e33e54ef

Google Maps

You can use custom projections with google maps but it is very complex.

A Projection implementation must provide not only a mapping from one coordinate system to another, but a bi-directional mapping. That is, you must define how to translate from Earth coordinates (LatLng objects) to the Projection class’s world coordinate system, and vice versa. Google Maps uses the Mercator projection to create its maps from geographic data and convert events on the map into geographic coordinates.

So you need to do all the heavy lifting!

Support:  Yes
Ease of use:  Hard
Example:  https://developers.google.com/maps/documentation/javascript/examples/map-projection-simple

Dynamic vector styling

Can you style your layers depending on values of your features?

d3mapboxOpenLayersLeafletGoogle Maps
Support
Ease of use

D3

Yes. And very easily. You can use standard SVG and CSS to style your map and you have full control over everything.
Support:  Yes
Ease of use:  Easy
Example:  https://observablehq.com/@d3/choropleth

Mapbox

Yes, not as easy and you don’t have full control. Check out the Mapbox Style Spec for more details how to style your layers.
Support:  Yes
Ease of use:  Medium
Example 1:  https://docs.mapbox.com/mapbox-gl-js/example/data-driven-circle-colors/
Example 2:  https://docs.mapbox.com/mapbox-gl-js/style-spec/

OpenLayers

Using the style function and the Style class you can style elements. Not as powerful as the Mapbox Style Spec and you need to write more code
Support:  Yes
Ease of use:  Medium
Example:  https://openlayers.org/workshop/en/vector/style.html

Leaflet

Yes, leaflet is a mix from mapbox and open layers. You can use a style function and use some default elements
Support:  Yes
Ease of use:  Medium
Example:  https://leafletjs.com/examples/choropleth/

Google Maps

Similar to the other libraries using a style option
Support:  Yes
Ease of use:  Medium
Example:  https://developers.google.com/maps/documentation/javascript/reference/data#Data.StyleOptions

Default Basemaps

Does the library ship a default basemap you can use right away.

d3mapboxOpenLayersLeafletGoogle Maps
Support
Ease of use

D3

Check out the next section how to use a basemap
Support:  No

Mapbox

Yes, but you need to sign up for an API token to use it.
Support:  Yes
Ease of use:  Easy
Example:  https://docs.mapbox.com/mapbox-gl-js/example/simple-map/

OpenLayers

Support:  Yes, default OSM
Ease of use:  Easy
Example:  

Leaflet

Support:  Yes, default OSM
Ease of use:  Easy
Example:  

Google Maps

Yes, the default Google Map. To use google maps you need to sign up for a API key anyway.
Support:  Yes
Ease of use:  Easy
Example 1:  https://developers.google.com/maps/documentation/javascript/maptypes
Example 2:  https://developers.google.com/maps/documentation/javascript/styling

Use your own Basemap

Can you define a different basemap than the default?

d3mapboxOpenLayersLeafletGoogle Maps
Support
Ease of use

D3

Yes. you can use whatever you want.
Support:  Yes
Ease of use:  Medium
Example:  https://observablehq.com/@d3/vector-tiles

Mapbox

Yes. you can use whatever you want.
Support:  Yes
Ease of use:  Easy
Example:  https://docs.mapbox.com/mapbox-gl-js/example/custom-style-id/

OpenLayers

Support:  Yes
Ease of use:  Easy
Example:  

Leaflet

You can use whatever you want.
Support:  Yes
Ease of use:  Easy
Example:  

Google Maps

No! You can only use Google Maps basemap. But you can style it.
Support:  No

Marker clustering

Are you able to cluster markers based on their location and show the amount of markers

d3mapboxOpenLayersLeafletGoogle Maps
Support
Ease of use

d3

Not as easy as you might think.
Support:  Yes
Ease of use:  Hard
Example:  https://bl.ocks.org/Andrew-Reid/21ff4b57267fa91dacc57ef1ccb7afb3

Mapbox

Support:  Yes
Ease of use:  Easy
Example:  https://docs.mapbox.com/mapbox-gl-js/example/cluster/

OpenLayers

Support:  Yes
Ease of use:  Easy
Example:  https://openlayers.org/en/latest/examples/cluster.html

Leaflet

Support:  Yes, via plugin
Ease of use:  Easy
Example:  https://github.com/Leaflet/Leaflet.markercluster

Google Maps

More
Support:  Yes
Ease of use:  Easy
Example:  https://developers.google.com/maps/documentation/javascript/marker-clustering

Custom Tooltip

d3mapboxOpenLayersLeafletGoogle Maps
Support
Ease of use

d3

Very easily done via html
Support:  Yes
Ease of use:  Easy
Example:  

Mapbox

Support:  Yes
Ease of use:  Easy
Example:  https://docs.mapbox.com/mapbox-gl-js/example/popup-on-click/

OpenLayers

Support:  Yes
Ease of use:  Easy
Example:  

Leaflet

Support:  Yes
Ease of use:  Easy
Example:  

Google Maps

Support:  Yes
Ease of use:  Easy
Example:  

User Drawing

d3mapboxOpenLayersLeafletGoogle Maps
Support
Ease of use

d3

User drawing
Support:  No

Mapbox

Support:  Yes, via plugin
Ease of use:  Easy
Example:  

OpenLayers

Support:  Yes
Ease of use:  Easy
Example:  https://openlayers.org/en/latest/examples/draw-features.html

Leaflet

Support:  Yes, via plugin
Ease of use:  Easy
Example:  

Google Maps

Support:  Yes
Ease of use:  Easy
Example:  https://developers.google.com/maps/documentation/javascript/examples/drawing-tools

Geocoder

Does the library provide a geocoder for the user to search for addresses and center on the map?

d3mapboxOpenLayersLeafletGoogle Maps
Support
Ease of use

d3

No geocoder integrsted, you need to use your own solution
Support:  No

Mapbox

Support:  Yes
Ease of use:  Easy
Example:  https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-geocoder/

OpenLayers

Support:  Yes, via plugin
Ease of use:  Easy
Example:  https://github.com/jonataswalker/ol-geocoder

Leaflet

Support:  Yes, via plugin
Ease of use:  Easy
Example:  https://github.com/perliedman/leaflet-control-geocoder

Google Maps

Support:  Yes
Ease of use:  Easy
Example:  https://developers.google.com/maps/documentation/javascript/geocoding

Image Tiles

Support for integrating images via a tile server. For example satellite images from sentinel data.

d3mapboxOpenLayersLeafletGoogle Maps
Support
Ease of use

d3

More explanation
Support:  Yes
Ease of use:  Medium
Example 1:  https://observablehq.com/@d3/raster-tiles
Example 2:  https://observablehq.com/@d3/raster-tiles-canvas

Mapbox

Support:  Yes
Ease of use:  Easy
Example:  https://docs.mapbox.com/mapbox-gl-js/example/map-tiles/

OpenLayers

Support:  Yes
Ease of use:  Easy
Example:  https://openlayers.org/en/latest/examples/xyz-retina.html

Leaflet

Support:  Yes
Ease of use:  Easy
Example:  

Google Maps

Support:  Yes
Ease of use:  Easy
Example:  https://developers.google.com/maps/documentation/javascript/examples/maptype-image-overlay

Raster data

Display single raster images. Can you add single images like geotiffs to you map?

d3mapboxOpenLayersLeafletGoogle Maps
Support
Ease of use

d3

If you use geotiff you can integrate your raster files
Support:  Yes, via geotiff
Ease of use:  Medium
Example:  https://observablehq.com/@lenninlasd/isobands-d3-geotiffjs

Mapbox

Support:  Yes
Ease of use:  Easy
Example:  https://docs.mapbox.com/mapbox-gl-js/example/image-on-a-map/

OpenLayers

Support:  Yes
Ease of use:  Easy
Example:  

Leaflet

Support:  Yes
Ease of use:  Easy
Example:  

Google Maps

Support:  Yes
Ease of use:  Hard
Example:  https://developers.google.com/maps/documentation/javascript/examples/overlay-simple

Raster Styling

Can you style raster images within the library? For example on a pixel basis for raster tiles.

d3mapboxOpenLayersLeafletGoogle Maps
Support
Ease of use

d3

If you use geotiff you can style your raster files
Support:  Yes, via geotiff
Ease of use:  Medium
Example:  https://observablehq.com/@d3/geotiff-contours-ii

Mapbox

Support:  No

OpenLayers

Support:  Yes
Ease of use:  Easy
Example:  https://openlayers.org/en/latest/examples/raster.html

Leaflet

Support:  Yes, via plugin
Ease of use:  Easy
Example:  http://geoexamples.com/d3-raster-tools-docs/code_samples/leaflet-raster-page.html

Google Maps

Support:  No

Heatmap

Can you display a heatmap? Can you change the weight?

d3mapboxOpenLayersLeafletGoogle Maps
Support
Ease of use

d3

Not directly a heatmap but you can create something similar.
Support:  Yes
Ease of use:  Medium
Example 1:  https://bl.ocks.org/patricksurry/803a131d4c34fde54b9fbb074341daa5
Example 2:  https://www.visualcinnamon.com/2013/07/self-organizing-maps-creating-hexagonal.html

Mapbox

Support:  Yes
Ease of use:  Easy
Example:  https://docs.mapbox.com/mapbox-gl-js/example/heatmap-layer/

OpenLayers

Support:  Yes
Ease of use:  Easy
Example:  https://openlayers.org/en/latest/examples/heatmap-earthquakes.html

Leaflet

You need to change your data to make this plugin work for you, but other than that, should be quick to implement.
Support:  Yes, via plugin
Ease of use:  Medium
Example:  https://github.com/Leaflet/Leaflet.heat

Google Maps

The example from google looks way more complicated than it should be.
Support:  Yes
Ease of use:  Easy
Example:  https://developers.google.com/maps/documentation/javascript/examples/layer-heatmap

OGC Services (WMS, WFS)

Can you integrate OGC Services like WMS (Web Mapping Service) or a WFS?

d3mapboxOpenLayersLeafletGoogle Maps
Support
Ease of use

d3

D3 does not directly support OGC services. You need to roll your own solution.
Support:  No

Mapbox

Support:  Yes, only WMS
Ease of use:  Medium
Example:  https://docs.mapbox.com/mapbox-gl-js/example/wms/

OpenLayers

Support:  Yes
Ease of use:  Medium
Example 1:  https://openlayers.org/en/latest/examples/vector-wfs-getfeature.html
Example 2:  https://openlayers.org/en/latest/examples/wms-tiled.html

Leaflet

Support:  Yes, via plugin
Ease of use:  Easy
Example 1:  https://github.com/heigeo/leaflet.wms
Example 2:  https://github.com/Flexberry/Leaflet-WFST

Google Maps

Support:  No

Company support

d3

No direct company support. But the creator works full-time on d3 and other visualization tools like observable.

Mapbox

Yes, company provides basic support. You can pay them for better support.

OpenLayers

Yes, there are external companies who provide support and they employ core contributors.

Leaflet

Unknown

Google Maps

Yes, company offers support.

Open Source Code License

Is the code open source? And does the library state a license?

d3

Open License: BSD 3-Clause “New” or “Revised” License

Mapbox

No Open Source License specified: Copyright © 2016, Mapbox All rights reserved.

OpenLayers

Yes: BSD 2-Clause License

Leaflet

No open source license specified: Copyright © 2010-2018, Vladimir Agafonkin Copyright © 2010-2011, CloudMade All rights reserved.

Google Maps

No, closed source

Written by Mila