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="" />  
<script src=""></script>  
<div id="map" class='map-type'"></div>  
    var map ='map',{
    center: [35.222569, -97.439476],
    zoom: 15

    L.tileLayer('http://{s}{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="">OpenStreetMap</a> contributors'

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=''>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.