JSFiddle - React, Tailwind, and code Playground

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/leaflet/0.5.1/leaflet.js"></script>
<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 onMapClick(e) {
    console.log("You clicked the map at " + map.project(e.latlng));
}

$(function () {
    "use strict";
    
    var southWest, northEast;
    
    map = L.map("map", {
        minZoom: 0,
        maxZoom: 6,
        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/2/3/{z}/{x}/{y}.jpg", {
        minZoom: 0,
        maxZoom: 7,
        continuousWorld: true
    }).addTo(map);

    map.on("click", onMapClick);

    $.getJSON("https://api.guildwars2.com/v2/wvw/objectives?page=0&page_size=200", function (data) {
        var objective, index;
        
        for (index in data) {
            objective = data[index];

            L.marker(unproject([objective.coord[0], objective.coord[1]]), {
                title: objective.name
            }).addTo(map);
        }
    });
});