JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Apple Maps</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="http://leaflet.cloudmade.com/dist/leaflet.css" />
    <!--[if lte IE 8]><link rel="stylesheet" href="http://leaflet.cloudmade.com/dist/leaflet.ie.css" /><![endif]-->
</head>
<body>
    <div id="map" style="width: 100%; height: 100%"></div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://leaflet.cloudmade.com/dist/leaflet.js"></script>
</body>
</html>

CSS

html, body { display: block; width: 100%; height: 100%; }

JavaScript

var map = new L.Map('map');
var appleUrl = 'http://gsp2.apple.com/tile?api=1&style=slideshow&layers=default&lang=en_US&z={z}&x={x}&y={y}&v=9',
  appleAttribution = 'Map data &copy; 2012  Apple, Imagery &copy; 2012 Apple',
  apple = new L.TileLayer(appleUrl, {maxZoom: 18, attribution: appleAttribution});

map.setView(new L.LatLng(52.516, 13.387), 14).addLayer(apple);