Introduction to Leaflet.js

Summary

There are numerous ways to host maps online, from free systems such as Google Maps to subscription products that can cost thousands of dollars per year. This tutorial builds upon our teaching modules that explored Google My Maps and Google Earth. In it, I will introduce Leaflet.js—a javascript-based program for hosting maps on your website.

Leaflet.js is open source and provides quite a bit of functionality that goes beyond the basic features of Google Maps. And, for those who wish to host maps on their own websites, it’s a relatively simple and low-cost option.

In this tutorial, we walk through a series of steps to understand the basics of Leaflet.js. The tutorial provides an example of how to create a basic map using a georectified historical map from MapWarper and a kml layer that we create in Google My Maps.

What is Leaflet.js?

Leaflet.js is an open source javascript library that helps users create interactive maps. There are a number of plugins that extend the interactivity and functionality of your maps.

Getting Started with Leaflet.JS

 

Using GeoJSON.io to Convert a KML (or csv) File to GeoJSON Format for Use with Leaflet.JS