Widget:World Map

==Map Locations Widget==

Use the following code to invoke:





.leaflet-container { background-color:rgba(255,0,0,0.0); }

// define a standard map marker var MapIcon = L.Icon.extend({	 	options: {			//shadowUrl: 'icons/T_Map_Icon_capital_vanir.png',			iconSize:    [32, 32],			//shadowSize:   [32, 32],			iconAnchor:   [16, 16],			//shadowAnchor: [0, 0],			popupAnchor:  [0, 0]		}	}); // Define all of the different icons for the map var iconBus = new MapIcon({iconUrl: 'https://d1u5p3l4wpay3k.cloudfront.net/mytimeatportia_gamepedia_en/5/50/Map_Icon_Bus.png?version=5bfd994053e8742971a59f5bcd7d62bb'}); var iconDee = new MapIcon({iconUrl: 'https://d1u5p3l4wpay3k.cloudfront.net/mytimeatportia_gamepedia_en/6/6c/Map_Icon_Dee-Dee_Stop.png?version=9a8acd953652b3f35262a7d318e9868a'}); var iconRuins = new MapIcon({iconUrl: 'https://d1u5p3l4wpay3k.cloudfront.net/conanexiles_gamepedia/7/77/T_Map_Icon_ruins.png'}); var iconDungeon = new MapIcon({iconUrl: 'https://d1u5p3l4wpay3k.cloudfront.net/conanexiles_gamepedia/b/b4/T_Map_dungeonIcon.png'});

// Define overlay layers for the different types of locations var overlayRuins = L.layerGroup; var overlayDungeons = L.layerGroup; var overlayTransport = L.layerGroup;

// Load the data for the map. var mapData = [ ["Bus Station", 110, 20, "Map_Icon_Bus"], ["Workshop Dee-Dee Stop", 50, -50, "Map_Icon_Dee"], ["Harbor Dee-Dee Stop", -40, 30, "Map_Icon_Dee"], ["Duck Pond Dee-Dee Stop", -90, -40, "Map_Icon_Dee"], ["Hot Springs Dee-Dee Stop", -200, -50, "Map_Icon_Dee"], ["Tree Farm Dee-Dee Stop", -50, -100, "Map_Icon_Dee"], ["Abandoned Ruins #2 Dee-Dee Stop", 60, -100, "Map_Icon_Dee"], ["Research Center Dee-Dee Stop", 200, -200, "Map_Icon_Dee"], ["Amber Island Dee-Dee Stop", 60, -15, "Map_Icon_Dee"], ["Bassanio Falls Dee-Dee Stop", 250, -80, "Map_Icon_Dee"], ["Bus Station Dee-Dee Stop", 120, -20, "Map_Icon_Dee"], ["Collapsed Wasteland Dee-Dee Stop", 300, -380, "Map_Icon_Dee"], ["Bassanio Heights Dee-Dee Stop", 700, -400, "Map_Icon_Dee"], ["Eufaula Desert Dee-Dee Stop", 240, 100, "Map_Icon_Dee"], ["Sanctuary Ruins", 40, 28, "T_Map_Icon_ruins"], ["The Well of Skelos", -29, -250, "T_Map_dungeonIcon"], ];

// Now add the markers to the map. // VERY IMPORTANT - the format for adding the coordinates is different to in Conan. // L.marker([-, ], {icon: }).addTo.bindPopup(' '); // The mapdata entries are in the format [ "Name", X, Y, "Icon"] for (var i in mapData) { console.log(mapData[i]); switch(mapData[i][3]) { case "Map_Icon_Bus": L.marker([-mapData[i][2], mapData[i][1]], {icon: iconBus}).addTo(overlayTransport).bindTooltip(" " + mapData[i][0] + " Ruins").openTooltip; break; case "Map_Icon_Dee": L.marker([-mapData[i][2], mapData[i][1]], {icon: iconDee}).addTo(overlayTransport).bindTooltip(" " + mapData[i][0] + " Ruins").openTooltip; break; case "T_Map_Icon_ruins": L.marker([-mapData[i][2], mapData[i][1]], {icon: iconRuins}).addTo(overlayRuins).bindTooltip(" " + mapData[i][0] + " Ruins").openTooltip; break; case "T_Map_dungeonIcon": L.marker([-mapData[i][2], mapData[i][1]], {icon: iconDungeon}).addTo(overlayDungeons).bindTooltip(" " + mapData[i][0] + " Dungeon").openTooltip; break; default: L.marker([-mapData[i][2], mapData[i][1]], {icon: iconCampDefault}).addTo(overlayCamps).bindTooltip(" " + mapData[i][0] + " Small camp").openTooltip; }	}

// Define the map and options for it. var map = L.map('map', {		crs: L.CRS.Simple,		minZoom: 0,		maxZoom: 5,		zoomDelta: 0.25,		zoomSnap: 0.25,		layers: [overlayRuins,overlayDungeons,overlayTransport]	}); // The map goes from approx x -340, y -445 to x 470, y 370 so define this for the boundaries var bounds = -200,-200], [200,200; // 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://d1u5p3l4wpay3k.cloudfront.net/mytimeatportia_gamepedia_en/3/3a/Map_Portia_10-1-18.png?version=6d0a2bf09f443cf4b7a1fc3645a7bf62', bounds).addTo(map); map.fitBounds(bounds); // Define the layers for the map var baseMaps = {}; var overlayMaps = { "Dungeons": overlayDungeons, "Ruins": overlayRuins, "Transport": overlayTransport, };	// Add a control for the layers L.control.layers(baseMaps, overlayMaps,{"sortLayers":true,"collapsed":false}).addTo(map);

// The centre of the map is NOT 0,0 - define the real centre for initial display // setView( center,  zoom,  options?) map.setView( [50, 50], 2.0);