Over the past two years, I’ve focused on creating the documentation for the MapTiler SDK, an open-source JavaScript library designed to extend the functionality of the MapLibre SDK and simplify its use. I aimed to create a comprehensive resource with practical examples for building web maps.

This summer, I shared the documentation through a series of tutorials on social media under the #SummerOfMaps hashtag. Each week, I covered a new topic with seven examples.

Following the series from start to finish provides a solid foundation for building web maps, even if you have no prior experience, so I have gathered them all here in one place for you to work through!

Warm-up: What are web maps and how do they work

The week before the launch, I shared a few articles and videos created by my colleagues. These resources cover the theoretical foundations of web maps, explaining what they are, how they function, and the underlying mathematics that makes them work.

How to add a map to the web; the basics

In the first week, I covered the basics of adding a map to a webpage. The only prerequisites were a basic understanding of JavaScript and HTML—no prior experience with web maps or map libraries was necessary.

Pinpoint locations with markers

A common feature of web maps is the marker, which indicates the location of specific elements. It could be a basic pin, a custom icon, an image, or something that reveals additional data when clicked. Markers can also connect to external data sources to load information dynamically. Throughout the tutorials, you'll learn how to implement each of these options.

Present data as points on a map

Points in web maps are used to represent individual data elements. You'll learn how to display points on a map, apply styling based on their attributes, and group them into clusters for easier visualization of large datasets. Additionally, you’ll explore how to convert point data into heatmaps, making it easier to spot density patterns and trends at a glance.

Add lines to your web map

Lines are another key element for displaying geographic information. You’ll learn how to add basic lines from GeoJSON, apply gradients, create lines that indicate progress (e.g., tracking a moving object), explore different line types, and style them for better visualization.

Add polygons to your web map

Polygons are another common way to represent geospatial data, often used to show area boundaries or the density of features within a region. You’ll learn how to add basic polygons, fill them with patterns or color gradients based on data intensity, integrate pop-ups, and combine them with points and lines for complex visualizations.

How to adjust map controls

To enhance usability, you'll want to provide your users with intuitive control options. You'll learn how to add basic controls like zoom buttons and tilt & shift controls, as well as more advanced features such as location tracking, a scale bar, a minimap, geocoding search, and even an AR button that allows users to view the map in augmented reality on compatible devices.

Adding additional data sources to a web map

Even though MapTiler provides various data sources, there may be times when you need to incorporate your own data. You'll learn how to add custom layers, including raster layers, hillshade, vector tiles, local GeoJSON files, and even video, giving you full control over the map's content.

Create a weather map

While often viewed as niche, weather maps are surprisingly easy to integrate into your website and are worth experimenting with. In the examples, you’ll learn how to add layers for precipitation, radar data, pressure, temperature, and wind direction. We'll also dive into more advanced use cases where you can combine multiple layers to create richer visualizations.

Complex examples

In the final week, I shifted focus to more complex examples, combining the concepts from earlier tutorials with new techniques. These examples demonstrated how to build tools that could function as a minimal viable product for your future applications.

Do you still want more?

You can find all posts about the #SummerOfMaps series on Twitter/X, LinkedIn, and Facebook. Our documentation and API reference provide even more examples.

If you prefer using Leaflet, OpenLayers, or other map libraries, you’ll find examples for them in the documentation as well.

From zero to web mapping hero in 60 days