JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-rc.1/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-rc.1/leaflet.css">
<div id="mapdiv"></div>
CSS
#mapdiv { width: 700px; height: 500px; }
.leaflet-container { background: #000; }
JavaScript
// Including the leaflet js library provides the variable L with various map tools
var map;
// Helper function to convert GW2 coordinates into Leaflet coordinates
// GW2 coordinates: Northwest = [0,0], Southeast = [continent_xmax,continent_ymax];
// Leaflet: Northwest = [0,0], Southeast = [-256, 256]
function unproject(coord) {
return map.unproject(coord, map.getMaxZoom() );
}
// Tells you the coordinates that you clicked at
function onMapClick(e) {
console.log("You clicked the map at " + map.project(e.latlng,map.getMaxZoom()));
}
// Main function
function createMap() {
// Adds the leaflet map within the specified element, in this case a div with id="mapdiv"
// Additionally we set the zoom levels to match the tilelayers, and set the coordinate reference system
map = L.map("mapdiv", {
minZoom: 2,
maxZoom: 7,
crs: L.CRS.Simple
});
// Add map tiles using the [[API:Tile service]]
L.tileLayer("https://tiles.guildwars2.com/1/1/{z}/{x}/{y}.jpg").addTo(map);
// Restrict the area which can be panned to
// In this case we're using the coordinates for the continent of tyria from "https://api.guildwars2.com/v2/continents/1"
var continent_dims = [32768,32768];
map.setMaxBounds(new L.LatLngBounds(unproject([0,0]), unproject(continent_dims))); // northwest, southeast
// Set the default viewport position (in this case the midpoint) and zoom (in this case 2)
map.setView(unproject([(continent_dims[0] / 2),(continent_dims[1] / 2)]), 2);
// Add a function to return clicked coordinates to the javascript console
map.on("click", onMapClick);
}
createMap();