Widget:Houses Locations

==User Houses Locations Widget==

Use the following code to invoke:

Currently, game data on locations are loaded from the Celador Locations page, and user houses locations are dynamic from a table in the respective Player Houses 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 YOUR HOUSE OR ANY 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; }

// 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: 'https://gamepedia.cursecdn.com/shardsonline_gamepedia/8/85/Marker-blue.png'}); var iconGates = new MapIcon({iconUrl: 'https://gamepedia.cursecdn.com/shardsonline_gamepedia/c/c7/Marker-green.png'}); var iconMines = new MapIcon({iconUrl: 'https://gamepedia.cursecdn.com/shardsonline_gamepedia/f/f5/Marker-grey.png'}); var iconHouses = new MapIcon({iconUrl: 'https://gamepedia.cursecdn.com/shardsonline_gamepedia/5/5b/Marker-house.png'});

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

// Load the data for the map. $.ajax({	       type: "GET",	url: "https://legendsofaria.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": case "Dungeons": case "Taming": continue; // skip if not the right type 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 += "" + mapData[i][8]; }               var _marker = L.marker([locationY, locationX], {icon: aIcon}); _marker.addTo(aOverlay).bindPopup(popupContent).openPopup; _marker.on('mouseover', function (e) {                     this.togglePopup;                }); }

// load houses locations var tableContent = $('table.sortable tr').map(function {          return new Array($('td', this).map(function {               return $(this).text           }).slice(0, 6).get)               // Just use the 5 first columns for now        }).get;

for (var i in tableContent) { if (i == 0) {  // First item isn't a entry continue; }		//console.log(i+ ": " +tableContent[i]); var locationX = parseFloat(tableContent[i][1]) || 0; var locationY = parseFloat(tableContent[i][2]) || 0; var popupContent = " " + tableContent[i][0] + " "; if (tableContent[i][4].startsWith("Yes")) { popupContent += " Selling: " + tableContent[i][5]; }		//console.log(locationX + ", " + locationY); var _marker = L.marker([locationY, locationX], {icon: iconHouses}); _marker.addTo(overlayHouses).bindPopup(popupContent).openPopup; _marker.on('mouseover', function (e) {                     this.togglePopup;                }); }

// Define the map and options for it. var map = L.map('map', {		crs: L.CRS.Simple,		minZoom: -3,		maxZoom: 1,		fullscreenControl: true,		zoomDelta: 0.25,		zoomSnap: 0.25,		layers: [overlayHouses]	}); // 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('https://gamepedia.cursecdn.com/shardsonline_gamepedia/e/e0/NewCelador_Map_DarkenedAreas_4000.jpg?version=b5e65125ece3d51ee631132229158c39', bounds).addTo(map); map.fitBounds(bounds);

// Create the Protected areas map overlay var overlayProtected = L.layerGroup; var overlay = L.imageOverlay('https://gamepedia.cursecdn.com/shardsonline_gamepedia/4/43/NewCelador_Protection_Overlay_4000.png?version=fa3d5d859869c7d2ceaa53c193f86b90', bounds); overlay.setOpacity(0.5); overlay.addTo(overlayProtected);

// Create the small roads overlay var overlayRoads = L.layerGroup; var overlayR = L.imageOverlay('https://gamepedia.cursecdn.com/shardsonline_gamepedia/6/63/Roads.png?version=ed29d60b2644286ba68f0498ca8286da', bounds); overlayR.addTo(overlayRoads);

// Define the layers for the map var baseMaps = {}; var overlayMaps = { "Cities/Landmarks ": overlayCities, "<font color=\"green\">Mage Towers/Piers ": overlayGates, "<font color=\"grey\">Mines ": overlayMines, "Houses": overlayHouses, "<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"); } });