JSFiddle - React, Tailwind, and code Playground

by cliff

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.5.1/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.5.1/leaflet.js"></script>
<div id="map"></div>

CSS

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

JavaScript

var map;

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

function onMapClick(e) {
    console.log("You clicked the map at " + map.project(e.latlng));
}

$(function () {
    map = L.map("map", {
        minZoom: 0,
        maxZoom: 7,
        crs: L.CRS.Simple
    }).setView([0, 0], 0);

    var southWest = unproject([0, 32768]);
    var northEast = unproject([32768, 0]);
    map.setMaxBounds(new L.LatLngBounds(southWest, northEast));

    L.tileLayer("http://maps-dev.ncplatform.net/1/1/{z}/{x}/{y}.jpg", {
        minZoom: 0,
        maxZoom: 7,
        continuousWorld: true
    }).addTo(map);

    map.on('click', onMapClick);

    $.getJSON('https://api.guildwars2.com/v1/map_floor.json?continent_id=1&floor=1&all=1', function (data) {
        for (var regionId in data.regions) {
            var region = data.regions[regionId];
            for (var mapId in region.maps) {
                var gameMap = region.maps[mapId];
                for (var i = 0; i < gameMap.points_of_interest.length; ++i) {
                    var poi = gameMap.points_of_interest[i];
                    if (poi.type != 'waypoint') continue;

                    L.marker(unproject(poi.coord), {
                        title: poi.name
                    }).addTo(map);
                }

            }
        }
    });
});