5/26/15 and 5/27/15 - MapMe (with OpenStreetMap and Leaflet)

I've been working on creating an app that loads a user's location using the HTML5 location API, then draws that location on a slippy map (A map you can drag around with your cursor, such as Google Maps). The app is powered by OpenStreetMap data, and uses a library called Leaflet to generate the slippy map. The tiles are loaded from a webserver that hosts OpenStreetMap data without needing an API key, which is good for our tutorial.

I actually ended up with two versions of this app—one has an additional Leaflet UI button to regenerate the user location. For the purposes of the tutorial, we decided that this was a bit beyond the scope of what we were trying to teach. The version that will be included in the tutorial is here, while the more advanced version is here.

Here's some screenshots of the version that will be in the tutorial.  Users can click the 'find my location' button as many times as they want!

The initial screen	Once the user's location is found
The map can be zoomed and moved

Here's my HTML for the button and map, and here's my CSS.
In order to get the map to fill the area of the screen not taken up by the location button header, I put both the map and the button inside a div with display set to table.  I set the display of the map container, .content, to a table-row, which makes it take up the remaining width on the page.  I initially had the .button-header class also set to table-row, but with that set, the element padding wasn't being applied, so I removed it.