Hello World
Before we get started with leaflet, it's important to understand the starter files and how things are wired together. Let's take a moment to go through the files.
index.html
This file contains the markup that the browser will display. In the head section, we include the Leaflet and jQuery libraries, as well as our own code contained in map.js. The body section is light containing only a single div element with the id of map. For this course, we'll be doing full screen maps, but leaflet doesn't care about the size of the element it is rendered to. You can use these techniques to integrate maps into any web page you want.
map.js
This file contains the JavaScript we'll be writing to display our maps. For now, we'll just initialize the map with some Open Street Map tiles and center the view on Dayton.
Result
That's all it takes to get a map rendered to your webpage. Leaflet has great support for both desktop and mobile devices. Let's take a look at the result here.