Leaflet OSM

fiddle.css

#map { 
    width: 400px;
    height: 400px;
}

fiddle.html

<div id="map"></div>

fiddle.js

var planes = [
    ["7C6B07", -40.99497, 174.50808],
    ["7C6B38", -41.30269, 173.63696],
    ["7C6CA1", -41.49413, 173.5421],
    ["7C6CA2", -40.98585, 174.50659],
    ["C81D9D", -40.93163, 173.81726],
    ["C82009", -41.5183, 174.78081],
    ["C82081", -41.42079, 173.5783],
    ["C820AB", -42.08414, 173.96632],
    ["C820B6", -41.51285, 173.53274]
];

var map = L.map('map').setView([-41.2858, 174.78682], 8);
mapLink =
    '<a href="http://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer(
    'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; ' + mapLink,
    maxZoom: 18
}).addTo(map);

var marker = L.marker([-41.29042, 174.78219])
    .addTo(map)
    .bindPopup("<b>Te Papa</b><br>Museum of New Zealand.")
    .openPopup();

for (var i = 0; i < planes.length; i++) {
    marker = new L.marker([planes[i][1], planes[i][2]])
        .bindPopup(planes[i][0])
        .addTo(map);
}

fiddle.manifest

name: LeafletJS OSM
description: LeafletJS with OpenStreetMaps tiles
authors:
  - Ernesto Celis <[email protected]>
resources:
  - http://cdn.leafletjs.com/leaflet-0.7/leaflet.js
  - http://cdn.leafletjs.com/leaflet-0.7/leaflet.css
normalize_css: no
wrap: l