JSFiddle - React, Tailwind, and code Playground

by LMDavid

HTML

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

CSS

.leaflet-container {
    background: #000;
}

#map {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

JavaScript

var map;

function unproject(coord) {
    return map.unproject(coord, map.getMaxZoom());
}

$(function () {
    "use strict";
    
    var southWest, northEast;
    
    map = L.map("map", {
        minZoom: 0,
        maxZoom: 7,
        crs: L.CRS.Simple
    }).setView([0, 0], 0);
    
    southWest = unproject([0, 32768]);
    northEast = unproject([32768, 0]);
    
    map.setMaxBounds(new L.LatLngBounds(southWest, northEast));

    L.tileLayer("https://tiles.guildwars2.com/1/1/{z}/{x}/{y}.jpg", {
        minZoom: 0,
        maxZoom: 7,
        continuousWorld: true
    }).addTo(map);

});