Map Library Introduction

Introduction

Hello, I'm an engineer at GameVillage.
In this article, I'd like to share some of the knowledge we've gained during the development of these map services. I will introduce the map libraries.

About Map Libraries

Map Library Trend

Leaflet and Mapbox GL are quite popular. In this article, we'll be looking at these two libraries as well as MapLibre GL, the open-source version of Mapbox GL.

Leaflet

https://leafletjs.com/

Leaflet is a lightweight, open-source JavaScript library for interactive maps. It’s easy to learn and simple to get started with, making it a popular choice for basic map creation.

Advantages

• Since Leaflet relies on HTML/CSS, the learning curve is gentle for those with basic web development knowledge.
• It provides all the essential features needed for basic map creation.

Disadvantages

• Because markers are rendered with HTML, a large number of markers can cause performance issues in the browser.
• Rendering HTML-created markers on a Canvas is challenging.
  • Although there's a plugin called leaflet-markers-canvas, the quality of the markers can degrade.
• Zooming with a touchpad can be jerky
  • https://github.com/Leaflet/Leaflet/issues/4410
  • https://github.com/Leaflet/Leaflet/issues/7476

Mapbox GL

https://www.mapbox.com/

Mapbox GL is a powerful map library that uses vector tiles for rendering maps using WebGL. Originally an open-source project, it transitioned to a proprietary model from version 1.x onwards, leading to the creation of MapLibre GL JS, which we'll discuss later.

Advantages

• Outstanding rendering performance due to the use of WebGL and vector tiles.
• Offers features not available in MapLibre, such as the Search API.
  • https://docs.mapbox.com/api/overview/
• Provides a map editing tool called Mapbox Studio.
• Comprehensive documentation is available, especially useful for optimizing rendering performance.
  • https://docs.mapbox.com/help/troubleshooting/mapbox-gl-js-performance/

Disadvantages

• The learning curve can be steep.
  • Map style specifications: https://docs.mapbox.com/style-spec/guides/
  • Performance optimization: https://docs.mapbox.com/help/troubleshooting/mapbox-gl-js-performance/
• It operates on a pay-as-you-go model (with a free tier), so cost management might be a concern.
  • https://www.mapbox.com/pricing#maps

MapLibre GL JS

https://maplibre.org/

As mentioned earlier, MapLibre GL JS is an open-source fork of Mapbox GL version 1.x. Like Mapbox, it uses WebGL for rendering and supports vector tiles.

Advantages

• High rendering performance.
• Covers most essential features required for map creation.

Disadvantages

• The learning curve is somewhat steep.
  • Map style specifications: https://maplibre.org/maplibre-style-spec/
  • Performance optimization can be challenging.
• Lacks some of the advanced features available in Mapbox.

Choosing a Library

If you're dealing with a small amount of data and rendering performance isn't a major concern → Leaflet

If you're handling large amounts of data and need high performance → MapLibre GL

If MapLibre GL doesn't meet your needs → Mapbox GL

This approach provides a good starting point based on your specific requirements.