Introduction to maps using Leaflet.js

I recently had the opportunity to work on "visualizing data on maps" at the university. I started using Leaflet.js because I just thought it had better tutorials. We basically jsonified data and used it to render markers on maps. Here's an example similar to what I did. Very basic stuff.

So the code is pretty simple. Included the CSS and JS for leaflet and then used Openstreet Map basic layer. Added a div on the main page and wrote a very simple script. Here's the code.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/leaflet.css" />  
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/leaflet.js"></script>  
<div id="map" class='map-type'"></div>  
<script>  
    var map = L.map('map',{
    center: [35.222569, -97.439476],
    zoom: 15
    });

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
</script>  

Now the next step is to simply, add a marker to the map. I used the lat, long for my University campus.

Marker was added simply by adding this line to the script

L.marker([35.2058936, -97.4457566]).addTo(map);  

And then to top it off add a tooltip so that you know what the marker is about

This was accomplished simply by adding a bindPopup to the marker object.

    var tooltip = "<strong><a href='http://www.ou.edu'>The University Of Oklahoma</a></strong><br /><p>Guys I promise that SAE chant was a one time thing (the other times we weren't caught).</p><p>...Guys?</p>";

    L.marker([35.2058936, -97.4457566]).bindPopup(tooltip).addTo(map);

The beautiful thing is that you can attach HTML using the method. That way you can style it how ever you want.