index.html

<html>
	<head>
		<title>Breath of the Wild Object Map</title>
		<meta charset="utf-8">
		<script src='jquery-1.12.0.min.js'></script>
		<link rel="stylesheet" href="leaflet.css" />
		<link rel="stylesheet" href="MarkerCluster.css" />
		<link rel="stylesheet" href="chosen.min.css" />
		<script src="leaflet.js"></script>
		<script src="list.min.js"></script>
		<script src="leaflet.markercluster.js"></script>
		<script src="chosen.jquery.min.js"></script>
		<style>
		body {
			background: #3e443b;
			color: #dadad3;
			font-family: sans-serif;
			font-size: small;
		}
		.leaflet-container {
			background-color: rgba(255,0,0,0.0);
		}
		#botw_map {
			display: inline-block;
			height: 99%;
			width: 70%;
		}
		#sidebar {
			display: inline-block;
			height: 99%;
			width: 29%;
			overflow: scroll;
			white-space: nowrap;
		}
		#sidebar > .list li, #sidebar > .list {
			list-style-type: none;
			padding: 0;
		}
		#filter {
			width: 300px;
		}
		.display-name {
			font-style: italic;
		}
		.name-separator {
			color: #8c8f87;
		}
		.internal-name {
			font-family: "Courier New", Courier, monospace;
		}
		.itemName {
			display: none;
		}
		.div-icon0 { border-radius: 50%; border: 1px solid #00FFFF; background: rgba(0,255,255,0.25)}
		.div-icon1 { border-radius: 50%; border: 1px solid #FFFF00; background: rgba(255,255,0,0.25) }
		.div-icon2 { border-radius: 50%; border: 1px solid #FF00FF; background: rgba(255,0,255,0.25) }
		.div-icon3 { border-radius: 50%; border: 1px solid #FF6060; background: rgba(255,96,96,0.25) }
		.div-icon4 { border-radius: 50%; border: 1px solid #60FF60; background: rgba(96,255,96,0.25) }
		.div-icon5 { border-radius: 50%; border: 1px solid #6030FF; background: rgba(96,48,255,0.25) }
		.div-icon6 { border-radius: 50%; border: 1px solid #40C0FF; background: rgba(64,192,255,0.25) }
		.div-icon7 { border-radius: 50%; border: 1px solid #C0FF40; background: rgba(192,255,64,0.25) }
		.div-icon8 { border-radius: 50%; border: 1px solid #FF40C0; background: rgba(255,64,192,0.25) }
		.div-icon9 { border-radius: 50%; border: 1px solid #FFC040; background: rgba(255,192,64,0.25) }
		.div-icon10 { border-radius: 50%; border: 1px solid #40FFC0; background: rgba(64,255,192,0.25) }
		.div-icon11 { border-radius: 50%; border: 1px solid #C040FF; background: rgba(192,64,255,0.25) }
		.div-icon12 { border-radius: 50%; border: 1px solid #FFFFFF; background: rgba(255,255,255,0.25) }
		.big-icon {
			border-width: 2px;
			text-align: center;
			color: #fff;
			text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
			height: 18px;
			line-height: 18px;
		}
		a {
			color: #09f;
		}
		</style>
	</head>
	<body>
		<div id="botw_map"></div>
		<div id="sidebar">
			<div>
				<select id="filter" data-placeholder="Filter by preset..." multiple></select><br>
				<button id="selectAll" title="Select all filtered items" disabled>All</button><button id="selectNone" title="Deselect all filtered items">None</button>
				<input type="text" class="search" title="Filter by name..." autocomplete="off"/>
			</div>
			<ul class="list"></ul>
		</div>
		<div>Note that many objects are dynamically generated and are not included in this data. For more BotW datamining, see my <a href="https://mrcheeze.github.io/">GitHub/Pastebin</a>. Also, more advanced functionality is available in <a href="https://objmap.zeldamods.org/">Leoetlino's object map</a>. For Tears of the Kingdom data, see Vetyst's <a href="https://vetyst.github.io/TotK-Object-Map/">TotK-Object-Map</a>.</div>
		<script>
			var presets = {"AttackUp":["Animal_Insect_G", "Item_Plant_G", "Item_Fruit_H", "Item_Mushroom_L",
									   "Animal_Fish_E", "Item_FishGet_E", "Animal_Insect_K", "Animal_Fish_F", "Item_FishGet_F"],
						   "MovingSpeed":["Animal_Insect_S", "Item_MushroomGet_D", "Item_Mushroom_D", "Item_PlantGet_M",
										  "Item_Plant_M", "Animal_Insect_A", "Item_Plant_O", "Item_Fruit_E",
										  "Item_PlantGet_O"],
						   "Fireproof":["Animal_Insect_X"],
						   "Cooking Pots":["Item_CookSet","Item_CookSet_PanOnly"],
						   "Horses":["WildHorseCreateTag","WildHorseCreateTag01","WildHorseCreateTag02",
									 "WildHorseCreateTag03","GameRomHorseBone","GameRomHorseNushi","GameRomHorseZelda","GameRomHorse00L"],
						   "Overworld Bosses":["Enemy_Giant_Bone","Enemy_Giant_Bone_AllDay","Enemy_Giant_Junior","Enemy_Giant_Middle","Enemy_Giant_Senior",
											   "Enemy_Golem_Fire","Enemy_Golem_Ice","Enemy_Golem_Junior","Enemy_Golem_Middle","Enemy_Golem_Senior",
											   "Enemy_Lynel_Dark","Enemy_Lynel_Junior","Enemy_Lynel_Junior_Mountain","Enemy_Lynel_Middle","Enemy_Lynel_Senior",
											   "Enemy_Sandworm","Enemy_Assassin_Senior"],
						   "Treasure Chests":["TBox"],
						   "DLC":["Aoc","HARD:"],
						   "Permamently Used":['BreakableRock', 'DgnObj_WallCrack_C_01', 'DgnObj_WallCrack_Wind_A_02', 'Enemy_Assassin_Senior', 'Enemy_Ganon', 'Enemy_Guardian_Mini_Practice', 'Enemy_SiteBoss_Bow', 'Enemy_SiteBoss_Lsword', 'Enemy_SiteBoss_Spear', 'Enemy_SiteBoss_Sword', 'FldObj_AssassinPicture_A_01', 'FldObj_AssassinPicture_A_02', 'FldObj_BreakableRockDeathMT_A_01', 'FldObj_BreakableRockDeathMT_A_02', 'IceWall', 'IceWallRuins', 'IceWallRuins_Challenge', 'IceWall_100enemy', 'IceWall_Tower', 'Item_Enemy_02', 'Item_Enemy_05', 'Item_Enemy_26', 'Item_Enemy_27', 'Item_Enemy_28', 'Item_Enemy_29', 'Item_Enemy_30', 'Item_Enemy_31', 'Obj_AncientArrow_A_01', 'Obj_AncientArrow_B_01', 'Obj_AncientArrow_C_01', 'Obj_ArrowBundle_A_01', 'Obj_ArrowBundle_A_02', 'Obj_ArrowBundle_A_10', 'Obj_ArrowNormal_A_01', 'Obj_BombArrow_A_01', 'Obj_BombArrow_A_02', 'Obj_BombArrow_A_03', 'Obj_BombArrow_A_04', 'Obj_CursedStatue', 'Obj_DungeonClearSeal', 'Obj_ElectricArrow_A_01', 'Obj_ElectricArrow_A_02', 'Obj_ElectricArrow_A_03', 'Obj_ElectricArrow_B_01', 'Obj_FireArrow_A_01', 'Obj_FireArrow_A_02', 'Obj_FireArrow_A_03', 'Obj_HeartUtuwa_A_01', 'Obj_HeroSoul_Gerudo', 'Obj_HeroSoul_Goron', 'Obj_HeroSoul_Rito', 'Obj_HeroSoul_Zora', 'Obj_IceArrow_A_01', 'Obj_IceArrow_A_02', 'Obj_IceArrow_A_03', 'Obj_KorokNuts', 'Obj_Maracas', 'Obj_RockBroken_A_02', 'Obj_StaminaUtuwa_A_01', 'Obj_ThunderRock', 'Obj_WarpDLC', 'PutRupee', 'PutRupee_Blue', 'PutRupee_Gold', 'PutRupee_Purple', 'PutRupee_Red', 'PutRupee_Silver', 'RemainsFire_Drone_A_01', 'TBox_Field_Enemy', 'TBox_Field_Iron', 'TBox_Field_Iron_NoReaction', 'TBox_Field_Iron_NoReaction_Aoc', 'TBox_Field_Iron_NoReaction_Aoc_long', 'TBox_Field_Stone', 'TBox_Field_Stone_NoReaction', 'TBox_Field_Wood', 'TreasureSpot_00', 'TwnObj_HyruleCastleObject_Wallcrack_Before_A_01', 'TwnObj_HyruleCity_Tower_WallCrack_A_01', 'VolcanoEruptionField', 'WallCrack', 'WallCrack_Wind', 'Weapon_Spear_049', 'Weapon_Sword_070', 'FldObj_RuinGuardianSand_A_Dynamic', 'FldObj_RuinGuardianSnow_A_Dynamic', 'FldObj_RuinGuardian_A_Dynamic','BM_Relief', 'DgnObj_AncientReactor_B_01', 'DgnObj_AncientReactor_B_01_on', 'DgnObj_DownloadTerminal_A_01', 'DgnObj_DungeonEntranceSP', 'DgnObj_DungeonEntranceSP_Far', 'DgnObj_EntranceTerminalSP', 'DgnObj_EntranceTerminal_A_01', 'DgnObj_RemainsLithogragh_A_02', 'DgnObj_RemainsLithograph_A_01', 'DgnObj_RemainsTerminalBody_A', 'FldObj_DownloadTerminal_A_01', 'FldObj_Terminal_A_01', 'Mannequin_001_Head', 'Mannequin_001_Lower', 'Mannequin_001_Upper', 'Mannequin_002_Head', 'Mannequin_002_Lower', 'Mannequin_002_Upper', 'Mannequin_003_Head', 'Mannequin_003_Lower', 'Mannequin_003_Upper', 'Mannequin_004_Head', 'Mannequin_004_Lower', 'Mannequin_004_Upper', 'Mannequin_005_Head', 'Mannequin_005_Lower', 'Mannequin_005_Upper', 'Mannequin_006_Head', 'Mannequin_006_Lower', 'Mannequin_006_Upper', 'Mannequin_007_Head', 'Mannequin_007_Lower', 'Mannequin_007_Upper', 'Mannequin_008_Head', 'Mannequin_008_Lower', 'Mannequin_008_Upper', 'Mannequin_009_Upper', 'Npc_HiddenKorokFly', 'Npc_HiddenKorokGround', 'ShutterKey', 'SwitchCandlestickAncient', 'SwitchCandlestickAncientOn', 'TBox_Dungeon_Iron', 'TBox_Dungeon_Iron_050', 'TBox_Dungeon_Iron_Hanged', 'TBox_Dungeon_Stone', 'TBox_Dungeon_Wood', 'TBox_Dungeon_Wood_AreaCulling', 'TBox_Field_Iron_GodTree', 'TwnObj_AncientCandlePoleRoofOff_A_01', 'TwnObj_AncientReactorCoreOff_A_01', 'TwnObj_AncientReactorCore_A_01', 'TwnObj_ArtifactObservationPostBed_A_01', 'TwnObj_GateKeeperBed_A_01', 'TwnObj_HeburaLodgeBed_A_01', 'TwnObj_HunterHouseBed_A_01', 'TwnObj_Village_KorokBed_A_01', 'TwnObj_Village_SakuradaBed_A_01', 'TwnObj_Village_ZoraFacilityBed_A_01']};
			
			var map = L.map('botw_map', {
				preferCanvas: true,
				minZoom: -4,
				maxZoom: 4,
				center: [0, 0],
				zoom: -4,
				crs: L.CRS.Simple
			});
			var southWest = map.unproject([-6000, 5000], 0);
			var northEast = map.unproject([6000, -5000], 0);
			var bounds = new L.LatLngBounds(southWest, northEast);
			L.imageOverlay('BotW-Map-Grid.png', bounds).addTo(map);
			map.setMaxBounds(bounds);
			
			var query = window.location.href.search('list=');
			var locationfile = 'map_locations.js';
			if (query > 0) {
				locationfile = window.location.href.substr(window.location.href.search('list=')+5) + '.js';
			}
			$.getScript(locationfile, function() {
				
				var internal_names = Object.keys(locations).sort();
				var listHtml = internal_names.map(renderListItem).join("");

				$('#sidebar > ul').append(listHtml);

				var icons = Array.from(Array(12).keys()).map(i => L.divIcon({className: 'div-icon' + i}));
				var markers = {};

				var markerClusterGroupOptions = {
					removeOutsideVisibleBounds: true,
					spiderfyOnMaxZoom: false,
					disableClusteringAtZoom: 0,
					animate: false,
					maxClusterRadius: 20, 
					iconCreateFunction: function(cluster) {
						var childMarkers = cluster.getAllChildMarkers();
						var titleText = '';
						var iconClassName = '';

						if (childMarkers.length > 0) {
							var childOptions = childMarkers[0].options;
							titleText = childOptions.title;

							if (childOptions.icon) {
								iconClassName = childOptions.icon.options.className || '';
							}
						}
						// Set the options and icon based on inherited child values
						cluster.options.title = childMarkers.length + " x " + titleText;
						return L.divIcon({
							html: cluster.getChildCount(),
							className: "big-icon " + iconClassName,
							iconSize: [18, 18]
						});
					}
				};

				// Note: in case we want to load the sidebar items asynchronously, using this style of event
				// handler will apply to both current and future items
				$('#sidebar > ul').on('change', 'input', function () {
					if (!(this.name in markers)) {
						markers[this.name] = L.markerClusterGroup(markerClusterGroupOptions);
					}
					var groupMarker = markers[this.name];

					if ($(this).is(':checked')) {

						var markerOptions = {
							icon: icons[stringToValue(this.name) % icons.length],
							keyboard: false,
							title: getExpandedName(this.name)
						};

						var targetLocations = locations[this.name].locations;
						var newMarkers = targetLocations.map(target => {
							var coords = map.unproject(target, 0);
							return L.marker(coords, markerOptions);
						});
						groupMarker.addLayers(newMarkers);
						map.addLayer(groupMarker);
					} else {
						map.removeLayer(groupMarker);
						groupMarker.clearLayers(); // Get some memory back?
					}
				});

				var sidebarList = new List("sidebar", { valueNames: ['itemName'] });

				// Create preset filters
				var presetOptions = Object.keys(presets).map(presetName => '<option>' + presetName + '</option>');
				$('#filter').append(presetOptions.join(""));
				$("#filter").chosen().change(function(){
					var selectedOptions = $(this).val();
					if (!selectedOptions) {
						sidebarList.filter();
					} else {
						var regexList = $(this).val().map(presetName => new RegExp('.*(' + presets[presetName].join("|") + ').*'));
						sidebarList.filter(item => {
							var itemName = item.values().itemName;
							return regexList.every(regex => regex.test(itemName));
						});
					}
				});

				$('#selectAll').click(function() {
					$('.list input:checkbox:not(:checked)').prop('checked', true).trigger('change');
				});

				$('#selectNone').click(function() {
					$('.list input:checkbox:checked').prop('checked', false).trigger('change');
				});

				sidebarList.on('searchComplete', setSelectAllSafety);
				sidebarList.on('filterComplete', setSelectAllSafety);

				function setSelectAllSafety() {
					$('#selectAll').prop('disabled', sidebarList.matchingItems.length > 1000);
				}
			});

			// hash the string
			function stringToValue(str) {
				var hash = 0;
				for (i = 0; i < str.length; i++) {
					char = str.charCodeAt(i);
					hash = ((hash<<5)-hash)+char;
					hash = hash & hash;
				}
				return Math.abs(hash);
			};
			function getExpandedName(internal_name) {
				return ((locations[internal_name].display_name !== internal_name) ? locations[internal_name].display_name + ' — ': '') + internal_name;
			}
			function renderListItem(internal_name) {
				var s = '<li><label><input type="checkbox" name="' + internal_name + '">';
				if (locations[internal_name].display_name !== internal_name) {
					s += '<span class="display-name">' + locations[internal_name].display_name + '</span> <span class="name-separator">—</span> ';
				}
				s += '<span class="internal-name">' + internal_name + '</span><span class="itemName">'+getExpandedName(internal_name)+'</span></label></li>';
				return s;
			};
		</script>
	</body>
</html>