JSFiddle - React, Tailwind, and code Playground

by dvmac

HTML

<script src="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet-src.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.css">
<div id="map"></div>

CSS

html, body, #map {
    display:block;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

JavaScript

var BingLayer = L.TileLayer.extend({
    getTileUrl: function (tilePoint) {
        this._adjustTilePoint(tilePoint);
        return L.Util.template(this._url, {
            s: this._getSubdomain(tilePoint),
            q: this._quadKey(tilePoint.x, tilePoint.y, this._getZoomForUrl())
        });
    },
    _quadKey: function (x, y, z) {
        var quadKey = [];
        for (var i = z; i > 0; i--) {
            var digit = '0';
            var mask = 1 << (i - 1);
            if ((x & mask) != 0) {
                digit++;
            }
            if ((y & mask) != 0) {
                digit++;
                digit++;
            }
            quadKey.push(digit);
        }
        return quadKey.join('');
    }
});

var layer = new BingLayer('http://t{s}.tiles.virtualearth.net/tiles/a{q}.jpeg?g=1398', {
    subdomains: ['0', '1', '2', '3', '4'],
    attribution: '&copy; <a href="http://bing.com/maps">Bing Maps</a>'
});

var map = new L.Map(document.querySelector('#map'), {
    layers: [layer],
    center: new L.LatLng(0.0, 0.0),
    zoom: 1
});