Introduction

So far, we have investigated various ways to create and customize maps. At the beginning, we used the Mapbox user interface to create some simple styling on the maps, and then we explored recipes to utilize Mapbox services using PHP and Node.js. In the previous chapter, we also introduced CartoCSS, the stylesheet language that will help us to customize a map with absolute control.

None of the recipes, however, covered how to build dynamic maps and display features, such as markers, on the fly. This is what we will do in this chapter, and our backing technology is a JavaScript framework called Mapbox.js.

Mapbox.js inherits from another framework called Leaflet. Leaflet was created by Vladimir Agafonkin and various other contributors, and it's extremely popular and simple to integrate and use. It takes advantage of HTML5 and CSS3 in modern browsers but is also compatible with older ones.

Leaflet's features include covering, displaying, and overlaying layers and creating markers,...