Introduction to Interactive Web Maps Using JavaScript and LeafletJS

This is an excellent beginning web application for anyone new to JavaScript and/or LeafletJS. The tutorial was developed by MIT and is easy to understand. As someone who is grateful to all professors/peers who have shared their knowledge and experience with me over the years, I like to contribute when able. I have included some modifications for aspiring web developers below that address publishing your application via GitHub Pages as well as Bower, a package manager that makes including frameworks, libraries, and utilities in your projects more convenient for developers. Altogether, this makes for an excellent start to learning about general web development as well as creating interactive web maps.

The full MIT tutorial can be found here.

View my application here.

Adjustments I made when running through this tutorial:

Step 1.b

I did not serve locally using Python. I created a GitHub repo and viewed changes locally using http://localhost/~username/projectname/ before pushing to GitHub. It is a good standard practice to follow. Also, you then have the ability to publish your webpages using GitHub Pages.

Step 1.d

I used Bower, as mentioned above, to add Leaflet to my project. It would be prudent to become familiar with Bower and its dependencies since many common packages can be easily installed with its use. Dependencies for Bower include Node and npm and Git.

Using command line, inside my working directory, I entered the following:

bower install leaflet

You will notice a new folder in your working directory called bower_components that contains the necessary Leaflet files for your project. Therefore, the Leaflet CSS link in the head section of your index.html would be referenced as:

<link rel="stylesheet" href="./bower_components/leaflet/dist/leaflet.css" />

and the Leaflet JavaScript link at the bottom of the body section would be referenced as:

<script src="./bower_components/leaflet/dist/leaflet.js"></script>

View my application here.

View my source code here.