Leaflet is designed with simplicity, performance and usability in mind.
Developed by Vladimir Agafonkin:
Great documentation online.
(demo from the main page example)
Step through of demo:
Add a container (div) with a height dimension:
<div id='demo'></div> <style type="text/css"> #demo { height: 20em; } </style>
Include Leaflet:
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
Create the map (one of many ways):
// constructing the map by ID and then setting the center and zoom level. var map = L.map('demo').setView([37.871293, -122.258556], 17);
Add a tile layer for map details (e.g., OpenStreetMap):
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }).addTo(map);
Add a marker
// add a marker in the given location, attach some popup content to it and open the popup L.marker([37.871293, -122.258556]).addTo(map) .bindPopup('School of Information');
Draw a circle:
// add a circle L.circle([38.22, -122.313], 6000).addTo(map);