Use Leaflet.js to create custom maps

While looking for a solution to display a map embedded into a web page, I came across several options. My initial idea was to use something like Google Maps or Bing Maps. Both wanted me to sign up for a developer account to get access to their APIs. Additionally, they often impose extreme rate limiting or superimpose intrusive watermarks unless you upgrade to a paid account.

OpenStreetMap seemed like a great alternative. Over the past few years, its maps have greatly increased in quality. Its open licensing and public tileset make it easy to include in any project. I initially struggled to find any quick examples of how to utilize it in browser with Javascript, but I came across Leaflet.js and it seemed like a great fit. It is open source, lightweight, and mobile ready.

Below is a quick example of what I ended up using it for.  You initialize the map with a location ([38, -97] is the geographic center of the US), zoom level (4 seems to fit the entire US), and a tileset (OpenStreetMap). All that is needed to add a marker is a to call the marker function with decimal GPS coordinates.