Widget:Map Locations

==Map Locations Widget==

Use the following code to invoke:

Currently, all of the data on locations is included in the Celador Locations page.

The page also includes all formatting data.

Press the "Edit source" button at the top-right to see the actual source code of the widget (not visible in viewing mode). WARNING: TO ADD A NEW LOCATION, DO NOT EDIT THIS FILE, USE THE TABLE IN THE PROPER WIKI PAGE



 

.leaflet-container { background-color:rgba(255,0,0,0.0); } .map-scroll:before { content: 'Use CTRL + mouse wheel to zoom the map \a Use SHIFT + click to get a location'; white-space: pre; position: absolute; top: 5%; left: 35%; z-index: 999; font-size: 34px; } Where am I? Type the in-game "/where" call first and third values in those fields:  

// define a standard map marker (based on the default marker) // WARNING: Need to set icon size & anchor or else markers are moving on the map when zooming var MapIcon = L.Icon.extend({	  options: {		//iconUrl:       'marker-icon.png',		//iconRetinaUrl: 'marker-icon-2x.png',		//shadowUrl:     'marker-shadow.png',		iconSize:    [25, 41],		iconAnchor:  [12, 41],		popupAnchor: [1, -34],		tooltipAnchor: [16, -28],		//shadowSize:  [41, 41]           }	});

// Define all of the different icons for the map var iconCities = new MapIcon({iconUrl: '/media/8/85/Marker-blue.png'}); var iconGates = new MapIcon({iconUrl: '/media/c/c7/Marker-green.png'}); var iconMines = new MapIcon({iconUrl: '/media/f/f5/Marker-grey.png'}); var iconMonsters = new MapIcon({iconUrl: '/media/7/79/Marker-orange.png'}); var iconDungeons = new MapIcon({iconUrl: '/media/0/0c/Marker-red.png'}); var iconTaming = new MapIcon({iconUrl: '/media/9/9f/Marker-purple.png'});

// Define overlay layers for the different types of locations var overlayDungeons = L.layerGroup; var overlayCities = L.layerGroup; var overlayMines = L.layerGroup; var overlayMonsters = L.layerGroup; var overlayGates = L.layerGroup; var overlayTaming = L.layerGroup;

// Define the map and options for it. var map = L.map('map', {		crs: L.CRS.Simple,		minZoom: -3,		maxZoom: 1,		zoomDelta: 0.25,		zoomSnap: 0.25,		layers: [overlayCities,overlayGates,overlayMines,overlayTaming,overlayMonsters,overlayDungeons]	});

// Load the data for the map. $.ajax({	       type: "GET",	url: "https://legendsofultima.gamepedia.com/api.php?action=parse&format=json&prop=text|​links&page=Celador_Locations",        contentType: "application/json; charset=utf-8",	async: false,	dataType: "json",	success: function (data) {          var html = data.parse.text['*'];

if(!html) { return console.log("no HTML"); }         var $hiddenContent = $(' ').html(data.parse.text['*']).hide;

var mapData = $hiddenContent.find('table.sortable tr').map(function {            return new Array($('td', this).map(function {                 return $(this).text.replace(/\n/g, "").trim             }).slice(0, 9).get)               // Just use the 9 first columns for now          }).get; $hiddenContent.remove; // remove our helper div

// Now add the markers to the map. // L.marker([, ], {icon: }).addTo.bindPopup(' '); // The mapdata entries are in the format [ "Type", "Name", "Link", "X", "Y", "Protected Area", "subline 1", "subline 2", "subline 3"] for (var i in mapData) { if (i == 0) {  // First item isn't a entry continue; }		//console.log(mapData[i]); var aIcon = iconCities; var aOverlay = overlayCities; switch(mapData[i][0]) { case "City": aIcon = iconCities; aOverlay = overlayCities; break; case "Mine": aIcon = iconMines; aOverlay = overlayMines; break; case "Transport": aIcon = iconGates; aOverlay = overlayGates; break; case "Monsters": aIcon = iconMonsters; aOverlay = overlayMonsters; break; case "Dungeons": aIcon = iconDungeons; aOverlay = overlayDungeons; break; case "Taming": aIcon = iconTaming; aOverlay = overlayTaming; break; default: console.log("error: " + mapData[i]); continue; // skip if not the right type }

var locationX = parseFloat(mapData[i][3]) || 0; var locationY = parseFloat(mapData[i][4]) || 0; //console.log(locationX + ", " + locationY); var popupContent = " " + mapData[i][1] + " "; if (mapData[i][2] != "") { popupContent = "" + popupContent + ""; }               if (mapData[i][5].startsWith("Yes")) { popupContent += "Protected Area "; }               else { popupContent += "Unprotected Area "; }               if (mapData[i][6] != "") { popupContent += "" + mapData[i][6]; }               if (mapData[i][7] != "") { popupContent += "" + mapData[i][7]; }               if (mapData[i][8] != "") { popupContent += "<BR>" + mapData[i][8]; }               var _marker = L.marker([locationY, locationX], {icon: aIcon}); _marker.addTo(aOverlay).bindPopup(popupContent).openPopup; _marker.on('mouseover', function (e) {                     this.togglePopup;                }); }

// Define the boundaries as 1 unit per in-game unit (image is 4000x4000) var bounds = -3968.87,-3741.21], [3487.13,3706.79; // Provide the full URL to the map image that has been uploaded. May fail if the image is updated by someone. var image = L.imageOverlay('/media/d/d3/LoU_NewCelador_Map.jpg', bounds).addTo(map); map.fitBounds(bounds);

// Create the Protected areas map overlay var overlayProtected = L.layerGroup; var overlay = L.imageOverlay('/media/4/43/NewCelador_Protection_Overlay_4000.png', bounds); overlay.setOpacity(0.5); overlay.addTo(overlayProtected);

// Create the small roads overlay var overlayRoads = L.layerGroup; var overlayR = L.imageOverlay('/media/6/63/Roads.png', bounds); overlayR.addTo(overlayRoads);

// Define the layers for the map var baseMaps = {}; var overlayMaps = { "<font color=\"blue\">Cities/Landmarks ": overlayCities, "<font color=\"green\">Mage Towers/Piers ": overlayGates, "<font color=\"grey\">Mines ": overlayMines, "<font color=\"purple\">Taming ": overlayTaming, "<font color=\"orange\">Monsters/Enemies ": overlayMonsters, "<font color=\"red\">Dungeons/Awakenings ": overlayDungeons, "<font color=\"green\">Show Protected Areas ": overlayProtected, "Show small roads and mines": overlayRoads, };	// Add a control for the layers L.control.layers(baseMaps, overlayMaps,{"sortLayers":false,"collapsed":false}).addTo(map);

// Define the centre & zoom for initial display // setView(<LatLng> center, <Number> zoom, <Zoom/pan options> options?) map.setView( [0, 0], -1.0);

//disable default scroll to use CTRL map.scrollWheelZoom.disable;

$("#map").bind('mousewheel DOMMouseScroll', function (event) {   event.stopPropagation;     if (event.ctrlKey == true) {             event.preventDefault;         map.scrollWheelZoom.enable;           $('#map').removeClass('map-scroll');         setTimeout(function{ map.scrollWheelZoom.disable; }, 1000);    } else {         map.scrollWheelZoom.disable;         $('#map').addClass('map-scroll');     }

});

$(window).bind('mousewheel DOMMouseScroll', function (event) {      $('#map').removeClass('map-scroll');  });

map.on('click', function (e) {   if (e.originalEvent.shiftKey) {      var locationX = e.latlng.lng;      var locationY = e.latlng.lat;      //console.log("Lat, Lon : " + locationX + ", " + locationY);           this.openTooltip("location X: " + locationX.toFixed(2) + "<BR>location Y: " + locationY.toFixed(2), e.latlng);    }        });

// End of success function AJAX }, 	error: function { return console.log("error"); } });

function get_location { map.eachLayer(function(layer) {             if(layer.options.pane === "tooltipPane") layer.removeFrom(map);            }); var locationX = parseFloat(document.getElementById("Text1").value) || 0; var locationY = parseFloat(document.getElementById("Text2").value) || 0; var latlng = L.latLng(locationY, locationX); map.flyTo(latlng); map.openTooltip("You are here", latlng); }