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));
}
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);
map.on("click", onMapClick);
Ext.Ajax.request({
scope: this,
headers: {
'Accept': 'application/json'
},
method: 'GET',
url: "https://api.guildwars2.com/v1/map_floor.json",
params: {
'lang': 'de',
'continent_id': '1',
'floor': '1'
},
success: 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);
}
}
}
},
failure: function (response, opts) {
console.log('ERROR: ' + response.status);
}
});