How to Make a Map with Leaflet

Make a Web Map with Leaflet is a Glitch challenge which shows you how to make a Leaflet.js powered interactive map. Glitch is a platform for creating, editing and hosting web applications. More importantly for new map makers it provides a neat way to clone and play with the code behind a basic interactive Leaflet map.

If you are an absolute beginner to creating JavaScript powered interactive maps then you might want to take a quick look at the Quick Start Guide on the Leaflet website. This guide introduces you to the concept of linking to the external Leaflet style sheet and Leaflet JavaScript files which you need to create an interactive map with Leaflet.js. The guide also shows you how to create the division element which you need to place the map within your html and then how to add map tiles to your map.

Once you are comfortable with the basics of Leaflet then you can move on to Make a Web Map with Leaflet. One of the main concepts of Glitch is that you start creating something by remixing a project that already works. The Make a Web Map with Leaflet challenge provides you with the code of a working Leaflet interactive map showing neighborhood boundaries in Portland, Oregon. You can edit this code and see the changes you make on the interactive map in real-time.

The challenges associated with Make a Web Map with Leaflet ask you to style the map pop-ups, change the GeoJSON file to a different location and add a legend to the map. You could also try changing the base map tiles used in this map (this Leaflet Provider Demo might help with that task).