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: 7,
crs: L.CRS.Simple
}).setView([0, 0], 0);
$.getJSON("https://api.guildwars2.com/v1/map_floor.json?continent_id=1&floor=1", function (data) {
var region, gameMap, i, il, poi;
});
southWest = unproject([0, 49152]);
northEast = unproject([49152, 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);
map.on("click", onMapClick);
$.getJSON("https://api.guildwars2.com/v1/map_floor.json?continent_id=1&floor=1", function (data) {
var region, gameMap, i, il, poi;
for (region in data.regions) {
region = data.regions[region];
for (gameMap in region.maps) {
gameMap = region.maps[gameMap];
for (i = 0, il = gameMap.points_of_interest.length; i < il; i++) {
poi = gameMap.points_of_interest[i];
if (poi.type != "waypoint") {
continue;
}
L.marker(unproject(poi.coord), {
title: poi.name
}).addTo(map);
}
}
}
});
});